Question

因此，我正在重新编写带有钩子的组件，但遇到了一个有趣的挑战，我需要使用componentWillReceiveProps钩子来模仿useEffect的某些旧行为。

我的旧代码如下：

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);

  }
}

您知道，我正在基于nextProps发起一个const，然后在if语句中我基于nextVal进行了几次检查，现在，我知道我们可以指定另一个参数useEffect仅在道具更改时运行它，但是那些检查又如何呢？我该如何实现类似于nextProps的东西？

Answer 1

您可以创建自定义挂钩：

pytorch

并将其用于function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.prevLateVal = value; }); return ref.prevLateVal; }

useEffect()

Answer 2

您不需要挂钩即可处理预渲染生命周期。在返回JSX之前，只需将它们放入功能组件中，因为该函数本身等效于基于类的组件的render方法。

Answer 3

您可以使用useRef保存上一个道具，并在道具更改时使用useEffect来运行，就像这样：

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 4

根据当前的逻辑，您只希望对lateMinutes[${bookingId}].value更改产生副作用：

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

在使用中反应重写组件WillReceiveProps

4 个答案: