组件、Prop 和 State

2018/08/09 · JavaScript
· React

原文出处: Linton
Ye   译文出处:郑丰彧   

系列博客: 用通俗的语言和涂鸦来解释 React 术语

  • 图解 React
  • 图解 React Native
  • 组件、Prop 和 State (本文)
  • 深入理解 Props 和
    State
    (待翻译)
  • React Native vs.
    Cordova、PhoneGap、Ionic,等等
    (待翻译)

今天我们来学习 React 里最重要的三个概念: 组件、prop 和 state ,以及 prop
和 state 之间的区别。

如同之前的文章,我还是会尝试用通俗的语言来解释这些概念。因此,阅读本文同样不需要任何
JavaScript 基础。

在本章中你根本找不到任何 JavaScript
代码,我将用一种简单的标识语言来帮助你理解主要的概念,在以后的文章里我再用
JavaScript 代码详细讲解。一步一个脚印嘛,我相信这种方法对于学习 React
或其他技术都是有效的,尤其是当你没有太多编程经验时。要是将 React
的概念和 JavaScript 的细节混在一起的话,很可能会令你不知所措!

React Context API: 轻松管理状态

2018/09/03 · JavaScript
· React

原文出处: Abdulazeez
Adeshina   译文出处:OFED   

使用最新的 React Context API
管理状态非常容易。现在就跟随我一起学习下它和 Redux
的区别以及它是如何使用的吧。

**综述:**React Context API 在 React
生态系统中并不是个新鲜事物。不过,在 React 16.3.0
版本中做了一些改进。这些改进是如此巨大,以至于大大减少了我们对
Redux
和其他高级状态管理库的需求。在本文中,你将通过一个实用教程了解到新的
React Context API 是如何取代 Redux 完成小型应用的状态管理的。

一,效果图。

学习目标

当你读完本文后希望你能重新回到这里,并能够轻松回答以下问题:

  • 什么是 prop ?
  • 什么是 state ?
  • 何时使用 prop ?何时使用 state ?
  • 如何让例子的窗户可以打开和关闭?
  • 你能写出 Domo 帽子那个例子的伪代码吗?

Redux 快速回顾

在直奔主题之前,我们先来快速回顾下
Redux,以便我们更好的比较两者的区别。redux 是一个便于状态管理的
JavaScript 库。Redux 本身和 React
并没有关系。来自世界各地的众多开发者选择在流行的前端框架(比如 React
Angular )中使用 Redux。

说明一点,在本文中,状态管理指的是处理单页面应用(SPA)中产生的基于特定事件而触发的状态变化。比如,一个按钮的点击事件或者一条来自服务器的异步信息等,都可以触发应用状态的变化。

在 Redux 中,你尤其需要注意下面几点:

  1. 整个 app 的状态存储在单个对象中(该对象被称作数据源)。
  2. 如果要改变状态,你需要通过 dispatch 方法触发 actions,actions
    描述了应该发生的事情。
  3. 在 Redux
    中,你不能更改对象的属性或更改现有数组,必须始终返回新对象或新数组。

如果你对 Redux 并不熟悉并且你想要了解更多,请移步 Redux
的实用教程学习。

 

盖房子

要想理解这些概念是什么以及如何使用它们,我们先来写一个小示例。就盖个房子如何?(点击门有惊喜)

查看由 focuser
(@focuser)
在 CodePen
编写的 Demo : React
小屋。

React Context API 指南

The React Context API 提供了一种通过组件树传递数据的方法,而不必通过
props 属性一层层的传递。在 React
中,数据通常会作为一个属性从父组件传递到子组件。

使用最新的 React Context API 需要三个关键步骤:

  1. 将初始状态传递给 React.createContext。这个方法会返回一个带有
    ProviderConsumer 的对象。
  2. 使用 Provider 组件包裹在组件树的最外层,并接收一个 value
    属性。value 属性可以是任何值。
  3. 使用 Consumer 组件,在组件树中 Provider
    组件内部的任何地方都能获取到状态的子集。

如你所见,所涉及的概念实际上与 Redux 没有什么不同。事实上,甚至 Redux
也在其公共 API 的底层使用了 React Context API。然而,直到最近,Context
API 才达到了足够成熟的水平。

图片 1

组件

如果你还记得我们在前面文章中所讨论过的,组件的概念是 React
的三大支柱之一。使用 React 开发应用基本都是在使用组件。

第一步是将 UI 分解成多个组件。例如,我们可以这样来拆分房子:

图片 2

现在来编码!

House: <div> <Roof /> // 房顶 <Wall /> // 墙
<Window /> // 窗 <Door /> // 门 </div>

1
2
3
4
5
6
7
8
House:
 
  <div>
    <Roof />     // 房顶
    <Wall />     // 墙
    <Window />   // 窗
    <Door />     // 门
  </div>

等一下,怎么看起来这么像 HTML ?没错!React 的部分代码看上去就是非常像
HTML ,其实就是这样设计的,这是为了让 Web 设计师理解和编写 React
代码更容易一些。太贴心了!

因此,在上面的代码中,我们使用 “

作为容器,这基本和 HTML 中是一样的。而像 RoofWall
这样的标签是我们即将定义的自定义标签/组件。温馨提示:
上面的代码并非实际的 React 代码,甚至连 JavaScript
都算不上。暂时,我们只使用这种宽松的语法来介绍概念。一旦你理解这些概念后,我们再来学习
JavaScript 的细节并将上述概念转换成真实代码。

为了让这个例子更容易理解一些,我再简化一下:
从现在开始,我们来写一个超级简单的 Web 应用,连图片都不用,只显示文字。

例如,Roof 其实就是一个里面有文字的 div :

Roof: <div>roof</div>

1
2
3
Roof:
 
  <div>roof</div>

其他组件也是如此,都是只有文字的 div 而已。首先,我们来看下房子的完整的
React 风格的代码:

House: <div> <Roof /> <Wall /> <Window />
<Door /> </div> Roof: <div>roof</div> Wall:
<div>wall</div> Window: <div>window</div> Door:
<div>door</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
House:
 
  <div>
    <Roof />
    <Wall />
    <Window />
    <Door />
  </div>  
 
Roof:
 
  <div>roof</div>
 
Wall:
 
  <div>wall</div>
 
Window:
 
  <div>window</div>
 
Door:
 
  <div>door</div>

这没什么不好理解的,是吧?House 是由 RoofWallWindow
Door 组成的,这些都是纯文本构成的组件。

最后,React 生成的 HTML 如下所示:

<div> <div>roof</div> <div>wall</div>
<div>windows</div> <div>door</div> </div>

1
2
3
4
5
6
<div>
  <div>roof</div>
  <div>wall</div>
  <div>windows</div>
  <div>door</div>
</div>

使用 Redux 创建 React 应用

如上所述,本文的目标是向你展示新的 Context API 如何在小型应用中替代
Redux。因此,你首先要用 Redux 创建一个简单的 React
app,然后,你将学习如何删除这个状态管理库,以便更好地利用 React Context
API。

你将构建的示例应用是一个处理一些流行食物及其来源的列表。这个应用还将包括一个搜索功能,使用户能够根据一些关键词过滤列表。

最终,你将创建一个类似下面所述的应用:

二,代码。

发表评论

电子邮件地址不会被公开。 必填项已用*标注