浅谈React的props和state

在React里有两种数据模型：props和state。

1、state

1) state的作用：

React 把用户界面当作状态机，根据状态变化渲染用户界面，可以让用户界面和数据保持一致。

state是React组件的一个对象，React只需更新组件的state，然后根据新的state重新渲染用户界面即可，不需要操作DOM。

React 来决定如何最高效地更新 DOM。

2) state的原理：

常用的通知React数据变化的方法是调用 setState(data, callback)，这个方法会更新this.state，并重新渲染组件，重新渲染完成后，调用可选的回调函数callback（大部分情况不需要提供callback，React会把用户界面更新到最新状态）。

3) 哪些组件应该有state？

大部分组件是从props里获取数据并渲染页面，但有时需要对用户输入、服务器请求或时间变化等作出响应，这时才需要state。

将尽可能多的组件无状态化：把state放到最合理的地方。

常用的模式是：创建多个只负责渲染数据的无状态组件，在它们的上层创建一个有状态组件并把state通过props传给子组件，有状态组件封装了所有的用户交互逻辑，而无状态组件只负责声明式地渲染数据。

4) 哪些数据应该作为state？

state应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据，一般很小且能被JSON序列化。当创建一个有状态组件时，应该保持数据的精简，将最少的数据存入this.state，在render()里再根据
state 来计算需要的其它数据。

5) 哪些数据不应该作为state？

state应该仅包括能表示用户界面状态所需要的最少数据。因此不应该包括：

①　计算所得数据（把所有的计算都放到render()里更容易保证用户界面和数据的一致性）；

②　React组件（在render()里使用props和state来创建它）；

③　基于props的重复数据（尽可能用props来作为唯一的数据来源，当且仅当需要知道props以前的值时，才把props保存到state中，因为未来的props可能会变化）。

 

2、props

1) props的作用

props是一种父级向子级传递数据的方式。父、子组件只能通过props来传递数据。

2) props的原理

在子组件中，可以使用this.props.*来获取父组件的state值；在父组件中，更新state，并通过在子组件上使用this.props.*将其传递到子组件上。

 

3、state和props

1) props：组件间的状态传递，从父组件到子组件的数据传递。

2) state：组件的内部状态，定义组件的自己的状态，只能定义在组件内部。