React自制全家桶React中state与props的分析与比较

Posted 2020-12-27 piaobodewu

一.state

　　1.state的作用

　　　　state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.

　　　　 React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.

　　2.state工作原理

　　　　常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的

　　　　callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.

　　3.那些组件应该有state?

　　　　大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.

　　　　组件应该尽可能的无状态化,这样能隔离state,把它放到最合理的地方(Redux做的就是这个事情?),也能减少冗余并易于解释程序运作过程.

　　　　常用的模式就是创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props

　　　　传给子级.有状态的组件封装了所有的用户交互逻辑,而这些无状态组件只负责声明式地渲染数据.

　　4.哪些应该作为state?

　　　　state应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据.这中数据一般很小且能被JSON序列化.当创建一个状态化的组件

　　　　的时候,应该保持数据的精简,然后存入this.state.在render()中在根据state来计算需要的其他数据.因为如果在state里添加冗余数据或计算

　　　　所得数据,经常需要手动保持数据同步.

　　5.哪些不应该作为state?

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

　　　　　　计算所得数据:

　　　　　　React组件:在render()里使用props和state来创建它.

　　　　　　基于props的重复数据:尽可能保持用props来做作为唯一的数据来源.把props保存到state中的有效的场景是需要知道它以前的值的时候,

　　　　　　因为未来的props可能会变化.

二.props

　　1.props的作用

　　　　　组件中的props是一种父级向子级传递数据的方式.

 　　2.复合组件

　　　　　传递数据

三、区别

1、一句话：props和state之间是紧密相关，父组件的state常常转变成子组件的props。

 

2、下面我们通过一个父子组件从上至下来分析它们。

假如我们有个父组件，可以在父组件的state里定义子组件的数据，比如：

this.setState({ childData: ‘Child Data‘ });  

紧接着，在父组件的render()方法里面，可以将父组件的state，作为子组件的props传递下去，如下

<Child data = {this.state.childData}/>

这样就可以父组件的state传递给子组件的props。

 

3、从子组件的角度来看，props是不可变的。

那么如何改变子组件的props？

我们仅仅需要改变父组件内部的state即可，父组件的state改变之后，引起父组件重新渲染，在渲染的过程中，子组件的data变成父组件this.state.childDtat的值。这样父组件内部state改变，就会引起子组件的改变。

这样就形成里从上而下的数据流，也就是React常说的单向数据流，这个“向”是向下。
我们常常利用这个原理更新子组件，从而衍生出一种模式，父组件：处理复杂的业务逻辑、交互以及数据等。子组件：称它为Stateless组件即无状态组件，只用作展示。在我们开发过程中，尽可能多个使用无状态组件，可以屡清业务之间的逻辑关系,提高渲染效率。

4、子组件如何改变自身的data呢？

这时候需要父组件传递给子组件一个方法，改变父组件自身的state。

示例：
父组件：

<Child data={this.state.childData} handleChange={this.handelChildChange}></Child>

　　

子组件接收父组件方法：

let Chilid = ({data,handleChange}) => <div onClick={handleChange}>{data.name}</div>

　　

四、小结

props：一般用于父组件向子组件通信，在组件之间通信使用。
state：一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。

五、参考

https://www.cnblogs.com/ysbpysbp/p/6115900.html

https://www.cnblogs.com/ZSG-DoBestMe/p/5293457.html