React—hook调用时间及作用

Plum
366 阅读4分钟

React的hook记录

constructor

调用时间

在该React组件挂载进Dom树之前，调用constructor，在constructor中改变state的值，不需要setstate，只需this.state.XXX = XXX

作用

  1. 初始化this.state
constructor(){
    //初始化state/创建该组件的state
    this.state = {
        name:'张三',
        age:19
    }
}
  1. 函数方法绑定到实例
constructor(){
    //初始化state
    this.state = {
        name:'张三',
        age:19
    };
    //函数方法绑定到实例(ES6之前，通过bind绑定this的指向)
    this.getName = this.getName.bind(this)
}

getDerivedStateFromProps

调用时间

在调用render之前执行，并且初次挂载以及后续的更新也会执行

作用

根据props的改变，控制state的改变，让组件在 props 变化时更新 state，类似Vue的watch，返回一个对象来更新state，如果返回null则不会更新

constructor(){
    //初始化state
    this.state = {
        name:'张三',
        age:19,
        eat:''
    };
    //函数方法绑定到实例(ES6之前，通过bind绑定this的指向)
    this.getName = this.getName.bind(this)
}
state getDerivedStateFromprops(props,state){
    const {eat} = state;
    if(props.name == '张三' || props.name == '王五'){
        return {eat: '吃汉堡'}
    }else if(props.name == '李四'){
        return {eat: '吃荔枝'}
    }
}

getSnapshotBeforeUpdate

调用时间

在组件每一次渲染输出前调用

作用

可以查看更新前的state，props，获取dom树更新前的结构

注意，getSnapshotBeforeUpdate需要和componentDidUpdate一起使用，否则会报错

constructor(){
    //初始化state
    this.state = {
        name:'张三',
        age:19,
        eat:''
    };
    //函数方法绑定到实例(ES6之前，通过bind绑定this的指向)
    this.getName = this.getName.bind(this)
}
state getDerivedStateFromprops(props,state){
    const {eat} = state;
    if(props.name == '张三' || props.name == '王五'){
        return {eat: '吃汉堡'}
    }else if(props.name == '李四'){
        return {eat: '吃荔枝'}
    }
}
getSnapshotBeforeUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState);
    // return的值会返回给componentDidUpdate函数
    return {sutdent:'姬琨'};
}

componentDidUpdate

调用时间

组件首次渲染不调用，在dom更新后立即调用

作用

可以在componentDidUpdate中直接调用setState，但是必须在一个条件语句里，接受三个参数，第三个参数是从getSnapshotBeforeUpdate中return回来的

constructor(){
    //初始化state
    this.state = {
        name:'张三',
        age:19,
        eat:''
    };
    //函数方法绑定到实例(ES6之前，通过bind绑定this的指向)
    this.getName = this.getName.bind(this)
}
state getDerivedStateFromprops(props,state){
    const {eat} = state;
    if(props.name == '张三' || props.name == '王五'){
        return {eat: '吃汉堡'}
    }else if(props.name == '李四'){
        return {eat: '吃荔枝'}
    }
}
getSnapshotBeforeUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState);
    // return的值会返回给componentDidUpdate函数的第三个参数
    return {sutdent:'姬琨'};
}
componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate", this.state.count, prevState, snapshot);
}

shouldComponentUpdate

调用时间

在props，state发生改变后，在getSnapshotBeforeUpdate调用后，在渲染执行前

作用

会return一个布尔值，默认为true，这个布尔值用来判断，改变state会不会导致页面重新渲染，true会渲染，false则不会渲染

constructor(){
    //初始化state
    this.state = {
        name:'张三',
        age:19,
        eat:''
    };
    //函数方法绑定到实例(ES6之前，通过bind绑定this的指向)
    this.getName = this.getName.bind(this)
}
state getDerivedStateFromprops(props,state){
    const {eat} = state;
    if(props.name == '张三' || props.name == '王五'){
        return {eat: '吃汉堡'}
    }else if(props.name == '李四'){
        return {eat: '吃荔枝'}
    }
}
getSnapshotBeforeUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState);
    // return的值会返回给componentDidUpdate函数的第三个参数
    return {sutdent:'姬琨'};
}
componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate", this.state.count, prevState, snapshot);
}
shouldComponentUpdate(nextProps, nextState) {
    const {count} = nextState;
    console.log("shouldComponentUpdate", count, nextState.count);
    //返回true，更新dom，返回false，不更新
    return count !== 3;
  }

componentWillUnMount

调用时间

在组件卸载及卸载之前调用

作用

在卸载组件的同时，删除组件中的定时任务之类的任务，清理缓存

constructor(){
    //初始化state
    this.state = {
        name:'张三',
        age:19,
        eat:''
    };
    //函数方法绑定到实例(ES6之前，通过bind绑定this的指向)
    this.getName = this.getName.bind(this)
}
state getDerivedStateFromprops(props,state){
    const {eat} = state;
    if(props.name == '张三' || props.name == '王五'){
        return {eat: '吃汉堡'}
    }else if(props.name == '李四'){
        return {eat: '吃荔枝'}
    }
}
getSnapshotBeforeUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState);
    // return的值会返回给componentDidUpdate函数的第三个参数
    return {sutdent:'姬琨'};
}
componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate", this.state.count, prevState, snapshot);
}
shouldComponentUpdate(nextProps, nextState) {
  const {count} = nextState;
  console.log("shouldComponentUpdate", count, nextState.count);
  //返回true，更新dom，返回false，不更新
  return count !== 3;
}
componentWillUnMount(){
    console.log('组件卸载前，可以使用该方法清理缓存，取消定时任务，订阅等操作');
}

废除的生命周期

UNSAFE_componentWillUpdate、UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps等

废除原因

没有优先级之分，当重要的任务排在不重要的项目后面，要等不重要的项目先完成，才轮到重要的项目，无法“插队” ，特别是不重要的项目还特别耗时的时候，对用户体验特别不好，

例子

张三点了A页面，然后立即点击B,C,D页面，当A页面加载中，无法中断，必须A页面加载完成后，才轮到B页面加载，然后是C，最后才到D页面，但是对于张三这个用户来说，他只关心最后的D页面，想让D页面赶紧出来，此时，D页面的优先级最高，A,B,C的优先级不高，甚至可以丢弃A,B,C的页面加载任务，这就是废除以上生命周期的理由。

avatar
文章
阅读
粉丝