javascript - React Hook - 在 componentDidMount 处触发多个 "useEffect"

Question

我正在使用多个 useEffect Hook 来执行 componentDidMount 和 componentDidUpdate 功能，但是，当组件加载时，我所有的 useEffect最初触发...

const testComp = () => {
   const stateUserId = useSelector(state => { return state.userId; });
   const [userId, setUserId] = useState(stateUserId);
   const [active, setActive] = useState(false);
   const [accountId, setAccountId] = useState();
   
   useEffect(() => {
      console.log('component did mount...');
   }, [userId]);
   
   useEffect(() => {
      console.log('should trigger when userId changes...');
   }, [userId]);

   useEffect(() => {
      console.log('should trigger when active changes...');
   }, [active]);
   
   useEffect(() => {
      console.log('should trigger when accountId changes...');
   }, [accounted]);
  
   return (<div>...</div);
}

当我的组件挂载时，我会在那里看到所有那些控制台日志

component did mount...
should trigger when userId changes...
should trigger when active changes...
should trigger when accountId changes...

我怎么可能只让我的第一个 useEffect 触发，而其他三个只在依赖项发生变化时触发？

Answer 1

useEffect 不是 componentDidMount 和 componentDidUpdate 的直接替代品。 Effect 将在每次渲染后运行，这就是您看到所有这些控制台日志的原因。根据React文档，useEffect的第二个参数表示

you can choose to fire them (effects) only when certain values have changed.

初次渲染后，如果再次渲染该组件，只会触发相应值变化的effects watch。

实现您想要的效果的一种方法是创建额外的变量来承载初始值，并在需要时在 useEffect 中进行比较。

const testComp = () => {
  const initUserId =  useSelector(state => { return state.userId; });
  const stateUserId = initUserId;
   const [userId, setUserId] = useState(stateUserId);
   
   useEffect(() => {
      console.log('component did mount...');
   }, [userId]);
   
   useEffect(() => {
      if (userId !== initUserId) {
        console.log('should trigger when userId changes...');
      }
      
   }, [userId]);
  
   return <div>...</div>
}