React之状态（State)
在React当中，当你升级组件的state，而后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当使用户进行操作时会实现不同的状态，而后再渲染到你的页面中，让你的页面与数据始终保持一致。
假如对状态不好了解的朋友，你可以认为状态即是数据！
现在我们先来通过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> {/*在ES6的class中React是不会自动绑定this的，所以需要自己绑定*/} <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也会发生相对应的变化！
……
今天先到这！哈，未完，待续！
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » React之状态（State)
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » React之状态（State)
