React生命周期方法(如componentWillReceiveProps)的典型用例是什么？

Question

componentWillReceiveProps和其他生命周期方法似乎是欺骗性的诱惑,为无经验的React编码器手中的代码带来不必要的复杂性和噪音.它们为什么存在？他们最典型的用例是什么？在不确定的时刻,我怎么知道答案是否存在于生命周期方法中？

Answer 1

我已经使用了几个月的反应,我的大部分工作是从头开始创建一个大型应用程序.所以同样的问题在一开始就出现了.

以下信息基于在开发过程中学习并通过多个文档来实现正确性.

正如问题中所提到的那样,生命周期方法的几个用例是反应

1. componentWillMount()

   • 如果服务器端呈现,则在服务器端调用一次,在客户端调用一次.
   • 我个人用它来做api调用,这些调用对组件没有直接影响,例如获取oAuth令牌

2. componentDidMount()

   • 这个函数主要用于调用API (这就是为什么要在componentDidMount中调用它而不是在componentWillMount中调用它)
   • 组件state初始化基于父母传递的道具.

3. componentWillReceiveProps(nextProps,nextState)

   • 每次收到道具时都会调用此函数,但第一次渲染除外
   • 我遇到的最常见的用途是更新当前组件的状态,我无法在componentWillUpdate中执行此操作.

4. shouldComponentUpdate(nextProps, nextState)

   • 在收到新的道具或状态时,在渲染发生之前调用此方法.如果不需要重新渲染,我们可以返回false.
   • 我将此视为性能优化工具.在频繁重新呈现父组件的情况下,应该使用此方法来避免对当前组件的不必要更新

5. componentWillUpdate(nextProps,nextState)

   • 每次更新组件时都会调用此函数,组件安装时不会调用此函数
   • 在这里执行任何数据处理.例如,当api fetch返回数据时,将原始数据建模为要传递给子节点的props
   • this.setState() 在此函数中不允许,它将在componentWillReceiveProps或componentDidUpdate中完成

6. componentDidUpdate(prevProps,prevState)

   • 在将更改推送到DOM后立即调用
   • 每当所需的数据不在第一次渲染(等待api调用通过)时我就使用它,并且DOM需要根据收到的数据进行更改
   • 例如,根据收到的年龄向用户显示他是否有资格申请参加活动

7. componentWillUnmount()

   • 正如官方文档所提到的,组件中使用的任何事件监听器或定时器都在这里进行清理

在不确定的时刻,我怎么知道答案是否存在于生命周期方法中？

我建议做什么类比

1. 组件本身会触发更改

   • 例如,单击编辑按钮启用字段编辑
   • 同一组件中的函数更改状态,不涉及生命周期功能

2. 在组件外部触发更改

   • 例如,api调用完成后,需要显示接收到的数据
   • 获胜的生命周期方法.

以下是一些更多场景 -

1. state/props的更改是否需要修改DOM？

   • 例如,如果当前电子邮件已存在,则为输入类提供错误类.
   • componentDidUpdate

2. state/props的更改是否需要更新数据？

   • 例如,父容器,用于格式化api调用后收到的数据,并将格式化数据传递给子节点.
   • componentWillUpdate

3. 传递给孩子的道具被改变,孩子需要更新

   • 例,
   • shouldComponentUpdate

4. 添加事件侦听器

   • 例如,根据窗口大小添加一个侦听器来监视DOM.
   • componentDidMount
   • 'componentWillMount',用于销毁列表器

5. 打电话给api

   • 'componentDidMount'

来源 -

1. 文档 - https://facebook.github.io/react/docs/component-specs.html
2. 这篇 scotch.io文章清除了生命周期的概念
3. 事件监听器 - https://facebook.github.io/react/tips/dom-event-listeners.html