关于反应状态
在“反应”中，当您更新组件的状态时，新状态将重新呈现到页面。此时不需要操作任何DOM。您也可以认为组件是“反应”中的状态机。当用户操作时，他们会实现不同的状态，然后将它们渲染到你的页面上，这样你的页面和数据总是一致的。
如何定义状态
定义适当的状态是正确创建组件的第一步。状态必须能够表示一个组件UI所呈现的完整的状态集，即组件的任何UI变化都可以从状态的变化中反映出来；同时，State也必须是表示组件UI展现的最小State集合，即状态中的所有状态都用来反映组件UI的变化，不存在冗余状态，也不需要通过其他状态来计算中间状态。
组件中使用的变量是否应该用作组件状态可以通过以下四个标准来判断：
1.这个变量是通过Props从父组件获取的吗？如果是，那就不是状态。
2.这个变量在组件的整个生命周期中保持不变吗？如果是，那就不是状态。
3.这个变量可以通过其他状态或属性来计算吗？如果是，那就不是状态。
4.该变量是否用于组件的呈现方法？如果不是，那就不是状态。在这种情况下，这个变量更适合定义为组件的公共属性。例如，组件中使用的计时器应该直接定义为this.timer，而不是this.state.timer
如果对状态不太了解，可以认为状态就是数据！
状态和道具的区别
道具是组件的外部接口，状态是组件的内部接口。一个组件中可以引用其他组件，组件之间的引用形成一个树形结构(组件树)。如果下层组件需要使用上层组件的数据或方法，上层组件可以通过下层组件的props属性传递，所以props就是组件的外部接口。除了使用上层组件传输的数据，组件本身可能还需要维护管理数据，这是组件对内的接口状态。组件根据外部接口道具和内部接口状态，计算相应接口的UI。
主要区别：
状态是可变的，是用来反映组件UI变化的一组状态集。Props对于使用它的组件是只读的。如果要修改道具，只能通过组件的父组件进行修改。在组件状态上移的场景中，父组件通过子组件的道具将所需的状态传递给子组件。现在，让我们通过ES6类React点击按钮来完成一个显示和隐藏DIV的操作。组件效果如下：
让我们首先初始化页面：
！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style # MyDiv { width :200 px；高度：400 px背景：红色；颜色：黄色；border:1px纯绿色；}/style脚本src=' http :https://张培UE。com/WP-content/uploads/2018/08/react。发展。js '/script script src=' http :https://张培UE。com/WP-content/uploads/2018/08/react-DOM。发展。js '/script script src=' http :https://张培UE。com/WP-content/uploads/js '/script/head body div id=' wrap '/div/body script type=' text/babel ' class my component扩展了做出反应.组件{构造器（道具){ super(道具);//为当前状态添加是否显示属性this.state={ //值为真实的显示，假的为隐藏。默认值为真的. isShow:true } } render(){ //返回组件的初始内容返回差异输入类型='按钮'值='显示与隐藏/div id='myDiv '我在这里呀！/div/div } }反应DOM。渲染(我的组件/，文档。query selector(' # wrap ')/script/html到目前为止，页面已经初始化完毕了。在上面的代码中为状态添加了一个默认值为真实的的属性isShow。是否显示用来控制差异的显示与隐藏！当是否显示为真实的时显示，为错误的时隐藏
接下来要完成的二件事。
第一件事是要为按钮增加一个点击事件，事件与变更状态方法进行绑定。当点击按钮时改变是否显示的状态，也就是要为是否显示进行取反操作。
注意：
1、点击中的c要大写2、点击后跟的方法不要用引号包裹，而是用{}3、在ES6的班级中反应是不会自动绑定这的，所以需要自己通过约束绑定4、改变状态方法中，不能直接修改是否显示的值，而是需要借助设置国家方法来进行设置。
第二件事是要为编号为myDiv的差异增加一个风格属性，该属性要根据是否显示的状态来对差异进行显示与隐藏
注意：
1、风格的值不要用双引号，而是用{},否则会报错
最终版代码：
！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style # MyDiv { width :200 px；高度：400 px背景：红色；颜色：黄色；border:1px纯绿色；}/style脚本src=' http :https://张培UE。com/WP-content/uploads/2018/08/react。发展。js '/script script src=' http :https://张培UE。com/WP-content/uploads/2018/08/react-DOM。发展。js '/script script src=' http :https://张培UE。com/WP-content/uploads/js '/script/head dydiv id=' wrap '/div/body script type=' text/babel ' class my component扩展了做出反应.组件{构造器（道具){ super(道具);//为当前状态添加是否显示属性this.state={ //值为真实的显示，假的为隐藏。默认值为真的。is show : true } } changeState(){//此处不能直接修改是否显示的值。而是需要借助设置国家方法！this.setState({ //取反操作isShow:这个。国家。ISS how })；} render(){ //返回组件的初始内容返回div {/*在ES6的班级中反应是不会自动绑定这的，所以需要自己绑定*/}输入类型='按钮'值='显示与隐藏onClick={ this。变更状态。bind(this)}/div id=' myDiv ' style={ { display : this。国家。伊索？block':'none'}}我在这里呀！/div/div } }反应DOM。渲染(我的组件/，文档。query selector(' # wrap ')/script/html由上面的示例可以发现，当你改变是否显示的状态时，div也会发生相对应的变化！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
