代码之家 › 专栏 › 技术社区 › bier hier

如何在React 16.0.0中迁移组件WillReceiveProps?

reactjs

bier hier · 技术社区 · 7 年前

我有一个reactcomponent,它有一些过时的事件:

componentWillMount() {
    const { applicationStages } = this.props;
    if (applicationStages && applicationStages.length > 0) {
        this.setState({
            appColumnsSorted: this.getSortedAppColumns(someVar),
        });
    }
}

componentWillReceiveProps(nextProps) {
    const {
        presets: { sortCriteria: sortBy, customCriteria },
    } = nextProps;
    const { appColumnsSorted } = this.state;
    const sortedColumnsUpdated = this.getSortedAppColumns(
        appColumnsSorted,
        sortBy,
        true
    );
    this.setState({
        appColumnsSorted: sortedColumnsUpdated,
    });
}

getSortedAppColumns = (appColumns, sortBy, criticalFirst) => {
   //returns object
};

“componentwillmount”基本上是初始化appcolumnsorted。问题是v16的这个事件已经过时了。那么现在我可以用什么活动来做这个呢?在这种情况下,迁移“componentwillreceiveprops”的方法是什么?

2 回复 | 直到 7 年前

Saurav Seth 7 年前

您使用的componentwillmount可以在构造函数中完成,因此

componentWillMount() {
    const { applicationStages } = this.props;
    if (applicationStages && applicationStages.length > 0) {
        this.setState({
            appColumnsSorted: this.getSortedAppColumns(someVar),
        });
    }
}

将更改为

export default class YourClass extends Component {
   constructor(props) {
        // keep a separate method just to avoid writing code in constructor for readability
        this.state = constructInitialState(props);
   }

   constructInitialState(props) {
       const state={};
       //More state handling as required
       const { applicationStages } = props;
       if (applicationStages && applicationStages.length > 0) {
           state.appColumnsSorted = this.getSortedAppColumns(someVar);
       }
       return state;
   }
}

这种方法稍微好一点,因为getderivedstatefromprops将在每次呈现之前被调用,并且将浪费计算。

从代码片段中看,不清楚为什么要将其存储在state中。如果您将它保存到state,那么惟一的方法就是使用componentdiddupdate,正如aaditya thakkar在另一个答案中提到的那样。这将要求您在状态下镜像道具,仅用于比较目的(将道具映射到状态不是最好的方法,更多关于此链接 https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state )

但是,我建议调用sort计算方法并直接在render中返回结果;这样可以避免在componentdiddupdate中进行额外的检查,以便第二次呈现。我不知道这些道具是来自redux还是父react组件,另一个选择是避免在这个类中进行昂贵的计算,只需从父组件提供正确的值,或者在redux存储中计算该值,然后直接发送最终的prop以供使用。

Aaditya Thakkar 7 年前

组件willreceiveprops可以替换为 getDerivedStateFromProps . GetDerivedStateFromProps 在调用呈现方法之前调用,无论是在初始装载还是在后续更新时。它应该返回一个对象来更新状态。这是个静态方法,所以 this 不能用在里面。

因此,您不能再引用 this.getSortedAppColumns 从getderivedstatetops中,您需要componentdiddupdate生命周期。在这里,我崩溃了 ComponentWillReceiveProps 进入之内 GetDerivedStateFromProps 和 componentDidUpdate :

static getDerivedStateFromProps(nextProps, prevState) {
  const {
    presets: { sortCriteria: sortBy },
  } = nextProps;
  if (sortBy === prevState.sortBy) return null;
  return ({ sortBy: nextProps.sortBy });
}

componentDidUpdate(_, prevState) {
  const { appColumnsSorted, sortBy } = this.state;
  if (sortBy !== prevState.sortBy) {
    const sortedColumnsUpdated = this.getSortedAppColumns(
      appColumnsSorted,
      sortBy,
      true
    );
    this.setState({
      appColumnsSorted: sortedColumnsUpdated,
    });
  }
}