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

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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; x: props.initialX&nbsp; &nbsp; };&nbsp; }&nbsp; // ...}参见React docs-向类添加局部状态。您描述的第一种方法没有任何优势。它将在首次安装组件之前立即进行第二次更新。

Answer 2

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