React 组件从 props 初始化状态

javascript reactjs components

2022-08-30 00:30:03

在 React 中，这两种实现之间有什么真正的区别吗？有些朋友告诉我，这就是模式，但我不明白为什么。这似乎更简单，因为渲染只调用一次。FirstComponentSecondComponent

第一：

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;

更新：我改成了（谢谢joews），但是，我仍然没有看到区别。一个比另一个更好吗？setState()this.state = {}

答案 1

应该注意的是，将永远不会更改为状态的属性复制是一种反模式（在这种情况下，只需直接访问 .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插件，或者您可以通过在下面@joews使用非速记版本。babel-plugin-transform-class-properties

答案 2

您不需要调用组件 - 直接设置是习惯性的：setStateconstructorthis.state

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

请参阅 React 文档 - 将本地状态添加到类。

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