javascript - 将生命周期方法 react 到钩子(Hook)

Question

我有简单的博客文章。我想将类重写为功能组件和钩子(Hook)。
现在，我使用编辑/添加表单在页面的生命周期方法中获得了这个逻辑:
它工作正常。

componentDidUpdate(prevProps, prevState) {
 if (this.props.match.params.id !== prevProps.match.params.id) {
    if (prevProps.match.params.id) {
        this.props.onUnload();
      }

      this.id = this.props.match.params.id;
        if (this.id) {
            return this.props.onLoad(userService.articles.get(this.id));
        }
        this.props.onLoad(null);
   }
   this.isLoading = false;
}

componentDidMount() {
  if (this.id) {
    this.isLoading = true;
    return this.props.onLoad(userService.articles.get(this.id));
  }
  this.isLoading = false;
  this.props.onLoad(null);
}
   
componentWillUnmount() {
   this.props.onUnload();
}
   
shouldComponentUpdate(newProps, newState) {
   if (this.props.match.params.id !== newProps.match.params.id) {
      this.isLoading = true;
   }
   return true;
}

我把它全部改写成这样的钩子(Hook):

//componentDidMount
  useEffect(() => {
    if (id) {
      setIsloading(true);
      return props.onLoad(userService.articles.get(id));
    }
    setIsloading(false);
    props.onLoad(null);
  }, []);

  useEffect(()=> {
      prevId.current = id;
      }, [id]
  );

  //componentDidUpdate
  useEffect(() => {
    //const id = props.match.params.id;
    if (id !== prevId.current) {
      if (prevId.current) {
        props.onUnload();
      }
      if (id) {
        return props.onLoad(userService.articles.get(id));
      }
      props.onLoad(null);
    }
    setIsloading(false);
  });

  //componentWillUnmount
  useEffect(() => {
     return props.onUnload();
  }, []);

我收到错误 - “重新渲染太多。”在密码箱
完整代码:codesandbox

这很奇怪，但在本地主机上没有错误“重新渲染太多”。

不知道如何处理我的类“shouldComponentUpdate”方法如何将其重写为钩子(Hook)。尝试了“备忘录”，但不知道在这种情况下如何写。

无论如何，我错过了一些东西，因为这一切都行不通——它没有正确更新表单字段。

如果您对 react Hook 有很好的了解，请提供帮助或提供一些建议 - 如何解决？

Answer 1

没有依赖的效果导致"Too many re-renders." :它在每次渲染后运行，然后调用 setIsLoading更新状态(loading)，这将导致组件重新渲染，这将运行 effect再次和setState将再次调用 effect等等...

//componentDidUpdate
  useEffect(() => {
    //const id = props.match.params.id;
    if (id !== prevId.current) {
      if (prevId.current) {
        props.onUnload();
      }
      if (id) {
        return props.onLoad(userService.articles.get(id));
      }
      props.onLoad(null);
    }
    setIsloading(false);
  })

要解决此问题，请删除 setIsLoading从中，或添加 IsLoading作为依赖。

//componentDidUpdate
  useEffect(() => {
    ...
    setIsloading(false);
  },[isLoading]);

您也可以像这样将两个安装效果合并为一个(您的也可以使用，但我认为这在风格上更可取):

//componentDidMount
  useEffect(() => {
    if (id) {
      setIsloading(true);
      return props.onLoad(userService.articles.get(id));
    }
    setIsloading(false);
    props.onLoad(null);

    //componentWillUnmount
    return function () {
      props.onUnload()
    }
  }, []);

第二个要点:关于重写组件的 shouldComponentUpdate ;首先我必须指出您现有的 shouldComponentUpdate听起来不合理，因为您总是返回 true , 而你只是用它来触发 loading状态;并且它没有资格被写入 React.memo (相当于类组件中的 shouldComponentUpdate)；所以你只需要在每次 Prop 更改时执行一些操作来确定 loading状态，为此您可以使用 props 的效果因为它的依赖是这样的:

//manually keeping old props id
const prevPropsId = useRef();

useEffect(() => {
   if (prevPropsId.current !== props.match.params.id) {
      setIsLoading(true);
   }
   prevPropsId.current = props.match.params.id;
 }, [props.match.params.id]);
// this hook only run if `props.match.params.id` change 

根据我的认识，这应该可以完成工作，(尽管很难理解为什么首先要以这种方式编写逻辑)，如果做得不好，您可以稍微调整逻辑以满足您的需求，您会得到了解 Prop 更改效果如何工作。还有很多人需要处理 typeError万一 id , params或 match不存在并且
Optional chaining可以在这里方便的工具-> props.match?.params?.id