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

其他回答

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

2018-09-10 03:53:40

React 16.3 alpha的更新引入了静态getDerivedStateFromProps(nextProps, prevState) (docs)作为componentWillReceiveProps的替换。

getDerivedStateFromProps在组件实例化之后以及在它接收到新道具时调用。它应该返回一个对象来更新状态，或者返回null来表示新的道具不需要任何状态更新。注意，如果父组件导致你的组件重新呈现，即使道具没有改变，这个方法也会被调用。如果您只想处理更改，则可能希望比较新的值和以前的值。

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

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

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

2018-04-15 07:23:04

你可以使用componentWillReceiveProps。

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

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

2019-12-10 08:51:15

在构造函数中从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

如果你想将所有的道具添加到状态中并保留相同的名称，你可以使用如下所示的简短形式。

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

2017-11-27 03:37:06

React组件从props初始化状态

推荐文章

最新文章

标签