REECT:尝试使用React Hook UseFect重写componentDidupdate(PrevProps)，

Question

我正在使用componentDidupdate函数

componentDidUpdate(prevProps){
     if(prevProps.value !== this.props.users){ 
        ipcRenderer.send('userList:store',this.props.users);    
}

到这个

const users = useSelector(state => state.reddit.users)
    useEffect(() => {
       console.log('users changed')
       console.log({users})
    }, [users]);

，但是当我启动应用程序时，我会收到消息"用户更改"。但是用户状态完全更改

Answer 1

是的，这就是使用效果的工作方式。默认情况下，它在每次渲染后运行。如果将数组作为第二个参数提供，则它将在第一个渲染上运行，但是如果指定值未更改，则会跳过后续渲染。没有内置的方式跳过第一个渲染，因为这是一个很少的情况。

如果您需要代码对第一个渲染没有影响，则需要做一些额外的工作。您可以使用useRef创建一个可突变的变量，并将其更改为一旦第一个渲染完成后。例如：

  const isFirstRender = useRef(true);
  const users = useSelector(state => state.reddit.users);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
       console.log('users changed')
       console.log({users})
    }
  }, [users]);

如果您发现自己经常这样做，则可以创建一个自定义钩子，以便更轻松地重复使用。这样的东西：

const useUpdateEffect = (callback, dependencies) => {
  const isFirstRender = useRef(true);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      return callback();
    }
  }, dependencies);
}
// to be used like:
const users = useSelector(state => state.reddit.users);
useUpdateEffect(() => {
  console.log('users changed')
  console.log({users})
}, [users]);

Answer 2

如果您熟悉React类生命周期方法，您可以认为 用作componentDidmount，componentDidupdate和 组合Willunmount合并。

从：使用效果钩

这个，它将被调用，因为该组件在您的DOM中绘制，它可能更接近componentDidMount。