八、react生命周期函数

• 函数组件无生命周期一说
• 生命周期函数指在某一时刻组件会自动调用并执行的函数
• React每个组件都包含生命周期方法，我们可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法

完整的生命周期图

常见生命周期图

一、新旧生命周期函数

1、旧生命周期函数

• 初始化阶段：由ReactDOM.render()触发---初次渲染
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
• 更新阶段：由组件内部this.setState()或父组件重新render触发
  
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
• 卸载：由ReactDOM.unmountComponentAtNode(组件)触发
  • componentWillUnmount()

2、新生命周期函数

• 初始化阶段：由ReactDOM.render()触发---初次渲染
  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()
• 更新阶段：由组件内部this.setState()或父组件重新render触发
  
  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshortBeforeUpdate()
  • componentDidUpdate()
• 卸载：由ReactDOM.unmountComponentAtNode(组件)触发
  
  • componentWillUnmount()

3、重要的钩子函数

• render()：初始化渲染或更新时调用
• componentDidMount()：开启监听、发送ajax请求
• componentWillUnmount()：做一些收尾工作

4、即将废弃的钩子函数

• componentWillMount()
  • 17.x版本改为UNSAFE_componentWillMount
    
• componentWillReceiveProps()
  • 17.x版本改为UNSAFE_componentWillReceiveProps
    
• componentWillUpdate()
  • 17.x版本更新为UNSAFE_componentWillUpdate
    

二、初始化阶段

由ReactDOM.render()触发———初次渲染

1、constructor

• React组件的构造函数在挂载之前被调用
• 在实现React.Component构造函数时，需要先在添加其他内容前
• 调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到

2、static getDerivedStateFromProps(props,state)

不常用

• 从props中获取数据，绑定到当前的这个组件中的state（新增）
• 参数
  • props：父组件传递过来的整个props对象
    
  • state：当前组件中的状态对象state
• 返回值（必须有返回值）
  • 返回null表示不需要更新state
    
  • 返回合法的对象则表示更新state

// 类似于vue里的data
data(): {
    return {
        a: 0
    }
},
props: ["num"],
mounted() {
    this.a = this.num;
}

上述vue代码转化成当前的react代码即有如下的效果：

state = {
  num: 0,
  uname: "zhangsan",
};

render() {
  return <div>当前的num是{this.state.num}</div>;
}

// 从props中获取数据，绑定到当前的这个组件中的state
static getDerivedStateFromProps(props, state) {
  if (props.amount === state.num) {
    // 不需要更新当前state
    return null;
  } else {
    return { num: props.amount };
  }
}

如果本身当前组件中的状态数据有很多，但是生命周期函数最后返回的只是其中的部分数据，这个不会覆盖掉其他的数据。

例如上述代码，对象虽然只返回了num值，结果不会使uname丢失。

• getDerivedStateFromProps 是react16.3之后新增，在组件实例化后，和接受新的props后被调用

• 如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法

• 调用setState()不会触发getDerivedStateFromProps()

• 之前是使用constructor+componentWillRecieveProps完成相同的功能

• 在这个生命周期函数中不能使用this关键词（原因不是因为没有绑定this，而是静态优先于实例产生，在实例产生之前是没有对象的，间接来说就是此时还没有this）

3、render()

• 主要负责组件的渲染，会被重复调用若干次
• 不建议在此处写异步代码（大概率会死循环）

4、componentDidMount

• 类似于vue的mounted
• 在组件被装配后立即调用，到这里才能获取到真实的dom
• 通常在这里进行ajax请求、订阅消息、开启定时器
• 如果要初始化第三方的dom库，也在这里进行初始化

三、更新阶段

由组件内部this.setState()或父组件重新render触发

1、static getDerivedStateFromProps(props,state)

用法同初始化阶段

2、shouldComponentUpdate(newtProps,nextState)

• 判断是否需要被重新渲染
• 参数
  • 参数一：最新的props内容
    
  • 参数二：当前state的内容

• 调用shouldComponentUpdate使React知道，组件的输出是否受state和props的影响

• 默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为

• 在渲染新的props或state前，shouldComponentUpdate会被调用

• 这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用

• 返回false不会阻止子组件在state更改时重新渲染

shouldComponentUpdate(nextProps, nextState) {
    // 判断是否需要被渲染，如果需要则返回true，否则返回false
    // nextProps.b最新的b的值，this.props.b是原先的b的值
    // 比较的时候需要使用全等运算符
    if (nextProps.b === this.props.b) {
        return false;
    } else {
        return true;
    }
}

// 上述代码虽然可以解决组件不用被无缘无故的渲染浪费资源，但是如果涉及到的条件值较多的话则编写起来是一件非常痛苦的事情
// 因此React给我们提供简化的写法，使用简化写法后，这个生命周期函数就忘了它吧
// 简化方法：只需要将类组件的继承关系改成继承`PureComponent`即可，这样一来，框架会自动判断值是否有变化进一步决定组件是否需要被渲染
import React, { PureComponent } from "react";

class Cmp6 extends PureComponent {
  render() {
    console.log("Cmp6被渲染了");
    return <div>父亲传递过来的值b为：{this.props.b}</div>;
  }
}
export default Cmp6;

如果shouldComponentUpdate()返回false，componentWillUpdate,render和componentDidUpdate不会被调用

3、render

4、getSnapshotBeforeUpdate()

