react的状态有哪些?react状态的详细介绍(附完整实例)
本篇文章主要的介绍了关于react组件的状态详解,有兴趣的可以点进来一起看看关于react状态的文章详情吧
React组件免不了不停的要与用户互动,一开始有一个初始状态,然后在与用户互动的过程中,用户的每个动作都可能触发状态机的变化,新的状态由不同的 React 元素展现。React 的一大创新,就是将组件看成是一个状态机State Machines,当状态发生改变时, React会在最有效的方式下更新DOM,重新渲染页面,让用户界面和数据保持一致。
一、state工作原理
1、1 存储状态
React在this.state中存储组件的状态。
1、2 设置状态的初始值
有两种设置 this.state初始值的方法:
如果创建组件使用 React.createClass方式,就用getInitialState方法初始化状态,例如
var scoreComponent=React.createClass({ getInitialState:function(){ return{ score:0 }; } ...... }); 如果创建组件是使用 ES6的 extends React.Component方法,在构造器中使用this.state初始化状态。例如: class scoreComponent extends React.Component{ constructor(props){ super(props); this.state ={score:60}; } ...}
1.3 改变组件状态的方法
使用this.setState(data,callback)改变状态的值,这个方法可以把 data合并到 this.state,并且重新渲染了组件。data参数可以是对象也可以是返回包含要更新字段的对象的函数。可选的 callback会在组件重渲染后被调用。this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。(想看更多就到PHP中文网React参考手册栏目中学习)
1.4 state应该包含什么样的数据
UI交互会导致改变的数据。
1.5 state不应包含什么样的数据
1、计算过的数据
2、组件
3、从props复制的数据
state应保含最原始的数据,比如说时间,格式化应该交给展现层去做。
组件应在render方法里控制。
二、state的开发实例
1、计算点击的次数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React状态机</title> <script type="text/javascript" src="js/react.min.js" ></script> <script type="text/javascript" src="js/react-dom.min.js" ></script> <script type="text/javascript" src="js/browser.min.js" ></script> </head> <body> <p id="example"></p> <script type="text/babel"> var BtnButton = React.createClass({ getInitialState: function() { return {count: 0}; }, handleClick: function(event) { this.setState({count:this.state.count+1}); }, render: function() { var text =this.state.count ; return ( <p onClick={this.handleClick}> 获取点击的次数<br /> <span>{text}</span> </p> ); } }); ReactDOM.render( <BtnButton />, document.getElementById('example') ); </script> </body> </html>
以上实例中创建了BtnButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。
以上就是react的状态有哪些?react状态的详细介绍(附完整实例)的详细内容,更多请关注其它相关文章!
推荐阅读
-
react的状态有哪些?react状态的详细介绍(附完整实例)
-
React基础语法有哪些?react的基础语法的介绍(附实例)
-
react该学哪些知识?react的知识点总结(附完整实例)
-
react的状态有哪些?react状态的详细介绍(附完整实例)
-
ajax的作用有哪些?ajax作用的详细介绍(附实例)
-
react的函数有哪些?react函数的详细解析(附实例)
-
react的函数有哪些?react函数的详细解析(附实例)
-
react该学哪些知识?react的知识点总结(附完整实例)
-
React基础语法有哪些?react的基础语法的介绍(附实例)
-
react到底怎么学?react的学习之路详细介绍(内附完整实例)