学习笔记：React组件实例的三大核心属性（State）

1.state

什么是state？

1.state是组件对象上的重要属性，值是一个对象

2.组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

注意：

1.组件中的render方法的this指向组件实例对象

2.组件自定义方法中的this指向为undefined。

为什么？参考类中的方法this指向问题

如何解决？

a.强制绑定this，通过Function.prototype.bind()实现

    class Demo extends React.Component{
        constructor(props) {
            super(props)
            this.state = { disabled: true, message: 'Hello React' }
            // 在构造器中将this强制绑定给实例对象的updateStatus方法
            this.updateStatus = this.updateStatus.bind(this)
        }

        render() {
            const { disabled, status } = this.state
            return <h1 onClick={this.updateStatus}>{message}! I feel {disabled ? 'good' : 'bad'}</h1>
        }
        
        updateStatus() {
            const disabled = this.state.disabled;
            this.setState({ disabled: !disabled });
        }
    }

b.使用箭头函数，箭头函数的this永远指向函数定义时的外一层

3.状态数据state不能直接修改或更新，需要通过调用React.Componet原型上的setState()实现

    class Demo extends React.Component{
        state = { disabled: true, message: 'Hello React' }

        render() {
            const { disabled, status } = this.state
            return <h1 onClick={this.updateStatus}>{message}! I feel {disabled ? 'good' : 'bad'}</h1>
        }
        
        // 使用剪头函数，保证updateStatus方法this指向组件实例对象
        updateStatus = () => {
            const disabled = this.state.disabled;
            // 使用原型上的setState方法可以触发React虚拟DOM的Diff算法，由此让实例对象调用render方法，更新页面
            this.setState({ disabled: !disabled });
        }
    }