React入门（一）—— State属性

^{本文地址：https://www.cnblogs.com/chenzhihong294/p/14330548.html}

---

 

关于React组件实例中State属性的使用以及注意事项：

1、State的初始化方式（以下代码为有构造器的时候）

2、State的使用方法，以isHot为例

3、State的修改方式，必须用setState进行更新

 

<script type="text/babel">
        // 创建组件
        class Weather extends React.Component{
            // 构造器只调用一次
精！！！！
React中构造器的两大作用就是：1、初始化 state   2、进行方法绑定
            constructor(props){
                super(props);
                // 通过给this.state赋值对象来初始化内部state
                this.state = {
                    isHot:false,
                    wind:"微风"
                }
精！！！！
解决changeWeather中this的指向问题，先通过右侧this.changeWeather.bind(this)找到Weather类原型中的changeWeather方法，并通过bind将this.changeWeather函数中的this改为当前Weather实例对象并生成新函数，随后赋给实例对象自身的一个属性，也叫changeWeather。注意，该句左右两端的changeWeather是不一样的，左侧的changeWeather是实例自身的属性（方法）changeWeather,右侧的是Weather类原型中的changeWeather函数。
即：为事件处理函数绑定实例。
                this.changeWeather = this.changeWeather.bind(this);
            }
            
            // render调用1+n次，1是初始化的那一次，n是状态更新的次数。每次状态更新都要调用render，重新拿到最新的返回值。
            render(){
                //读取状态 const {isHot} = this.state 等于 const isHot = this.state.isHot
                const {isHot,wind} = this.state;
React事件处理中，重写了onclick等事件，注意在React中，命名方法类似‘驼峰法’，其中C要大写。原生JS此处是字符串onclick="demo()",在React中是函数型式onClick={demo()}
注意不能写成onClick={demo()}，这样是将demo()函数调用的返回值作为回调，恒为undefined。所以要去掉小括号，不作为函数调用，作为赋值语句，将函数demo作为回调，而不是demo的函数调用的返回值作为回调。
                return <h1 id='title' onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h1>
            }

            // changeWeather点几次调用几次。
            changeWeather(){
                // changeWeather放在Weather的实例对象上，供实例使用。
由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用，由于类中的方法默认开启了局部的严格模式，所以changeWeather中的this是undefined 
                // console.log(this.state.isHot);

                // 获取原来的isHot值
                const isHot = this.state.isHot;
注意！！
状态(state)不可直接更改，下面这行为直接更改，React不认可这种更改方式虽然代码层面似乎状态中的值是更改了，但是React不会对该更改做出响应。
                // this.state.isHot = !isHot; /* 这是错误的写法 */
                
注意！！
状态必须通过setState进行更新，且更新是一种合并，不是替换。setState是this实例对象的原型Weather类的原型React.Component的一个属性方法。
                this.setState({isHot:!isHot});
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>