reactjs - react Hook : how to access props within "mount" useEffect & not throw linting warning

Question

除非我弄错了，否则这是有效的代码:

useEffect(() => {
   if (prop1) {
      doSomething();
   }
}, []);

(prop1 是一个 prop)。但是当 linting 时，我收到以下错误:

React Hook useEffect has a missing dependency: 'prop1'. Either include it or remove the dependency array.

( react 钩子(Hook)/详尽的deps)

我不想将 prop1 作为依赖项传递，因为我会失去“仅在安装时运行”行为。但我需要访问 doSomething() 的 Prop 。

有什么建议吗？

Answer 1

在编写此问题时，Hooks 是新的，所以也许您已经知道这一点，但如果您或其他人想知道:

React 认为，由于您的效果使用了 prop1 的值，因此它“依赖于”prop1，并且无论何时发生变化都应该重新运行。这就是为什么 linter 提示它没有被列为依赖项。

但是，因为您希望效果仅在“安装时”运行，所以您希望它使用初始/第一次渲染中 prop1 的值，并且即使 prop1 更改也不再运行。这与数组列出了效果所依赖的所有变量的概念是不一致的，而这正是 linter 关注的重点。

React Hooks FAQ 中提到的解决方案是使用 useRef 来跟踪这是否是第一次渲染(已编辑):

const firstRenderRef = useRef(true)

useEffect(() => {
  if (firstRenderRef.current) {
    firstRenderRef.current = false
    doSomething(prop1)
  }
}, [prop1])

此解决方案满足 linter，特别是因为它遵循在数组中列出效果的所有依赖项的想法。 ref 允许效果还依赖于变量来确定这是否是第一次渲染，但在值更改时不会重新渲染。