React：尝试使用react hook useEffect重写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

是的，这就是 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]);