从组件反应组件初始化状态

Question

在React中，这两种实现之间有什么真正的区别？一些朋友告诉我，FirstComponent是模式，但是我不明白为什么。SecondComponent看起来更简单，因为渲染仅被调用一次。第一：import React, { PropTypes } from 'react'class FirstComponent extends React.Component {  state = {    description: ''  }  componentDidMount() {    const { description} = this.props;    this.setState({ description });  }  render () {    const {state: { description }} = this;        return (      <input type="text" value={description} />     );  }}export default FirstComponent;第二：import React, { PropTypes } from 'react'class SecondComponent extends React.Component {  state = {    description: ''  }  constructor (props) => {    const { description } = props;    this.state = {description};  }  render () {    const {state: { description }} = this;        return (      <input type="text" value={description} />       );  }}export default SecondComponent;更新：我将setState（）更改为this.state = {}（感谢joews），但是，我仍然看不到区别。一个比另一个好吗？

Answer 1

您不需要调用setState组件constructor- this.state直接设置是惯用法：

class FirstComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      x: props.initialX

    };

  }

  // ...

}

参见React docs-向类添加局部状态。

您描述的第一种方法没有任何优势。它将在首次安装组件之前立即进行第二次更新。

Answer 2

一个示例-可切换的组件（例如，一个弹出框或抽屉）。父级知道组件应该开始打开还是关闭。组件本身可能会在某个时间点知道它是否处于打开状态。在那种情况下，我认为this.state = { isVisible: props.isVisible }是有道理的。取决于应用程序如何分配UI状态。