React技术栈-组件三大属性之state
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.组件的state属性概述
state是组件对象最重要的属性, 值是对象(可以包含多个数据)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
二.state实战案例
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件三大属性之state</title> </head> <body> <div id="box1"></div> </body> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> //1>.定义组件 class Like extends React.Component{ constructor(props){ super(props); //初始化状态 this.state = { isLikeMe:false } //将新增的方法中的"this"强制绑定为组件对象 this.handleClick = this.handleClick.bind(this); } //重写组件类的方法 render(){ //解构方式读取状态 const {isLikeMe} = this.state; return <h1 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'I Love You'}</h1> } //新添加方法:内部的this默认不是组件对象，而是"undefined" handleClick(){ //得到当前状态并取反 const isLikeMe = !this.state.isLikeMe; //更新状态 this.setState({isLikeMe}) } } //2>.渲染组件标签 ReactDOM.render(<Like />,document.getElementById("box1")) </script> </html>
2>.浏览器打开以上代码渲染结果
如上图所示，点击标签，网页内容发生变化，如下图所示。
