在 React.js 中拥有像 componentWillMount 这样的函数的目的是什么? [英] What is the purpose of having functions like componentWillMount in React.js?

问题描述

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

I have been writing components in React.js recently. I have never had to use methods like componentWillMount and componentDidMount.

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

render is indispensable. getInitialState and other helper methods I wrote also come in handy. But not the two aforementioned lifecycle methods.

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

My current guess is that they are used for debugging? I can console.log out inside them:

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

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

还有其他用途吗?

推荐答案

componentDidMount 如果你想使用一些非 React JavaScript 插件是很有用的.例如，React 中缺少一个好的日期选择器.Pickaday 很漂亮，而且开箱即用.所以我的 DateRangeInput 组件现在使用 Pickaday 作为开始和结束日期输入，我将它连接起来，如下所示:

componentDidMount is useful if you want to use some non-React JavaScript plugins. For example, there is a lack of a good date picker in React. Pickaday is beautiful and it just plain works out of the box. So my DateRangeInput component is now using Pickaday for the start and end date input and I hooked it up like so:

  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 钩子可以让您连接到该确切事件.

The DOM needs to be rendered for Pikaday to hook up to it and the componentDidMount hook lets you hook into that exact event.

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

componentWillMount is useful when you want to do something programatically right before the component mounts. An example in one codebase I'm working on is a mixin that has a bunch of code that would otherwise be duplicated in a number of different menu components. componentWillMount is used to set the state of one specific shared attribute. Another way componentWillMount could be used is to set a behaviour of the component branching by 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 });
  }

这篇关于在 React.js 中拥有像 componentWillMount 这样的函数的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！