在更新之前获取快照（比如滚动条位置、列表高度），不常用

• 在react render()后的输出被渲染到DOM之前被调用
• 用于获取渲染之前的DOM信息，需要配合componentDidUpdate()一起使用

5、componentDidUpdate(prevProps, prevState, snapshot)

• 类似于vue的updated生命周期，在更新发生后立即调用
• 有三个参数，上一次的props，上一次的state，和快照

import React from 'react'
import './newslist.css'

class NewsList extends React.Component{
  state = {newsArr: 0}
    componentDidMount(){
    setInterval(() => {
      const {newsArr} = this.state
      const news = '新闻' + {newsArr.length + 1}
      this.setState(() => {
        return {newsArr: [news, ...newsArr]}
      })
    })
  }
    getSnapshotBeforUpdate(){
    return this.refs.list.scrollHeight
  }
    componentDidUpdate(prevProps, prevState, height){
    // this.refs.list.scrollHeight和height的差值是一定的（比如11条的高度和10条的高度）
    this.refs.list.scrollTop += this.refs.list.scrollHeight - height
  }
    render(){
    return(
      <div className="list" ref="list">
          {
          this.state.newsArr.map((n, index) => {
            return <div className="news" key={index}>{n}</div>
          })
        }
      </div>
    )
  }
}
export defalult NewsList;

/*newslist.css*/
.list{
  width: 200px;
  height: 150px;
  background: skyblue;
  overflow: auto;
}
.news{
  height: 30px;
}

四、卸载组件

由ReactDOM.unmountComponentAtNode(组件)触发，对应ReactDOM.render

1、componentWillUnmount()

• 类似于vue的beforeDestory，在组件被卸载并销毁之前立即被调用
• 在此方法中执行任何必要的清理，例如使定时器无效、取消网络请求或清理在componentDidMount中创建的任何监听

五、其他

1、componentDidCatch(error, info)

捕获生命周期里的错误（主要是render里）

子组件有错误，在父组件里处理，使错误不影响外层功能

父组件

import React,{Component} from 'react'
import Child from './Child'

export default class Parent extends Component{
  state = {
    hasError: '' // 用于标识子组件是否产生错误
  }
  static getDerivedStateFromError(error){
    console.log('错误信息',error)
    return {hasError: error}
  }
  componentDidCatch(){
    console.log('此处统计错误次数，发送给后台')
  }
  render(){
    return(
      <div>
        <h2>我是Parent组件</h2>
        {this.state.hasError ? <h2>当前网络不稳定</h2> : <Child/>}
      </div>
    )
  }
}

子组件

import React,{Component} from 'react'

export default class Parent extends Component{
  state = {
    users: 'abc'
  }
  render(){
    return(
      <div>
        <h2>我是Child组件</h2>
        {
          // users是数组才能map
          this.state.users.map((userObj) => {
            return <h4 key={userObj.id}>:{userObj.name}</h4>
          })
        }
      </div>
    )
  }
}

2、static getDerivedStateFromError()

在后代组件抛出错误后被调用

六、DOM的Diffing算法

1、验证Diffing算法

import React from 'react'
class Demo extends React.Component{
  state = {
    persons: [
      {id: 1, name: '张三', age: 18}
    ]
  }
  add = () => {
    const {persons} = this.state
    const newPerson = {id: persons.length + 1, name: '王五', age: 20}
    this.setState(state => {
      return {
        // newPerson加在数组前面
        persons: [newPerson, ...persons]
      }
    })
  }
  render(){
    return(
      <div>
        <ul>
            {
            this.state.persons.map((item, index) => {
              return(
                  <li key={index}>
                    {item.name}---{item.age}
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

更新前后对比

//初始数据
{id: 1, name: '张三', age: 18}
{id: 2, name: '李四', age: 19}
//初始虚拟DOM
<li key=0>张三---18</li>
<li key=1>李四---19</li>

//更新后数据
{id: 3, name: '王五', age: 20}
{id: 1, name: '张三', age: 18}
{id: 2, name: '李四', age: 19}
//更新后的虚拟DOM，key更改了，不能用以前的虚拟DOM，效率降低
<li key=0>王五---20</li>
<li key=1>张三---18</li>
<li key=2>李四---19</li>

2、key的作用

• 虚拟DOM中key的作用：当状态中的数据发生变化时，react会根据新数据生成新的虚拟DOM，随后React进行新虚拟DOM与旧虚拟DOM的diff比较，比较规则如下
  • 旧虚拟DOM中找到了与新虚拟DOM相同的key
    
    • 若虚拟DOM中内容没变，直接使用之前的真实DOM
    • 若虚拟DOM中内容变了，则生成新的真实DOM，替换页面中之前的真实DOM
  • 旧虚拟DOM中未找到与新虚拟DOM相同的key
    
    • 根据数据创建新的真实DOM，随后渲染到页面
      
• 用index作为key可能会引发的问题
  • 若对数据进行：逆序添加、逆序删除等破坏顺序操作
    
    • 会产生没必要的真实DOM更新===>界面效果没问题，但效率底
  • 如果结构中还包含输入类的DOM
    
    • 会产生错误DOM更新===>界面有问题
      
  • 如果不存在对数据逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表展示，使用index作为key是没问题的
• 开发中如何使用key
  
  • 最好使用每条数据唯一标识作为key，比如id、手机号、省份证号
    
  • 如果确定只是简单的展示数据，用index也可以