浅谈React之状态(State)

时间：2021-05-18

在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。

如何定义State

定义一个合适的State，是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集，即State中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。

组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：

1.这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。

2.这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。

3.这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。

4.这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。

如果对状态不好理解的朋友，你可以认为状态即是数据！

State 与 Props 区别

props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props 和对内接口state，组件计算出对应界面的UI。

主要区别：

  • State是可变的，是一组用于反映组件UI变化的状态集合；
  • 而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
    在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态

    • 现在我们先来通过ES6类React.Component完成一个通过点击按钮对DIV进行显示与隐藏的操作，效果如下：

    咱们先将页面进行初始化：

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #myDiv{ width:200px; height:400px; background:red; color:yellow; border:1px solid green; } </style> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script></head><body> <div id="wrap"></div></body><script type="text/babel"> class MyComponent extends React.Component{ constructor(props){ super(props); // 为当前状态添加isShow属性 this.state={ // 值为true显示，false为隐藏。默认值为true。 isShow:true } } render(){ //返回组件的初始内容 return <div> <input type="button" value="显示与隐藏"/> <div id="myDiv">我在这里呀！</div> </div> } } ReactDOM.render( <MyComponent/>, document.querySelector("#wrap") )</script></html>

    到目前为止，页面已经初始化完毕了。在上面的代码中为state添加了一个默认值为true的属性isShow。isShow用来控制div的显示与隐藏！当isShow为true时显示，为false时隐藏

    接下来要完成的二件事。

    第一件事是要为按钮增加一个点击事件，事件与changeState方法进行绑定。当点击按钮时改变isShow的状态，也就是要为 isShow进行取反操作。

    注意：

    1、onClick中的c要大写。
    2、onClick后跟的方法不要用引号包裹，而是用{}
    3、在ES6的class中React是不会自动绑定this的，所以需要自己通过bind绑定。
    4、changeState方法中，不能直接修改isShow的值，而是需要借助setState方法来进行设置。

    第二件事是要为id为myDiv的DIV增加一个style属性，该属性要根据isShow的状态来对DIV进行显示与隐藏

    注意：

    1、style的值不要用双引号，而是用{}，否则会报错

    最终版代码：

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #myDiv{ width:200px; height:400px; background:red; color:yellow; border:1px solid green; } </style> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script></head><body><div id="wrap"></div></body><script type="text/babel"> class MyComponent extends React.Component{ constructor(props){ super(props); // 为当前状态添加isShow属性 this.state={ // 值为true显示，false为隐藏。默认值为true。 isShow:true } } changeState(){ //此处不能直接修改isShow的值。而是需要借助setState方法！ this.setState({ //取反操作 isShow:!this.state.isShow }); } render(){ //返回组件的初始内容 return <div> {} <input type="button" value="显示与隐藏" onClick={this.changeState.bind(this)} /> <div id="myDiv" style={{display:this.state.isShow?'block':'none'}}> 我在这里呀！ </div> </div> } } ReactDOM.render( <MyComponent/>, document.querySelector("#wrap") )</script></html>

    由上面的示例可以发现，当你改变isShow的状态时，div也会发生相对应的变化！

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章