react中的state和props详解

前言

React中数据的流向是自顶向下（从父组件到子组件）单向流动的，数据主要存储在State和Props中，接下来将会详细介绍这俩个属性的作用；

state

react通过调用setState（data，callback）这个方法，通过改变state的值来控制用户界面的改变，用户界面会随着state的变化而重新渲染，渲染结束后会调用callback方法进行回调，callback回调可有可无；用法如下：

（1）this.state.name = name; this.setState(this.state);此种渲染方法会把所有state都检测一遍，不建议使用；

（2）this.setState({name:name});此种渲染方法直接改变state中name的值；

props

props常用于渲染组件和初始化状态，当组件被实例化后，props是只读的，不可改变的；props可以理解为从外部传入内部的数据，由于react的数据的单向的，所以props基本上就是从父级组件向子组件出传递数据；用法如下：

（1）this.state.name=this.props['name'];接受从父组件传递到子组件的数据name赋值给当前state；

总结

（1）props用于定义外部接口，state记录内部状态（没有state叫无状态组件，有state叫有状态组件）；

（2）props在外部组件中赋值，在组件内部值具有不可变性，state在内部组件中赋值；

（3）props的值不能被组件修改，state存在的目的就是组件通过修改其值来进行渲染；

建议

在项目搭建过程中，尽量多用props少用state，尽量多写无状态组件；

注：

在本文书写过程中，借鉴了前辈的写法，如侵必删；