Question

我使用react创建了一个类似于twitter的框。我正在查看发现几个组件生命周期的react文档但不确定应该使用哪一个来提高我的代码性能：componentDidMount或componentWillMount？

当我在文本框中输入内容时，我在控制台中看到一个更新文本框值的更新。任何人都可以帮我理解使用哪种方法以及何时使用？

class TwitterBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enteredTextBoxvalue : '' };
      this.handleChange = this.handleChange.bind(this);

  }

  handleChange(event) {
    this.setState({enteredTextBoxvalue: event.target.value});   

    if((event.target.value).length > 3) {

      this.setState({className : 'wholeContainer'});
      //console.log("long characters");
    }
  }

  render() {
      return (<div>Hello {this.props.name}
              <textarea className={this.state.className}
                value={this.state.enteredTextBoxvalue}
                onChange = {this.handleChange}>
                there should be only 140 characters
            </textarea>
      </div>);
  }
}

ReactDOM.render(
  <TwitterBox name="World" />,
  document.getElementById('container')
);

Answer 1

在组件呈现之前调用componentWillMount。在渲染组件后立即调用componentDidMount。

如果您需要准备数据，请使用componentWillMount。 componentDidMount通常用于在组件呈现后立即发送api调用或抓取数据，强烈建议使用它。

Answer 2

<强> componentWillMount：

在组件的第一次渲染之前调用此函数，因此乍一看它似乎是放置数据获取逻辑的理想位置

<强> componentDidMount：

使用componentDidMount可以清楚地表明，在初始渲染之后才会加载数据。这会提醒您正确设置初始状态，因此不会导致导致错误的未定义状态。

Answer 3

您的问题的一部分是关于绩效，您可以考虑考虑shouldComponentUpdate到avoid reconciliation。

在安装发生之前立即调用componentWillMount。它在render（）之前调用。

在安装组件后立即调用componentDidMount。

Answer 4

<强> componentWillMount

组件即将呈现，与constructor
DOM中没有组件但您无法执行涉及DOM的任何操作操作
同步调用setState()将不会触发因为组件尚未渲染而重新渲染
我不建议在这里调用异步/api请求（从技术上讲，在安装组件之前没有保证它们会完成，在这种情况下，您的组件将不会被重新呈现以应用这些数据）

<强> componentDidMount

组件已经渲染，它已经位于DOM
您可以在此处执行涉及DOM元素的操作（例如，初始化第三方插件）
调用异步/api请求等

componentDidMount或componentWillMount我需要使用哪一个

4 个答案: