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

如果您熟悉React类的生命周期方法，可以考虑 useEffect Hook作为componentDidMount，componentDidUpdate和 componentWillUnmount组合。

来自：Using the Effect Hook

这将在您的DOM中绘制组件时调用，它可能更接近componentDidMount。

Answer 2

是的，useEffect就是这样工作的。默认情况下，它在每个渲染之后运行。如果提供数组作为第二个参数，则它将在第一个渲染上运行，但是如果指定的值未更改，则将跳过后续渲染。没有内置的方法可以跳过第一个渲染，因为这种情况很少见。

如果您需要代码在第一个渲染时不起作用，那么您将需要做一些额外的工作。您可以使用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]);

React：尝试使用react钩子useEffect重写ComponentDidUpdate（prevProps），但是在应用启动时会触发

2 个答案: