面试题:Hooks 与 React 生命周期的关系

React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将完整的了解 React 生命周期。

关于 组件 ,我们这里指的是 React.Component 以及 React.PureComponent ,但是否包括 Hooks 组件喃?

一、Hooks 组件

函数组件 的本质是函数,没有 state 的概念的,因此不存在生命周期一说,仅仅是一个 render 函数而已。

但是引入 Hooks 之后就变得不同了,它能让组件在不使用 class 的情况下拥有 state,所以就有了生命周期的概念,所谓的生命周期其实就是 useStateuseEffect()useLayoutEffect()

即:Hooks 组件(使用了Hooks的函数组件)有生命周期,而函数组件(未使用Hooks的函数组件)是没有生命周期的

下面,是具体的 class 与 Hooks 的生命周期对应关系

  • constructor:函数组件不需要构造函数,我们可以通过调用 useState 来初始化 state。如果计算的代价比较昂贵,也可以传一个函数给 useState

    const [num, UpdateNum] = useState(0)
  • getDerivedStateFromProps:一般情况下,我们不需要使用它,我们可以在渲染过程中更新 state,以达到实现 getDerivedStateFromProps 的目的。

    function ScrollView({row}) {
      let [isScrollingDown, setIsScrollingDown] = useState(false);
      let [prevRow, setPrevRow] = useState(null);
    
      if (row !== prevRow) {
        // Row 自上次渲染以来发生过改变。更新 isScrollingDown。
        setIsScrollingDown(prevRow !== null && row > prevRow);
        setPrevRow(row);
      }
    
      return `Scrolling down: ${isScrollingDown}`;
    }

    React 会立即退出第一次渲染并用更新后的 state 重新运行组件以避免耗费太多性能。

  • shouldComponentUpdate:可以用 React.memo 包裹一个组件来对它的 props 进行浅比较

    const Button = React.memo((props) => {
      // 具体的组件
    });

    注意:**React.memo 等效于 PureComponent**,它只浅比较 props。这里也可以使用 useMemo 优化每一个节点。

  • render:这是函数组件体本身。

  • componentDidMount, componentDidUpdate: useLayoutEffect 与它们两的调用阶段是一样的。但是,我们推荐你一开始先用 useEffect,只有当它出问题的时候再尝试使用 useLayoutEffectuseEffect 可以表达所有这些的组合。

    // componentDidMount
    useEffect(()=>{
      // 需要在 componentDidMount 执行的内容
    }, [])
    
    useEffect(() => { 
      // 在 componentDidMount,以及 count 更改时 componentDidUpdate 执行的内容
      document.title = `You clicked ${count} times`; 
      return () => {
        // 需要在 count 更改时 componentDidUpdate(先于 document.title = ... 执行,遵守先清理后更新)
        // 以及 componentWillUnmount 执行的内容       
      } // 当函数中 Cleanup 函数会按照在代码中定义的顺序先后执行,与函数本身的特性无关
    }, [count]); // 仅在 count 更改时更新

    请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect,因此会使得额外操作很方便

  • componentWillUnmount:相当于 useEffect 里面返回的 cleanup 函数

    // componentDidMount/componentWillUnmount
    useEffect(()=>{
      // 需要在 componentDidMount 执行的内容
      return function cleanup() {
        // 需要在 componentWillUnmount 执行的内容      
      }
    }, [])
  • componentDidCatch and getDerivedStateFromError:目前还没有这些方法的 Hook 等价写法,但很快会加上。

为方便记忆,大致汇总成表格如下。

class 组件 Hooks 组件
constructor useState
getDerivedStateFromProps useState 里面 update 函数
shouldComponentUpdate useMemo
render 函数本身
componentDidMount useEffect
componentDidUpdate useEffect
componentWillUnmount useEffect 里面返回的函数
componentDidCatch
getDerivedStateFromError

二、单个组件的生命周期

1. 生命周期

V16.3 之前

我们可以将生命周期分为三个阶段:

分开来讲:

  1. 挂载阶段

    • constructor:避免将 props 的值复制给 state
    • componentWillMount
    • render:react 最重要的步骤,创建虚拟 dom,进行 diff 算法,更新 dom 树都在此进行
    • componentDidMount
  2. 组件更新阶段

    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate
  3. 卸载阶段

这种生命周期会存在一个问题,那就是当更新复杂组件的最上层组件时,调用栈会很长,如果在进行复杂的操作时,就可能长时间阻塞主线程,带来不好的用户体验,Fiber 就是为了解决该问题而生。

V16.3 之后

Fiber 本质上是一个虚拟的堆栈帧,新的调度器会按照优先级自由调度这些帧,从而将之前的同步渲染改成了异步渲染,在不影响体验的情况下去分段计算更新。

对于异步渲染,分为两阶段:

  • reconciliation

    • componentWillMount
    • componentWillReceiveProps
    • shouldConmponentUpdate
    • componentWillUpdate
  • commit

    • componentDidMount
    • componentDidUpdate

其中,reconciliation 阶段是可以被打断的,所以 reconcilation 阶段执行的函数就会出现多次调用的情况,显然,这是不合理的。

