[JavaScript知识库]react组件state核心属性

一 、state属性是什么

1. state是组件对象最重要的属性，值是对象（可以包含多个key-value组合）
2. 组件被“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

二、在组件中如何定义、更改以及组件方法的注意事项

1. 利用构造器进行初始化数据，开发过程中不会这么使用
   注意事项：
   类中方法开启了局部严格模式，this指向的是undefined，改变其this指针可以利用bind()，执行bind()，返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。
   详情见MDN中创建绑定函数方法：js创建绑定函数

            constructor(props){
                console.log("constructor");
                super(props)
                //初始化状态
                this.state = {isKill:true,curse:"哈利波特骑着扫帚飞"}
                //解决changeCurse中this指向问题
                this.changeCurse = this.changeCurse.bind(this)
            }
            
            render(){   //this指向实例 调用1+n次
                console.log('render');
                const {isKill,curse} = this.state
                return <h1 onClick={this.changeCurse}>{curse},{isKill ? '阿瓦达索命':'除你武器'}</h1>
            }
            changeCurse(){  //组件上自定义的方法一般是用来做回调函数 类中方法开启了局部严格模式，this指向的是undefined 调用1+n次
                const isKill = this.state.isKill   
                //state必须通过setState进行更新，且是合并，不是替换，curse还存在
                this.setState({isKill:!isKill})
            }

2. state和类中方法在真正开发中的简写方式
   注意事项：
   class类不是函数体，不可以定义变量，类中可以直接写赋值语句，代表往实例追加属性。若类中方法赋值为一个function函数，this指针将指向undefined，用箭头函数解决这个问题:箭头函数没有自身的this，this指向当前作用域this

class Magic extends React.Component{
            state = {isKill:true,curse:"哈利波特骑着扫帚飞"}
        
            render(){   //this指向实例 
                console.log('render');
                const {isKill,curse} = this.state
                return <h1 onClick={this.changeCurse}>{curse},{isKill ? '阿瓦达索命':'除你武器'}</h1>
            }

            //组件上自定义的方法一般是用来做回调函数 类中方法开启了局部严格模式，this指向的是undefined 用箭头函数解决这个问题
            changeCurse = () => {  
                console.log(this);
                const isKill = this.state.isKill   
                //state必须通过setState进行更新，且是合并，不是替换，curse还存在
                this.setState({isKill:!isKill})
            }
        }
        ReactDOM.render(<Magic/>,document.getElementById('test'))
 }

总结：

1. state属性值为对象，key:value对
2. 组件通过state来重新渲染组件
3. state数据通过setState进行修改（react写好的一个原型对象上的一个方法）
4. render方法中的this指向的是组件实例对象（构造器中的属性或类中定义的属性在实例本身上）
5. 组建中自定义的方法中this指向undefined（严格模式）的解决办法：（1）通过函数对象的**bind()**强制绑定this（2）箭头函数

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