这次给大家带来React中state使用详解，React中state使用的注意事项有哪些，下面就是实战案例，一起来看一下。
state 可以理解成 props，不一样的在于 props 是只读的，而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树，在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新，从而提升性能。
在使用 state 前要先初始化 getInitialState
更改 state 一定要用 setState
getInitialState 该方法在每次 render 时都会被调用一次。
//es5
var StateComponent = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
change: function(event){
this.setState({text: event.target.value});
},
render: function(){
return (
<p>
<p><input type="text" onchange={this.change}/></p>
<p>{this.state.text}</p>
</p>
)
}
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
state = {
text: ''
}
change(event){
this.setState({text: event.target.value});
},
render(){
return (
<p>
<p><input type="text" onchange={this.change}/></p>
<p>{this.state.text}</p>
</p>
)
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是React中state使用详解的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
936
