资讯专栏INFORMATION COLUMN

React16.3.0以后的生命周期(二) - 更新、卸载、异常

since1986 / 311人阅读

摘要:示例此方法有两个参数返回值为或者默认返回主要使用它来控制组件要不要渲然,常用作性能优化。只能捕获组件树的异常,无法捕获这个方法内的异常。

组件更新

static getDerivedStateFromProps()

当本地state需要根据props来改变的时候可调用此方法。

这个方法是在render()前会被执行,只要执行render()都会被在之前被触发。

该方法有两个参数propsstate; 返回值为state对象, 不需要返回整体state,把需要改变的state返回即可。

示例:

static getDerivedStateFromProps(props, state) {
  if(props.color !== state.color) {
    return {color: props.color};
  }
}

shouldComponentUpdate()

此方法有两个参数:shouldComponentUpdate(nextProps, nextState).

返回值为true或者false, 默认返回true.

主要使用它来控制组件要不要渲然,常用作性能优化。

触发此方法的条件是:组件接收任意props或者state时都会被调用。需要注意的是在第一次render()时和在调用forceUpdate()时都不会被触发。

示例:

shouldComponentUpdate(nextProps, nextState) {
  if(nextProps.color !== this.props.color || nextState.size !== this.state.size) {
    return true;
  } 
  return false;
}

render()

这个方法是React组件中必须要提供的方法。当state或者props任一数据有更新时都会执行。

需要注意当继承PureComponent时,不会对对象进行深度比较,也就是,不会根据对象内的对象变化时执行render().

render()是一个纯函数,也就是不能在这个方法中有类似setState()这样的行为。

返回的数据类型可以有:

nullStringNumberArrayBoolean

React elements

Fragment

Portal

注意:不能返回undefined.

shouldComponentUpdate()返回false时,无论stateprops有没有变化,这个方法都不执行。

示例:

    render() {
      return (
        
{this.state.color}
); }

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)render将组件渲然到dom中就会执行。

如果不实现该方法则返回null.

返回的数据由自己定义,并且返回的数据作为componentDidUpdate方法中的参数。

示例:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  render() {
    return (
      
{/* ...contents... */}
); } }

componentDidUpdate()

该方法在组件更新后立即执行,并且在组件挂载阶段不执行。

componentDidUpdate(prevProps, prevState, snapshot)第三个参数就是上节中提到的。

示例:

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

组件卸载

componentWillUnmount()

在组件被卸载或者销毁的时候执行,方法中不能再有setState的动作。

一般用作清除组件中起的定义器、webSocket等。

示例:

componentWillUnmount() {
  if(this.timer) {
    window.clearInterval(this.timer);
    this.timer = null;
  }
}

在线示例

组件异常处理

componentDidCatch()

componentDidCatch(error, info) 异常的处理。

只能捕获组件树的异常,无法捕获这个方法内的异常。

示例:

定义一下异常处理组件:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    window.console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return 

Something went wrong.

; } return this.props.children; } }

使用这个异常组件:


  

推荐阅读《React 手稿》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99056.html

相关文章

  • React16.3.0以后生命周期(一) - 组件加载

    摘要:组件加载当组件被实例化并且插入时所执行的方法,也会按照下的顺序依次执行。示例方法是在组件加载完后立即执行,也就是当该组件相关的节点插入到树中时。该方法在组件生命中只执行一次。注意一些监听需要在组件卸载时清理掉,否则会引起异常。 组件加载 当组件被实例化并且插入Dom时所执行的方法,也会按照下的顺序依次执行。 constructor() 构造方法。 这个方法有两个目的: 初始化一...

    betacat 评论0 收藏0
  • 不了解一下React16.3之后生命周期

    摘要:本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体,把需要改变的返回即可。必须有一个返回值,返回的数据类型可以有。此生命周期主要用于优化性能。最后,说明一点这三个生命周期在未来版本中会被废弃。 React16.3.0开始,生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的...

    468122151 评论0 收藏0
  • React16时代,该用什么姿势写 React ?

    摘要:的返回值将作为的参数,如果返回,则不更新,不能返回或以外的值,否则会警告。在更新之前调用,此时已更新返回值作为的第个参数一般用于获取之前的数据语法是从的返回值,默认是的使用场景一般是获取组建更新之前的滚动条位置。 React16 后的各功能点是多个版本陆陆续续迭代增加的,本篇文章的讲解是建立在 16.6.0 版本上本篇文章主旨在介绍 React16 之后版本中新增或修改的地方,所以对于...

    Reducto 评论0 收藏0
  • React 导读(

    摘要:对于最开始关注的是的初始化以及在哪里请求。在进行初始化,推荐在中进行请求。是在组件即将被卸载前一刻的钩子,一般用于取消中订阅的事件等作用,清理一些不要的变量等,避免内存泄漏。第二条的原因额,说好的更新才调,初始化不调用是符合逻辑的。 前言 在上篇文章React 导读(一)中学习到了写第一个 Web 组件,这篇文章将继续之前的目录,开始新的知识点补充: [x] React 如何编写 H...

    Doyle 评论0 收藏0
  • 捋一捋React生命周期

    摘要:卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用,只跟实例的创建有关。 前言:React 的版本从 v15 到 v16.3 ,再到v16.4,现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入,而最令人困惑的却是它的生命周期,新旧生命周期函数混杂在一起,难免会让许多新来者有很多困惑。所以这一篇我们来...

    MobService 评论0 收藏0

发表评论

0条评论

since1986

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<