React 组件从 props 初始化状态

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

在构造函数中从 props 初始化 state 时必须小心。 即使将 props 更改为新的，状态也不会改变，因为 mount 再也不会发生. 所以getDerivedStateFromProps 就是为此而存在的。

class FirstComponent extends React.Component {
    state = {
        description: ""
    };
    
    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.description !== nextProps.description) {
          return { description: nextProps.description };
        }
    
        return null;
    }

    render() {
        const {state: {description}} = this;    

        return (
            <input type="text" value={description} /> 
        );
    }
}

或者使用key props 作为触发器来初始化：

class SecondComponent extends React.Component {
  state = {
    // initialize using props
  };
}

<SecondComponent key={something} ... />

在上面的代码中，如果something发生了变化，那么SecondComponent将重新挂载作为一个新的实例，state将被props初始化。

Answer 2

像这样在构造函数中设置状态数据

constructor(props) {
    super(props);
    this.state = {
      productdatail: this.props.productdetailProps
    };
}

如果你通过props在componentDidMount()方法中设置它是行不通的。

Answer 3

您可以使用 componentWillReceiveProps。

constructor(props) {
    super(props);
    this.state = {
      productdatail: ''
    };
}

componentWillReceiveProps(nextProps){
    this.setState({ productdatail: nextProps.productdetailProps })
}

Answer 4

您可以在需要时使用key 值来重置状态，传递道具来说明这不是一个好习惯，因为您在一个地方有不受控制和受控的组件。数据应该在一个地方处理 读这个 https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

Answer 5

React 16.3 的更新引入了 static getDerivedStateFromProps(nextProps, prevState) (docs) 作为 componentWillReceiveProps 的替代品。

getDerivedStateFromProps 在组件被实例化之后以及它接收到新的 props 时被调用。它应该返回一个对象来更新状态，或者返回 null 表示新的 props 不需要任何状态更新。

请注意，如果父组件导致您的组件重新渲染，即使 props 没有更改，也会调用此方法。如果您只想处理更改，则可能需要比较新值和以前的值。

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

它是静态的，因此它不能直接访问this（但它确实可以访问prevState，它可以存储通常附加到this的东西，例如refs）

编辑以反映 @nerfologist 在 cmets 中的更正

Answer 6

需要注意的是，复制永远不会改变状态的属性是一种反模式（在这种情况下直接访问 .props 即可）。如果你有一个最终会改变但以 .props 中的值开头的状态变量，你甚至不需要构造函数调用 - 这些局部变量在调用父构造函数后初始化：

class FirstComponent extends React.Component {
  state = {
    x: this.props.initialX,
    // You can even call functions and class methods:
    y: this.someMethod(this.props.initialY),
  };
}

这是相当于下面@joews 答案的简写。它似乎只适用于更新版本的 es6 转译器，我在一些 webpack 设置上遇到了问题。如果这对你不起作用，你可以尝试添加 babel 插件babel-plugin-transform-class-properties，或者你可以使用下面@joews 的非速记版本。

Answer 7

如果你直接从 props 初始化 state，它会在 React 16.5（2018 年 9 月 5 日）中显示警告

Answer 8

如果您想添加所有道具以声明并保留相同的名称，您可以使用如下所示的简短形式。

constructor(props) {
    super(props);
    this.state = {
       ...props
    }
    //...
}

Answer 9

您无需在组件的constructor 中调用setState - 直接设置this.state 是惯用的：

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      x: props.initialX
    };
  }
  // ...
}

见React docs - Adding Local State to a Class。

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