getDerivedStateFromProps

Question

从React 16.3开始，引入了一些新的生命周期方法。其中之一是static getDerivedStateFromProps(props,state)方法。此方法本质上同步属性和状态。

react组件的props和state并不总是一对一的匹配。但是对于简单的组件，经常有几个道具在状态上完全匹配。

实际上，拥有这个getDerivedStateFromProps(...)方法并不是绝对必要的。如果您的组件没有真正的内部状态，那么就没有必要担心它。

无论如何，在props和state完全匹配的情况下，我试图找到编写这段代码的最优雅的方法。

以下是相当冗长的内容：

static getDerivedStateFromProps(props, state) {
  // these 3 properties can change over time.
  const activeBaseNode = props.activeBaseNode;
  const filterOID = props.filterOID;
  const quickFilterRequest = props.quickFilterRequest;

  // compare them to the state
  if ((state.filterOID !== filterOID) || 
    (state.activeBaseNode !== activeBaseNode) || 
    (state.quickFilterRequest !== quickFilterRequest)) {

    // updates the state
    return ({ activeBaseNode, filterOID, quickFilterRequest });
  }

  // no changes --> no updates
  return null;
}

Answer 1

泰德的答案我读得很清楚。

您可以使用some来检测是否需要提交更改，因为这在语义上更接近您正在做的事情：

if (['activeBaseNode', 'filterOID', 'quickFilterRequest']
    .some(prop => state[prop] !== props[prop])

用every反转逻辑和早期退出可能更好，然后只在需要时提取所有属性。在这里，我使用一个函数来完成它，避免定义三个consts：

static getDerivedStateFromProps(props, state) {
  if (['activeBaseNode', 'filterOID', 'quickFilterRequest']
    .every(prop => state[prop] === props[prop]) return null

  return (({activeBaseNode, filterOID, quickFilterRequest}) => 
         ( {activeBaseNode, filterOID, quickFilterRequest}))(props)

这是一种隐秘而又短暂的方法。

我不喜欢在所有的解决方案中重复三次属性的名称。为了避免这种情况，可以使用reduce构建需要更新的属性：

const toUpdate = ['activeBaseNode', 'filterOID', 'quickFilterRequest']
  .find(prop => state[prop] !== props[prop])
  .reduce((m,k) => m[k] = props[k], {})
return Object.keys(toUpdate).length == 0 ? null : toUpdate

一旦你习惯了，我想这是最明显的。它得到了问题的本质，仅此而已:属性的名称，状态!=道具，如果没有任何变化，返回null。

Answer 2

这里有一种可能性：

static getDerivedStateFromProps(props, state) {
  const { activeBaseNode, filterOID, quickFilterRequest } = props;

  let updateState = false;
  ['activeBaseNode', 'filterOID', 'quickFilterRequest'].forEach(item => {
    if(state[item] !== props[item]){
      updateState = true;
    }
  });

  return updateState ? ({ activeBaseNode, filterOID, quickFilterRequest }) : null;
}