虽然平凡，但时时想着超越平凡

一、React面向组件编程（to 笔记4）（二）组件三大核心属性1. state属性

<!--准备好容器--><div id="test"></div><script type="text/babel">   // 1、创建组件   class Weather extends React.Component{       //构造器只调用1次       constructor(props) {        super(props);        console.log("constructor")        //初始化状态 此时的this就是组件的实例对象Weather        console.log(this)       this.state = {         isHot:false,         wind:'微风'       }       //因为类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined       //解决changeWeather中this指向问题       this.changeWeather = this.changeWeather.bind(this)     }     //render调用1+n次 1是初始化的那次 n是状态更新的次数     render() {       console.log('render')       // 获取数据       const {isHot, wind} = this.state       return (       <div onClick={this.changeWeather}>       今天天气很{isHot? '炎热':'凉爽'}， {wind}       </div>       );     }     //changeWeather 点几次调几次     changeWeather(){       // changeWeather放在了Weather的原型对象上，供实例使用       //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用       //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined       console.log('changeWeather',this)       //获取原来的isHot值       const isHot = this.state.isHot       //严重注意：状态(state)不可直接更改       //this.state.isHot = !isHot //这是错误的写法       //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。       this.setState({isHot:!isHot})     }   }   ReactDOM.render(<Weather/>, document.getElementById('test'))</script>

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2) 强烈注意

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

2. 组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数

3. 状态数据，不能直接修改或更新

简写方式：

<!--准备好容器--><script type="text/babel">   // 1、创建组件   class Weather extends React.Component{     //初始化数据     state = {       isHot:false,       wind:'微风'     }     render() {       // 获取数据       const {isHot, wind} = this.state       return (         <div onClick={this.changeWeather}>         	今天天气很{isHot? '炎热':'凉爽'}， {wind}         </div>       );     }     //自定义方法————要用赋值语句的形式+箭头函数     changeWeather = ()=>{       //获取原来的isHot值       const isHot = this.state.isHot       this.setState({isHot:!isHot})     }   }   ReactDOM.render(<Weather/>, document.getElementById('test'))</script>

结语：每天一句毒鸡汤

　如果你觉得自己整天累的跟狗一样，那你真是错了，误会大了，狗都没你那么累。

回复`react笔记`，可以获得全套笔记

react高质量笔记_4(组件类型)

react高质量笔记3