在 React.js 中拥有像 componentWillMount 这样的函数的目的是啥？

Posted 2023-02-22

【中文标题】在 React.js 中拥有像 componentWillMount 这样的函数的目的是啥？

【英文标题】：What is the purpose of having functions like componentWillMount in React.js?在 React.js 中拥有像 componentWillMount 这样的函数的目的是什么？

【发布时间】：2015-07-14 14:19:56

【问题描述】：

我最近一直在用 React.js 编写组件。我从来不用像componentWillMount和componentDidMount这样的方法。

render是必不可少的。 getInitialState 和我写的其他辅助方法也派上用场了。但不是前面提到的两种生命周期方法。

我目前的猜测是它们用于调试？我可以在其中 console.log 退出：

componentWillMount: function() 
  console.log('component currently mounting');
,

componentDidMount: function() 
  console.log('component has mounted');
 

还有其他用途吗？

【问题讨论】：

文档涵盖了这一点：facebook.github.io/react/docs/component-specs.html。我不确定您还在寻找什么？

这里是一个componentWillMount函数的例子：***.com/questions/23123138/…

【参考方案1】：

componentDidMount 在你想使用一些非 React javascript 插件时很有用。例如，React 中缺少一个好的日期选择器。 Pickaday 很漂亮，而且开箱即用。所以我的 DateRangeInput 组件现在使用 Pickaday 作为开始和结束日期的输入，我像这样连接它：

  componentDidMount: function() 
    new Pikaday(
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    );

    new Pikaday(
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    );
  ,

需要为 Pikaday 渲染 DOM 以连接到它，componentDidMount 钩子让您可以连接到那个确切的事件。

componentWillMount 在您想在组件挂载之前以编程方式执行某些操作时很有用。我正在处理的一个代码库中的一个示例是一个 mixin，它有一堆代码，否则这些代码会在许多不同的菜单组件中重复。 componentWillMount 用于设置一个特定共享属性的状态。可以使用componentWillMount 的另一种方式是通过 prop(s) 设置组件分支的行为：

  componentWillMount() 
    let mode;
    if (this.props.age > 70) 
      mode = 'old';
     else if (this.props.age < 18) 
      mode = 'young';
     else 
      mode = 'middle';
    
    this.setState( mode );
  

【讨论】：

受 Pikaday 启发，我在 React 中编写了一个日期选择器：github.com/cymen/react-daypicker

【参考方案2】：

componentDidMount 只在客户端运行一次。这很重要，尤其是在您编写同构应用程序（在客户端和服务器上运行）时。您可以使用 componentDidMount 来执行需要您有权访问窗口或 DOM 的任务。

来自 Facebook 的 React 页面

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMount 的用例较少（我并没有真正使用它），但不同之处在于它同时在客户端和服务器端运行。您可能不想在此处放置事件侦听器或 DOM 操作，因为它会无缘无故地尝试在服务器上运行。

【讨论】：

@Jon- “在服务器端运行”是什么意思。反应不是客户端技术吗？ （我确实在文档中也看到了这一点，这让我很困惑）

由于 React 是 javascript，它的一大优点是您可以在节点和浏览器中运行代码。这意味着您可以为服务器和客户端拥有基本相同的代码库。一个例子是运行一个节点快速服务器，它接受一个 http 请求，运行 react 和函数 renderToString，然后将结果字符串作为其响应发送。 github.com/mhart/react-server-example

@Jon 该示例实际上并未使用 componentWillMount。在我看来，它应该用于同构 Web 应用程序中似乎很清楚，但我还没有看到一个使用它的示例。

【参考方案3】：

这是一个使用 componentWillMount 的同构 Web 应用程序示例：https://github.com/coodoo/react-redux-isomorphic-example

但是，我 99% 确定它会在服务器端无缘无故地在 componentWillMount 中运行代码（我认为使用 componentDidMount 来确保它仅在客户端运行会更有意义），因为确保在呈现页面之前实现获取承诺的代码位于 server.js 中，而不是在各个组件中。

这里有关于每个组件异步获取的讨论：https://github.com/facebook/react/issues/1739 据我所知，至少就同构而言，componentWillMount 没有一个好的用例。

【参考方案4】：

在我的仪表板工具项目中，我使用了 componentDidMount()。

在主页上，以前保存的仪表板会显示在侧边栏上。我在组件渲染主页的 componentDidMount() 中进行了 ajax 调用，以便在页面渲染后异步获取仪表板列表。

【参考方案5】：

为什么选择 React 生命周期方法？

打算在 React 组件中使用第三方（Ex D3.js）库

---

class Example extends React.component
  constructor()
    // init state
    // will be called only once
    
  componentWillMount()
    // will be called only once
    // will not be triggered when re-rendering
    // usually will fetch data that is needed in order 
    // to render properly from other API
  
  shouldComponentUpdate()
      return false
      // will not re-render itself after componentDidMount()
  
  render()
    return (
      <div id="chart"></div>
    )
  
  componentDidMount()
    d3.select(".chart")
      .selectAll("p")
      // d3.js ........
      // d3.js ........
      // Usually, this will trigger React to re-render itself,
      // but this time will not because we have set 
      // shouldComponentUpdate to false
  

为什么 React 想要这样做？

由于渲染 DOM 是一项昂贵的操作，React 使用虚拟 DOM 层仅更新与之前状态不同的 DOM / DOM。