react入门(三)——state
程序员文章站
2024-03-12 19:40:20
...
state
react中的state,存储着我们用的数据,react的思想就是尽量少操作dom而去通过改变数据改变dom。
怎么定义state?
定义state有两种方式:
- 定义在constructor上,代码如下
class Component extends React.Component {
constructor (props) {
super(props);
this.state = {
key: 'value'
}
}
}
大家需要注意的就是在class的constructor中必须在首行调用super方法,意味继承父类的函数。若不写constructor,默认情况下会自动补全一个没有参数的constructor。
- 定义成一个静态属性
class Component extends React.Component {
state = {
key: 'value'
}
}
上述的两种方法,都有一个核心的知识点就是将state定义在组件对象this上,而不是将其定义在组件类Like上,与之类似的还有propTypes和defaultProps等,不过后两个使用static修饰。
我们在组件方法里面调用的时候,使用this.state进行取值。为了方便我建议大家用ES6的对象的解构赋值,这样更加简明。
例子
<script type="text/babel">
/**
* 需求: 自定义组件,功能说明如下
* 1. 显示h2标题,初始化文本为:你喜欢我,
* 2. 点击文本更新为:我喜欢你
* 在react中通过改变state可以实现页面的同步改变(diff算法更新虚拟DOM进而更新局部的页面)
*/
//定义组件
class Like extends React.Component {
constructor(props) {
super(props);
this.state = {
isLikeMe: false,
likeMe:'ues'
};
this.handleClick = this.handleClick.bind(this)
}
//重写组件内的方法
render() {
//读取状态
const {isLikeMe} = this.state;
return <h2 onClick={this.handleClick}>{isLikeMe ? `你喜欢我` : `我喜欢你`}</h2>
}
//自定义的方法:内部的this默认不是组件对象,而是undefined
/*
要将this绑定为组件对象有三种途径:
1. onClick事件内使用箭头函数触发事件,效率最高的一种,因为箭头函数没有自己的this,他会找使用对象时所在的对象
2. onClick事件内使用bind强制绑定this(与下面的不同,这个只有在触发的时候才会绑定this,每触发一次就会重新band,会多次触发,效率低)
3. 在constructor内部使用this.xxx = this.xxx.bind(this)(因为在constructor内部的所有代码都会在使用的时候执行,只会触发一次)
*/
handleClick() {
//得到原有的状态并取反
const {isLikeMe} = this.state;
//更新状态,通过setState改变,不能通过this.state改变,因为this.state是只读的
this.setState({isLikeMe: !isLikeMe})
}
}
//渲染组建标签
ReactDOM.render(<Like/>, document.getElementById('test'))
</script>
大家特别需要的注意的是,this.state是个只读属性,也就是说你不能直接通过this.state改变组件类的状态,要通过react提供的一个方法this.setState进行修改。
this.setState 接收一个对象,他的原理和Object.assign类似,都是将传过来的对象和state对象进行合并。
下一章我会带大家详细地理解props
下一篇: Unity中常用 : List排序