如何为 useEffect 中的每个道具调用单独的代码

Question

我想制作 useEffect 方法，它会在任何道具更改时调用，但不是所有代码，只有一个专用于此道具的代码

我想象这样的事情...... 在这一刻，所有的代码都被调用，当一、二或三被改变时。

const SomethingComponent = (props: any) => {
   const {one, two, three} = props;

   useEffect(() => {
      if(something for one props){
         code for one
      }

      if(something for two props){
         code for two
      }

      if(something for three props){
         code for three
      }
   }, [one, two, three]);
}

Answer 1

您可以使用不同的挂钩，并为每个挂钩提供一个依赖项。这样只有特定的 useEffect 才会在依赖关系发生变化时触发：

const SomethingComponent = (props: any) => {
    const { one, two, three } = props

    useEffect(() => {
        // code for one
    }, [one])

    useEffect(() => {
        // code for two
    }, [two])

    useEffect(() => {
        // code for three
    }, [three])

    return null;
}

如何为 useEffect 中的每个道具调用单独的代码

How to call separate code for every single prop in useEffect

reactjs

react-hooks

use-effect