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>