react16生命周期方法

栏目: IOS · Android · 发布时间: 5年前

内容简介:constructor一般用来getDerivedStateFromProps会在两个时间触发:一是首次render之前,另一次是每次组件更新shouldComponentUpdate之前。这里先讲首次render之前触发,这个时候使用一般是用来

所有生命周期方法:

  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate
  • componentWillUnmount
  • getDerivedStateFromError
  • componentDidCatch

constructor (props)

constructor一般用来 初始化state,声明ref,绑定方法

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    this.ref = React.createRef();
    this.handleClick = this.handleClick.bind(this)
  }
}

static getDerivedStateFromProps (props, state)

getDerivedStateFromProps会在两个时间触发:一是首次render之前,另一次是每次组件更新shouldComponentUpdate之前。

这里先讲首次render之前触发,这个时候使用一般是用来 根据props的值初始化state ,当然可以直接在constructor里处理state的初始化。

static getDerivedStateFromProps(props, state) {
  return { count: props.count };
}

render

render主要作用就是返回一段jsx,表示想要渲染的内容。

componentDidMount

一般在componentDidMount里处理组件装载好之后才可以进行的操作,比如 绑定事件、发送数据请求、或者进行一些dom相关的操作

static getDerivedStateFromProps (props, state)

当props改变或state改变时,组件重新渲染就会再次进入该声明周期方法中。这个时候可以 根据props的值来更新state ,返回新的state值,返回null则表示不更新。

在旧的生命周期方法componentWillReceiveProps中,我们经常会比较this.props和nextProps来决定是否更新state或做别的事情,比如:

componentWillReceiveProps (nextProps) {
 if (this.props.count !== nextProps.count) {
    this.setState({ count: nextProps.count })
    this.fetchData()
 }
}

getDerivedStateFromProps是静态方法,无法取到当前类组件的实例,所以没有办法进行this.prop和nextProps的比较,如果要比较的话只能进行props和当前state的比较,如下:

if (props.count !== state.count) {
  return {
    ...
    count: props.count,
  };
  // 不更新state
  return null
}

除了不能比较this.prop和nextProps外,也不能在这个方法里调用当前实例的其他方法,比如this.fetchData,想调用的话得在componentDidUpdate里调用,这里在componentDidUpdate里会讲到。

shouldComponentUpdate (nextProps, nextState)

当props或state的改变而使得组件需要重新渲染时,就会进入这个生命周期方法,它在render前触发。这个方法 返回一个布尔值,用来表示组件是否需要重新渲染 ,默认值是true,表示总是重新渲染。我们可以在这里加一些判断逻辑,只有当一些我们真正关心的数据改变时我们才重新渲染,比如:

shouldComponentUpdate(nextProps, nextState) {
  // 只有count改变页面才更新
  return nextState.count !== this.state.count;
}

getSnapshotBeforeUpdate (prevProps, prevState)

这个方法会在组件更新时,render方法之后,但是dom还没有发生更新前执行。这我们可以 根据更新前的props和state返回一个值,这个值将会作为下一个生命周期方法componentDidUpdate的第三个参数传入。可以用来与componentDidUpdate协作完成一些事情

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.blocks.length < this.state.blocks.length) {
      const grid = this.grid.current;
      const isAtBottomOfGrid =
        window.innerHeight + window.pageYOffset === grid.scrollHeight;
      return { isAtBottomOfGrid };
    }
    return null;
  }

componentDidUpdate (prevProps, prevState, snapshot)

该生命周期方法会在更新完成后执行,一般在这里做的事情是: 根据props的改变做一些处理,根据snapshot的值做一些处理,或者是手动dom处理。

1、根据props、state的改变做一些处理

在旧的生命周期方法componentWillReceiveProps中,经常会比较this.props和nextProps,来进行其他操作比如请求数据,或调用this.someFunc等,在新的生命周期方法中这部分操作可以在componentDidUpdate中完成。

componentDidUpdate (prevProps, prevState, snapshot) {
 if (this.props.count !== prevProps.count) {
    this.fetchData()
 }
}

2、根据第三个参数snapshot做一些处理

比如以下例子就是根据上面getSnapshotBeforeUpdate里返回的isAtBottomOfGrid来判断当前页面的滚动条是不是在底部,如果是的话,更新后还需要手动将滚动条滚到底部。

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot.isAtBottomOfGrid) {
    window.scrollTo({
      top: this.grid.current.scrollHeight,
      behavior: 'smooth',
    });
  }
}

componentWillUnmount

这个方法与componentDidMount是相对应的,在 componentDidMount中绑定的事件、创建的定时器都可以在这个方法里清除

static getDerivedStateFromError(error)

这个方法用来 获取子组件抛出的错误,根据错误信息返回一个对象,为新的state的值 。只能获取到子组件生命周期方法中抛出的错误,像this.handleClick里抛出的错误,不会触发该方法。这个方法只能用来返回错误,如果想打印错误或做其他处理,需要在componentDidCatch里写。

static getDerivedStateFromError(error) {
  return { hasError: true };
}

componentDidCatch(error, info)

当子组件中抛出错误后,componentDidCatch就会触发,可以在这个方法里 捕获错误、打印错误信息

参考: React 16 Lifecycle Methods: How and When to Use Them


以上所述就是小编给大家介绍的《react16生命周期方法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Distributed Algorithms: An Intuitive Approach

Distributed Algorithms: An Intuitive Approach

Wan Fokkink / MIT Press / 2018-2-2 / USD 48.00

The new edition of a guide to distributed algorithms that emphasizes examples and exercises rather than the intricacies of mathematical models. This book offers students and researchers a guide to ......一起来看看 《Distributed Algorithms: An Intuitive Approach》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具