React组件从props初始化状态

在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()更改为这个。state ={}(谢谢joews)，然而，我仍然没有看到区别。哪个更好?

当前回答

在构造函数中从props初始化状态时必须小心。即使道具更换为新的道具，状态也不会改变，因为再也不会发生坐骑。所以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} /> 
        );
    }
}

或者使用关键道具作为初始化的触发器:

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

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

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

2020-05-18 05:22:47

其他回答

你不需要在组件的构造函数中调用setState——这是习惯用法。国家直接:

class FirstComponent extends React.Component {

  constructor(props) {
    super(props);

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

参见React文档-向类中添加本地状态。

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

2016-10-15 19:47:04

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

2019-03-07 11:15:09

应该注意的是，它是一种反模式，用于复制永远不会改变状态的属性(在这种情况下，只需直接访问.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的非简写版本。

2017-11-17 00:45:37

如果你直接从props初始化状态，它会在React 16.5中显示警告

2018-09-10 03:53:40

在构造函数中从props初始化状态时必须小心。即使道具更换为新的道具，状态也不会改变，因为再也不会发生坐骑。所以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} /> 
        );
    }
}

或者使用关键道具作为初始化的触发器:

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

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

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

2020-05-18 05:22:47

React组件从props初始化状态

推荐文章

最新文章

标签