所以 V16.3 引入了新的 API 来解决这个问题:

  1. static getDerivedStateFromProps: 该函数在挂载阶段和组件更新阶段都会执行,即每次获取新的propsstate 之后都会被执行,**在挂载阶段用来代替componentWillMount**;在组件更新阶段配合 componentDidUpdate,可以覆盖 componentWillReceiveProps 的所有用法。

    同时它是一个静态函数,所以函数体内不能访问 this,会根据 nextPropsprevState 计算出预期的状态改变,返回结果会被送给 setState返回 null 则说明不需要更新 state,并且这个返回是必须的

  2. getSnapshotBeforeUpdate: 该函数会在 render 之后, DOM 更新前被调用,用于读取最新的 DOM 数据。

    返回一个值,作为 componentDidUpdate 的第三个参数;配合 componentDidUpdate, 可以覆盖componentWillUpdate 的所有用法。

注意:V16.3 中只用在组件挂载或组件 props 更新过程才会调用,即如果是因为自身 setState 引发或者forceUpdate 引发,而不是由父组件引发的话,那么static getDerivedStateFromProps也不会被调用,在 V16.4 中更正为都调用。

即更新后的生命周期为:

  1. 挂载阶段

    • constructor
    • static getDerivedStateFromProps
    • render
    • componentDidMount
  2. 更新阶段

    • static getDerivedStateFromProps
    • shouldComponentUpdate
    • render
    • getSnapshotBeforeUpdate
    • componentDidUpdate
  3. 卸载阶段

2. 生命周期,误区

误解一:getDerivedStateFromProps 和 componentWillReceiveProps 只会在 props 改变 时才会调用

实际上,只要父级重新渲染,getDerivedStateFromProps 和 componentWillReceiveProps 都会重新调用,不管 props 有没有变化。所以,在这两个方法内直接将 props 赋值到 state 是不安全的。

// 子组件
class PhoneInput extends Component {
  state = { phone: this.props.phone };

  handleChange = e => {
    this.setState({ phone: e.target.value });
  };

  render() {
    const { phone } = this.state;
    return <input onChange={this.handleChange} value={phone} />;
  }

  componentWillReceiveProps(nextProps) {
    // 不要这样做。
    // 这会覆盖掉之前所有的组件内 state 更新!
    this.setState({ phone: nextProps.phone });
  }
}

// 父组件
class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    // 使用了 setInterval,
    // 每秒钟都会更新一下 state.count
    // 这将导致 App 每秒钟重新渲染一次
    this.interval = setInterval(
      () =>
        this.setState(prevState => ({
          count: prevState.count + 1
        })),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <>
        <p>
          Start editing to see some magic happen :)
        </p>
        <PhoneInput phone='call me!' /> 
        <p>
          This component will re-render every second. Each time it renders, the
          text you type will be reset. This illustrates a derived state
          anti-pattern.
        </p>
      </>
    );
  }
}

实例可点击这里查看

当然,我们可以在 父组件App 中 shouldComponentUpdate 比较 props 的 email 是不是修改再决定要不要重新渲染,但是如果子组件接受多个 props(较为复杂),就很难处理,而且 shouldComponentUpdate 主要是用来性能提升的,不推荐开发者操作 shouldComponetUpdate(可以使用 React.PureComponet)。

我们也可以使用 在 props 变化后修改 state

class PhoneInput extends Component {
  state = {
    phone: this.props.phone
  };

  componentWillReceiveProps(nextProps) {
    // 只要 props.phone 改变,就改变 state
    if (nextProps.phone !== this.props.phone) {
      this.setState({
        phone: nextProps.phone
      });
    }
  }

  // ...
}

但这种也会导致一个问题,当 props 较为复杂时,props 与 state 的关系不好控制,可能导致问题

解决方案一:完全可控的组件

function PhoneInput(props) {
  return <input onChange={props.onChange} value={props.phone} />;
}

完全由 props 控制,不派生 state

解决方案二:有 key 的非可控组件

class PhoneInput extends Component {
  state = { phone: this.props.defaultPhone };

  handleChange = event => {
    this.setState({ phone: event.target.value });
  };

  render() {
    return <input onChange={this.handleChange} value={this.state.phone} />;
  }
}

<PhoneInput
  defaultPhone={this.props.user.phone}
  key={this.props.user.id}
/>

当 key 变化时, React 会创建一个新的而不是更新一个既有的组件

误解二:将 props 的值直接复制给 state

应避免将 props 的值复制给 state

constructor(props) {
 super(props);
 // 千万不要这样做
 // 直接用 props,保证单一数据源
 this.state = { phone: props.phone };
}

三、多个组件的执行顺序

1. 父子组件

  • 挂载阶段

    两个 阶段:

    • 阶段,由父组件开始执行到自身的 render,解析其下有哪些子组件需要渲染,并对其中 同步的子组件 进行创建,按 递归顺序 挨个执行各个子组件至 render,生成到父子组件对应的 Virtual DOM 树,并 commit 到 DOM。
    • 阶段,此时 DOM 节点已经生成完毕,组件挂载完成,开始后续流程。先依次触发同步子组件各自的 componentDidMount,最后触发父组件的。

