Javascript 在React.js中使用componentWillMount等函数的目的是什么？

最近我一直在React.js中编写组件。我从未使用过像

componentWillMount

和

componentDidMount

这样的方法

渲染

是必不可少的

getInitialState

和我编写的其他助手方法也很方便。但不是上述两种生命周期方法

我目前的猜测是它们用于调试？我可以在它们内部进行console.log注销：

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

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

---

还有其他用途吗？

componentDidMount

如果您想使用一些非反应式JavaScript插件，它很有用。例如，React中缺少一个好的日期选择器。它很漂亮，只是简单的开箱即用。因此，我的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

hook允许您连接到确切的事件

componentWillMount

在您希望在组件挂载之前以编程方式执行某些操作时非常有用。我正在研究的一个代码库中的一个例子是一个mixin，它有一堆代码，如果不是这样的话，这些代码将被复制到许多不同的菜单组件中

componentWillMount

用于设置一个特定共享属性的状态。另一种方法

componentWillMount

是通过prop设置组件分支的行为：

componentWillMount（）{
let模式；
如果（this.props.age>70）{
模式='旧'；
}否则，如果（本道具年龄<18岁）{
mode='young'；
}否则{
模式='中间'；
}
this.setState（{mode}）；
}

componentDidMount仅在客户端运行一次。这一点很重要，尤其是在编写同构应用程序（同时在客户端和服务器上运行）时。您可以使用componentDidMount来执行需要访问Windows或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操作放在此处，因为它会无缘无故地尝试在服务器上运行。

这是一个使用组件Willmount的同构web应用程序示例：

然而，我99%确信它在服务器端运行

componentWillMount

中的代码是毫无原因的（我认为使用

componentDidMount

来确保它只在客户端运行会更有意义）因为确保在呈现页面之前满足获取承诺的代码在server.js中，而不是在各个组件中

---

这里有关于每个组件异步抓取的讨论：据我所知，至少就同构而言，

componentWillMount

没有一个好的用例。

在我的项目中，这是一个仪表板工具，我使用了componentDidMount（）

在主页上，以前保存的仪表板显示在侧边栏上。我在component rendering Homepage的componentDidMount（）中进行ajax调用，以便在呈现页面后异步获取仪表板列表

为什么使用生命周期方法？

打算将第三方（exd3.js）库与React组件一起使用

---

类示例扩展了React.component{
构造函数（）{
//初始状态
//将只调用一次
}  
组件willmount（）{
//将只调用一次
//重新渲染时不会触发
//通常会按顺序获取所需的数据
//从其他API正确渲染
}
shouldComponentUpdate（）{
返回错误
//将不会在componentDidMount（）之后重新呈现自身{}
}
render（）{
返回(
)
}
componentDidMount（）{
d3.选择（“图表”）
.全选（“p”）
//d3.js。。。。。。。。
//d3.js。。。。。。。。
//通常，这会触发React以重新渲染自身，
//但这次不会，因为我们已经设定了
//是否应将ComponentUpdate设置为false
}
}

为什么要这样做

---

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

文档包括以下内容：。我不确定您还需要什么？下面是componentWillMount函数的一个示例：@Jon-您所说的“在服务器端运行”是什么意思。react不是客户端技术吗？（我在文档中也看到了这一点，这让我很困惑）因为React是javascript，它的一个很酷的地方就是你可以在node和浏览器中运行代码。这意味着您可以为服务器和客户端提供基本相同的代码库。一个示例是运行一个node express服务器，该服务器接受http请求，运行react和函数renderToString，然后发送结果字符串作为响应@Jon，这个例子实际上并没有使用componentWillMount。我似乎很清楚，它应该用于同构的web应用程序中，但我还没有看到一个使用它的示例。此后，我在React中编写了一个日期选择器，灵感来自Pikaday：

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.

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
  }
}