Reactjs useEffect挂钩-依赖项-重新呈现问题

第一种情况：
_假设我有一个道具处于redux状态或父状态。
_我不想在该道具发生变化时触发useEffect，
_但我确实需要在useEffect中使用道具。
_React警告我将道具添加到依赖项数组，但如果我这样做，useEffect将再次触发

第二种情况：
_我正在使用useEffect中的函数，
_但其他地方也需要此功能。
_不希望复制功能代码。

---

_React希望我将函数添加到依赖项数组中，但我不希望每次函数引用更改时都触发useEffect。

要忽略React给您的警告，可以通过向

useEffect

代码添加

//eslint disable next line React hooks/deps

来禁用它们。您可以在React文档中的一节中了解更多有关这方面的信息。这些规则包括在本手册中

要防止每次函数引用更改时都触发useEffect，可以使用。

useCallback

hook将存储对函数的引用，而不是函数本身。仅当函数的一个依赖项被更新时，函数的引用才会被更新。如果您不希望函数引用永远更新，那么可以使用与

useffect

hook的依赖关系数组相同的方法将依赖关系数组保留为空

:

import React，{useState，useffect，useCallback}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[value，setValue]=useState（0）；
const wrappedFunction=useCallback(
（来电者）=>{
常量newValue=值+1；
设置值（新值）；
log（`Firing function from${caller}:${newValue}`）；
},
[价值]
);
useffect（（）=>{
log（`logginfromUseEffect:${value}`）；
wrappedFunction（“使用效果”）；
//eslint禁用下一行react HOOK/deps
}, []);
返回(
你好，代码沙盒
{value}
wrappedFunction（“按钮单击”）}>
消防功能
开始编辑，看看神奇的发生！
);
}

有关第一个问题，请参阅此链接

在这里，我们只是使用一个状态变量来保存初始值，无论它是来自父级还是来自存储区，因此即使该值在父级或存储区内发生更改，子级仍将位于旧值上，除非它使用useEffect对其进行更新

母公司

export default function App() {
  const [state, setState] = useState("monika");
  return (
    <div className="App">
      <h1>My Name is {state}</h1>
      <button
        onClick={() => {
          setState("Rohan");
        }}
      >
        change name
      </button>
      <First username={state} />
    </div>
  );
}

导出默认函数App（）{
常量[状态，设置状态]=使用状态（“莫尼卡”）；
返回(
我的名字是{state}
{
setState（“Rohan”）；
}}
>
改名
);
}

孩子

首先导出默认函数（{username}）{
const[name，setName]=useState（用户名）；
返回(
我的名字是{Name}
);
}

在使用useEffect时，您应该考虑闭包。如果在useEffect中使用了任何props或局部变量，则建议将其包含在依赖项数组中，否则由于闭包，您将使用过时的数据

这里我展示一个用例。在ComponentUsingRef内部，我们使用ref作为容器。你可以在

---

这种方法的优点是，您不必在 您的父组件。您将始终使用的最新值 函数，在给定的情况下，它甚至不会引发useEffect的触发，因为它不会依赖于您的依赖关系

---

const组件=（{fn}）=>{
useffect（（）=>{
fn（）
}，[fn]）
.....
.....
返回
}
常量ComponentUsingRef=（{fn}）{
常量fnRef=useRef（fn）
fnRef.current=fn//以便我们的ref容器包含最新的值
useffect（（）=>{
fn.当前（）
},[ ])
.....
.....
返回
}

---

如果你想使用抽象，那么你应该在

自定义钩子中提取你的逻辑如果唯一的问题是警告，那么不要担心它，你可以简单地为你的效果禁用规则，如果它是效果中使用的唯一道具，从依赖数组中省略道具。对于具有多个依赖项的效果，可以使用
useRef
存储道具的最新值，而不触发效果，如下所示：

const Comp = ({someProp, ...props}) => {
  const myProp = useRef(someProp);
  myProp.current = someProp;

  // this effect won't fire when someProp is changed
  React.useEffect(() => {
    doSomething(myProp.current, props.a, props.b);
  }, [props.a, props.b, myProp]);
}

对于您的第二个案例，我可能会将该函数放在一个单独的文件中，并将其导入将要使用它的组件中，但是，您可以在第二个案例中使用相同的模式。
您能否说明在第一个场景中如何使用
useffect
中的道具？谢谢您的回答，禁用规则不是一个好的选择。
export default function First({ username }) {
  const [name, setName] = useState(username);
  return (
    <div>
      <h1>My Name is {name}</h1>
    </div>
  );
}

const Component=({fn})=>{
    useEffect(()=>{
       fn()
    },[fn])
    .....
    .....
    return <SomeComponent {...newProps}/>
}

const ComponentUsingRef=({fn}){
    const fnRef = useRef(fn)
    fnRef.current = fn // so that our ref container contains the latest value
    useEffect(()=>{
       fn.current()
    },[ ])
    .....
    .....
    return <SomeComponent {...newProps}/>
}

const Comp = ({someProp, ...props}) => {
  const myProp = useRef(someProp);
  myProp.current = someProp;

  // this effect won't fire when someProp is changed
  React.useEffect(() => {
    doSomething(myProp.current, props.a, props.b);
  }, [props.a, props.b, myProp]);
}