React中state属性和生命周期的使用.docx

第

React中state属性和生命周期的使用

目录一、React组件的state属性和生命周期1、state的定义2、更新状态(state)3、组件的生命周期（1）挂载(mount)（2）案例（隐藏或显示实时更新的计时器）（3）更新(update)（4）卸载(unmount)总结

一、React组件的state属性和生命周期

当组件与用户交互时,数据会发生变化，就要用到组件内的state属性；当state值发生改变时react会重新渲染(刷新)组件，从而保证UI界面和数据的一致

1、state的定义

this.state={

属性名：值

}

2、更新状态(state)

不能直接给状态机中的属性赋值，必须通过该方法来更新状态机中的属性值

this.setState({

属性名：新的属性值

})

3、组件的生命周期

（1）挂载(mount)

当组件创建成功,并插入到DOM中。在挂载阶段依次执行的方法如下：

①constructor()--构造方法重写的前提

在React组件挂载之前，会调用它的构造函数。在为React.Component子类实现构造函数时，应该在其他语句之前调用super(props)。

否则，ps在构造函数中可能会出现未定义的bug

构造函数的两种方法：

Ⅰ初始化对象的内部状态：this.state={}Ⅱ为事件绑定某个实例时

在constructor()函数中不要调用setState()方法。如果你的组件需要使用内部state，请直接在构造函数中为this.state赋值初始化state

②staticgetDerivedStateFromProps()--获取组件的状态值

③render()--渲染,是类组件中必须要实现的方法,该方法被调用时会检查ps和this.state的变化，是一个纯函数:

Ⅰ在state不变的情况下,每次调用的返回结果都是一样的Ⅱ在React.Component类的子类中会重新定义(实现)Ⅲ不会直接和浏览器进行交互

④componentDidMount()--挂载。组件插入到DOM树之后立即调用

Ⅰ和浏览器进行交互Ⅱ可以改变状态值：调用setState方法Ⅲ依赖于DOM节点的初始化应该放在这里

（2）案例（隐藏或显示实时更新的计时器）

body

divid=root/div

scripttype=text/babel

letroot=document.getElementById(root);

//1.定义类组件

classClockextendsReact.Component{

constructor(props){

super(props)

//定义状态机并初始化

this.state={

date:newDate(),

show:true,

text:隐藏

//进行事件绑定：当某个事件被触发时,调用谁的事件处理函数

this.handleClickShow=this.handleClickShow.bind(this);//将事件处理函数绑定到this

//事件处理函数后一个this代表当前这个示例

componentDidMount(){//挂载完成后立即执行的函数:即页面打开时就可以看到组件

this.timerID=setInterval(//this指的是当前这个对象，timeId就是个变量

()=this.tick(),//setInterval是每间隔多久执行一次

1000//没间隔1秒钟，执行一次tick这个函数

//根据状态的变化，自动去调用这个函数

componentWillUnmount(){//组件卸载后关闭定时器

clearInterval(this.timerID)

tick(){//自定义方法：改变状态机(改变状态机中的属性值)

this.setState({//不能直接给状态机中的属性赋值,必须通过该方法来更新状态机中的属性值

date:newDate()

handleClickShow(){//当这个函数被调用，要改变show的和text两个属性

this.setState(state=({//参数state表示以前的状态//这里的state指的是状态机，将原来state的状态值取出来，作为参