React学习(八)this.state
来源:互联网 发布:effective java百度云 编辑:程序博客网 时间:2024/06/18 01:49
组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
<html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="D:/ReactDom/build/react.min.js"></script> <script src="D:/ReactDom/build/react-dom.min.js"></script> <script src="D:/ReactDom/build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel">var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); }});ReactDOM.render( <LikeButton />, document.getElementById('example')); </script> </body></html>
上面代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
阅读全文
1 0
- React学习(八)this.state
- 3、React中的状态(this.state)
- React this.state
- react教程之this.state
- react this.state + 组件生命周期
- React学习笔记---Props&State
- ReactJS学习系列课程3(React State状态)
- React Native 学习笔记四(关于state的使用)
- React Native 学习笔记(四)-- State和Props
- React学习之State与生命周期基友情(四)
- React学习(五)this.props.children
- React学习笔记(2)-React.createClass、this.props.children
- react:undefined is not a function(this.State({flag:true,}))
- React入门04-组件的交互this.state属性
- react demo12 (获取组件属性状态this.state)
- react native 学习笔记之state
- React native学习第二章:State
- React native props state 初步学习-day1
- 推荐算法——基于用户的协同过滤算法
- TOJ 4079 find the princessII(简单博弈)
- 戴尔服务器设置的来电自动开机,如何取消这个设置??
- RabbitMQ (三)工作队列
- 二位数组与二级指针的错误赋值
- React学习(八)this.state
- Java中继承的一点小知识
- css三大特性
- Ubuntu 下安装sparklyr 并连接远程spark集群
- ActiveMQ
- jxl操作excel
- 简单的线性分类器
- 从零构建一个灰度发布环境(一)安装系统
- 使用Spring MVC统一异常处理实战