使用PrevProps时如何将ComponentDidupDate转换为使用效果

Question

我有一个遗产 preaeAct （不是错字）组件，我试图重构使用钩子而不是基于类的组件。我遇到了一个障碍，因为在componentDidupdate中它仅引用prevprops而不是任何特定的道具。遗产生命周期方法看起来像这样：

  componentDidUpdate(prevProps) {
    addListenersFromProps(this.layer, this.props, {
      filter: ({ prop }) => !prevProps[prop],
    });

    removeListenersFromProps(this.layer, prevProps, {
      filter: ({ prop }) => !this.props[prop],
    });
  }

我的useffect看起来像这样：

  useEffect(() => {
    addListenersFromProps(layer, props, {
      filter: ({ prop }) => ?
    });
    removeListenersFromProps(layer, ?, {
      filter: ({ prop }) => ?
    });

  }, [?]);

我不确定要添加到useffeft hook的依赖项数组中，我不确定如何要调用removelisTenersFromProps，因为它采用PrevProps。

//编辑：

根据第一个评论，我可以做一些简单的事情：

  
  // track props
  const [_props, setProps] = useState(props);
  

  useEffect(() => {
    addListenersFromProps(layer, props, {
      filter: ({ prop }) =>  !_props[prop],
    });
    removeListenersFromProps(layer, _props, {
      filter: ({ prop }) => !props[prop],
    });

    setProps(props);

  });

Answer 1

您的编辑非常接近解决方案。您应该将道具用作使用效率中的回调，并应将状态设置在使用Props值的内部使用效果。请记住使用效果不是async，因此您需要在内部创建async函数才能使用我的逻辑

const [_props, setProps] = useState(props);
  

  useEffect(() => {
    //Here do your logic but set always to states, if you need create new states
    //If you take states values as argument in your function before setting then it will take naturally previous values
    setProps(props);
  }, [props]);

Answer 2

从评论和答案中获取建议，我决定进行以下操作：

  const prevProps = useRef<MyComponentProps>(props);

  useEffect(() => {
    addListenersFromProps(layer, props, {
      filter: ({ prop }) =>  !prevProps.current[prop],
    });
    removeListenersFromProps(layer, prevProps.current, {
      filter: ({ prop }) => !props[prop],
    });

    // update props
    prevProps.current = props;

  }, [props);