Question

我需要在我的React组件中使用当前道具和以前的道具值。所以我这样做了

state = {
    current: null,
    previous: null,
};

componentWillReceiveProps(nextProps) {
    if (nextProps.amount !== this.state.current) {
        this.setState({previous: this.state.current, current: nextProps.amount});
    }
}

...

render() {
    const {previous, current} = this.state;

    return (
        ...
        <CountUp className="counter" start={previous} end={current} duration={1}/>
        ...
    )
}

它工作正常，但它是否很好React练习这样做？是否有其他人＆＃34;好＆＃34;怎么做？

Answer 1

从v16.2.0开始，componentWillReceiveProps是根据道具更改更新状态的正确位置，因为您想在渲染中同时使用当前状态和先前状态，您需要维护，两个不同你正在做的状态变量

但是，当您根据以前的状态更新状态时，请使用功能setState方法

检查此答案以获取更多详细信息

When to use functional setState

componentWillReceiveProps(nextProps) {
    if (nextProps.amount !== this.state.current) {
        this.setState(prevState => ({ previous: prevState.current, current: nextProps.amount }));
    }
}

根据最新的RFC to React

来自道具/州的状态

此模式的目的是计算从道具派生的一些值，以便在渲染过程中使用。

通常会使用componentWillReceiveProps，但如果计算速度足够快，可以在render中完成。

从v16.3.0起，您将使用

static getDerivedStateFromProps(nextProps, prevState) {
    if (
      !prevState ||
      prevState.current !== nextProps.amount
    ) {
      return {
        previous: prevState.current,
        current: nextProps.amount
      };
    }
}

Answer 2

您可以在setState对象中使用箭头功能。像这样：

this.setState((prevState) => {
      return { yourState: prevState.yourState }
    })

prevState是默认名称，但您可以根据需要替换名称

Answer 3

我想为所有来自Google的人更新此答案。自v16.8.6起，componentWillReceiveProps被标记为旧版，不建议使用。相反，您应该使用componentDidUpdate并根据新的道具和以前的道具/以前的状态更新状态。

componentDidUpdate(prevProps, prevState) {
   if (this.props.someVal !== prevState.someVal) {
     this.setState({ previous: prevState.someVal, current: this.props.someVal });
   }
}

很明显，您是否要检查先前的状态或先前的道具取决于您的判断力/状况。您可以在有或没有componentDidUpdate的情况下实现prevState。

React Update Lifecycle

componentDidUpdate()

在ReactJS中对道具更改采取行动

3 个答案: