在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了。state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染。这里分别介绍一下在类和函数组件中state的写法: 类组件class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 render(){ return ( //这里面可以写jsx语法 ) } } setState我们一般用来改变状态,在里面可以直接传一个要改变的对象,也可以传一个回调函数,注意,此时如果传入的是对象的话,React只是做了一层浅拷贝,而不是深拷贝,所以此时如果对象中有其他对象进行了改变React无法知道进行渲染。这个方法本质上是传入了一个新的值,将原先的值进行了覆盖,如果这个值跟原先的值一样,那么React就不会进行渲染。
类组件中的constructor可写可不写,写上这个构造函数的作用主要有两个:
constructor(props){ super(props) this.state = {n:12} } render(){ return ( <div> <h1>THE TIME IS {this.state.n}</h1> </div> ) } 注意这里不能写setState,以上的方法React也可以在外面设定,即 state = {n:12} render(){ return ( <div> <h1>THE TIME IS {this.state.n}</h1> </div> ) }
constructor(props){ super(props) this.addNum = function(){fn()}.bind(this) } render(){ return ( <button onClick={this.addNum}>+1</button> ) } 但是这种方法在React中也有新的方法替代了,代码如下: addNum = ()=>{ fn() } render(){ return ( <button onClick={this.addNum}>+1</button> ) } 所以上述的构造函数继承父类的方法根本没有必要写。 函数组件import {useState} from "react" function FunctionComponent(){ const [data,setData] = useState("你要传入的初始值") return ( <div>SHOW DATA {state}</div> ) } 这里的setData的作用跟setState类似,但是它只能用来改变data的状态,需要改变的时候传入一个回调函数。函数的参数是之前的值,返回一个要改变的值。这个方法本质是需要传入一个新的对象,来改变React之前对象的值。 对此还能简便的直接写改变的值,默认会对应到当前对象并且改变它的值 setState的坑
|
请发表评论