React重写组件WillReceiveProps in use效果

Question

所以我正在重写一个带有钩子的组件，我遇到了一个有趣的挑战，我需要用use效应钩子模仿组件WillReceiveProps的一些旧行为。

我的旧代码如下所示：

componentWillReceiveProps(nextProps: Props) {

  const prevLateVal = get(`lateMinutes[${bookingId}].value`, this.props);
  const nextLateVal = get(`lateMinutes[${bookingId}].value`, nextProps); //see here, 
//we use next props

  if (typeof nextLateVal !== 'undefined' && prevLateVal !== nextLateVal) {
    client.connect(bookingId, nextLateVal === null ? 0 : nextLateVal);

  }
}

你看，我正在基于nextrops启动一个const，然后在if语句中，我基于该nextVal进行了一些检查，现在，我知道我们可以为useffect指定第二个参数，以便仅在道具更改时运行它，但是这些检查呢，如何实现类似于nextrops？

Answer 1

使用当前逻辑，您希望仅在lateMinute[${bookingId}]. value更改上触发副作用：

const Component = props => {
  useEffect(() => {
    console.log('prop lateMinutes changed');
    // ...
  }, [props[`lateMinutes[${bookingId}].value`]);
  return ...
};

Answer 2

您可以使用useRef来保存前置道具，并使用use效应在道具更改时运行，类似于以下内容：

function MyComponent(props) {

  const prevProps = useRef(props);

  useEffect(() => {
    const prevLateVal = get(`lateMinutes[${bookingId}].value`, prevProps.current);
    const nextLateVal = get(`lateMinutes[${bookingId}].value`, props);

    if (typeof nextLateVal !== 'undefined' && prevLateVal !== nextLateVal) {
      client.connect(bookingId, nextLateVal === null ? 0 : nextLateVal);
    }    

    prevProps.current = props;
  }, [props, bookingId]);

  return (<div>...</div>)
}

Answer 3

您可以创建自定义钩子：

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.prevLateVal = value;
  });
  return ref.prevLateVal;
}

并让它在use效应（）中使用

const Component = (props) => {
    const currentLateValue = get(`lateMinutes[${bookingId}].value`, props)
    const prevLateVal = usePrevious(currentLateValue);
    useEffect(() => {
        if(prevLateVal !== currentLateValue) {
         // process here
        }
    }, [currentLateValue]) // This will be executed only if currentLateValue changes.
}