欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

相关标签: react state