注意:如果父组件中包含异步子组件,则会在父组件挂载完成后被创建。

所以执行顺序是:

父组件 getDerivedStateFromProps —> 同步子组件 getDerivedStateFromProps —> 同步子组件 componentDidMount —> 父组件 componentDidMount —> 异步子组件 getDerivedStateFromProps —> 异步子组件 componentDidMount

  • 更新阶段

    React 的设计遵循单向数据流模型 ,也就是说,数据均是由父组件流向子组件。

    • 阶段,由父组件开始,执行

      1. static getDerivedStateFromProps
      2. shouldComponentUpdate
更新到自身的 `render`,解析其下有哪些子组件需要渲染,并对 **子组件** 进行创建,按 **递归顺序** 挨个执行各个子组件至 `render`,生成到父子组件对应的 Virtual DOM 树,并与已有的 Virtual DOM 树 比较,计算出 **Virtual DOM 真正变化的部分** ,并只针对该部分进行的原生DOM操作。
  • 阶段,此时 DOM 节点已经生成完毕,组件挂载完成,开始后续流程。先依次触发同步子组件以下函数,最后触发父组件的。

    1. getSnapshotBeforeUpdate()
    2. componentDidUpdate()
React 会按照上面的顺序依次执行这些函数,每个函数都是各个子组件的先执行,然后才是父组件的执行。

所以执行顺序是:

父组件 getDerivedStateFromProps —> 父组件 shouldComponentUpdate —> 子组件 getDerivedStateFromProps —> 子组件 shouldComponentUpdate —> 子组件 getSnapshotBeforeUpdate —>  父组件 getSnapshotBeforeUpdate —> 子组件 componentDidUpdate —> 父组件 componentDidUpdate
  • 卸载阶段

    componentWillUnmount(),顺序为 父组件的先执行,子组件按照在 JSX 中定义的顺序依次执行各自的方法

    注意 :如果卸载旧组件的同时伴随有新组件的创建,新组件会先被创建并执行完 render,然后卸载不需要的旧组件,最后新组件执行挂载完成的回调。

2. 兄弟组件

  • 挂载阶段

    若是同步路由,它们的创建顺序和其在共同父组件中定义的先后顺序是 一致 的。

    若是异步路由,它们的创建顺序和 js 加载完成的顺序一致。

  • 更新阶段、卸载阶段

    兄弟节点之间的通信主要是经过父组件(Redux 和 Context 也是通过改变父组件传递下来的 props 实现的),满足React 的设计遵循单向数据流模型因此任何两个组件之间的通信,本质上都可以归结为父子组件更新的情况

    所以,兄弟组件更新、卸载阶段,请参考 父子组件

走在最后:走心推荐一个在线编辑工具:StackBlitz,可以在线编辑 Angular、React、TypeScript、RxJS、Ionic、Svelte项目

预告:后续将加入高阶组件的生命周期,敬请期待小瓶子的下次更新。

原文链接:segmentfault.com

上一篇:eslint-config-medikoo-es3
下一篇:essentials

相关推荐

  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两个方法都可以用来判断变量类型 区别:前者是判断这个变量是什么类型,后者是判断这个变量是不是某种类型,返...

    5 个月前
  • 高级前端面试题大汇总(只有试题,没有答案)

    面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍...

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    7 个月前
  • 面试题:没有es6老项目,如何用jq解决异步的问题?

    我们都知道es6提供了promise异步写法,但是大部分的公司都是jq写的,那我们如何用Jq来写和promise异步一样的写法呢?这个知道的人不多下面我们就来写写把 注意: 1 JQ 1.5以上 2 ...

    2 年前
  • 面试题:nginx有配置过吗?反向代理知道吗?

    这篇文章主要是针对跨域进行配置,如果大佬们会配置的话,就不用看了~简述反向代理和正向代理反向代理: 我们将请求发送到服务器,然后服务器对我们的请求进行转发,我们只需要和代理服务器进行通信就好,偷个图:...

    5 个月前
  • 面试题(前端-字节跳动)

    只是做个记录 第一题 我叫王大锤,是一家出版社的编辑。我负责校对投稿来的英文稿件,这份工作非常烦人,因为每天都要去修正无数的拼写错误。但是,优秀的人总能在平凡的工作中发现真理。

    1 年前
  • 面试题重点突出

    什么是跨域?跨域请求资源的方法有哪些? 1、什么是跨域? 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况: 网络协议不同,如http协...

    2 年前
  • 面试题里的那些各种手写

    最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现bind,promise。手写ajax,手写一些算法。 翻阅了很多书籍和博客。 这里做一个总结改进,算是对我后面大概为期一个月找工作的准...

    1 年前
  • 面试题联盟之 VUE 篇

    面试题联盟之 VUE 篇 1.SPA 单页面的理解 SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。

    6 个月前
  • 面试题整理- 浏览器篇

    浏览器篇 localstorage sessionstorage cookie 区别 大小限制?(某团) 生命周期: cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效 localSt...

    5 个月前

官方社区

扫码加入 JavaScript 社区