React——props&state

props&state

关于props

props主要用于组件之间传递参数，React中数据是自上而下（由父组件向子组件）单向流动的。外界/父组件的属性值对于子组件来说是只读的，无法直接修改。使用props主要用于组件之间数据的传递。

注意事项

1. props除了可以传递字符串、数字，还可以传递数组、对象以及回调函数。
2. 如果想要对props进行修改，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会发生改变。

关于state

state主要用于组件的更新控制，通过修改state的值可以实现更新组件或者用户界面的重新渲染，可以根据与用户的交互来改变。使用state主要用于组件内部数据的更新和修改。

注意事项

在React中可以通过this.setState()来修改state的值，但是需要注意以下几点：

1. 不能直接对state进行修改，必须通过this.setState()来对state的值进行修改，才能成功出发render，实现界面的重新渲染。
2. state的更新是异步的，props的更新也是异步的。
   调用this.setState()时，组件state并不会立即改变，而是把需要修改的状态放入事件队列中，由于React的优化机制，导致事件队列中的待更新状态并不一定能立即得到更新，React很有可能将多次state更新合并成一次。因此，不要依靠当前的state来计算下一个state。例如·：

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

以上执行两次相同的操作，React会将两次state更新合并成一次进行修改，后面的操作覆盖了前面的操作，因此最后的结果中数值只增加1。对于这种情况，可以通过使用另一个函数作为参数的setState，这个函数有两个参数，一个是本次组件修改前的状态，一个参数时当前最新的props。如下：

this.setState((preState,props)=>counter:preState.quantity+1)

3. state的更新可以是局部的更新。
   当调用this.setState()进行组件状态改的修改时，只需要传入发生改变的state数值就可以，不需要传入所有的数值。React在依据state进行组件状态改的更新时，会将修改的state值对应的组件部分进行变动并合并到组件中，而组件其它地方保持不变。

4. 没有state的组件叫做无状态组件，尽量多使用props少使用state，即尽量多写一些无状态组件。

参考文献

React中props和state区别
在React中正确修改state
关于props与state的基础知识与区别
组件&props
State&生命周期