react-native 状态管理

react-native最有趣的地方我觉得就是组件之间的状态管理了。 

要正确构建组件,我们就要熟悉react的理念。

从上至下的数据流:

 把一个组件树想象为一条河流,每个组件的状态就像一个河流的分支,分支之间互不影响,它们可以在任意地点汇合。 这也被称为单向数据流。任何状态始终由某些特定组件所有,该状态也只能影响到其下方的组件。 

7C871B96-9E5B-4377-ACF0-677115BCE306.png

比如这三个Increment组件,每次点击增加1,但是它们之间互相是不影响的。

把UI划分出组件层级:

如何知道哪一部分应该成为一个组件?和在编写代码时构建一个函数的思考方式是一样的。 例如单一功能原则,在理想状况下,一个组件应该只做一件事情。

如果这个组件功能不断丰富,那就应该被分成更小的组件。 

UI和数据模型往往遵循着相同的信息架构,如果数据模型构建正确,组件结构划分往往是很容易的。 

定义最小(但是完整)的state集:

要正确构建应用,首先需要考虑所需的state集,state维护尽量精简,不要重复定义作用相同的state。 

要找出哪个数据不是state,看它符不符合以下三种情况: 

 1.是通过props从父级传来的。 

 2.它随着时间推移不变。 

 3.能够根据组件中任何其他的state或props把它计算出来 

确定state的位置:

react中的数据流是单向的,并在组件层次结构中向下传递。一开始可能不是很清楚哪个组件应该拥有哪个state。 

按照下面的步骤来辨别: 

1.确定每一个需要这个state来渲染的组件。

2.如果许多组件共用同一state,那就要找到一个在层级上高于所有需要这个state的组件的公共所有者组件。 

3.这个公共所有者组件应该维护这个state。 

反向数据流:

在进行某些操作时会影响到组件树中父组件状态,比如每当用户更改单选框时,需要更新状态来反应用户选择。这时候我们就需要添加反向数据流了。 首先在父组件将更改状态的callback传递给子组件,子组件每当应该更新状态时,它就会触发。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容