注释从这开始~
总览
当useEffect钩子应用了一个咱们没有蕴含在其依赖数组中的变量或函数时，会产生"React Hook useEffect has a missing dependency"正告。为了解决该谬误，禁用某一行的eslint规定，或者将变量挪动到useEffect钩子内。
这里有个示例用来展现正告是如何产生的。
// App.jsimport React, {useEffect, useState} from 'react';export default function App() { const [address, setAddress] = useState({country: '', city: ''}); // ️ objects/arrays are different on re-renders const obj = {country: 'Chile', city: 'Santiago'}; useEffect(() => { setAddress(obj); console.log('useEffect called'); // ⛔️ React Hook useEffect has a missing dependency: 'obj'. // Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}上述代码片段的问题在于，咱们在useEffect钩子外部应用了obj变量，但咱们没有在其依赖数组中蕴含该变量。
最显著的解决办法是将obj变量增加到useEffect钩子的依赖数组中。然而，在本例中，它将导致一个谬误，因为在JavaScript中，对象和数组是通过援用进行比拟的。
obj变量是一个对象，在每次从新渲染时都有雷同的键值对，但它每次都指向内存中的不同地位，所以它将无奈通过相等查看并导致有限的从新渲染循环。
在JavaScript中，数组也是通过援用进行比拟。
禁用规定
绕过"React Hook useEffect has a missing dependency"正告的一个办法是禁用某一行的eslint规定。
import React, {useEffect, useState} from 'react';export default function App() { const [address, setAddress] = useState({country: '', city: ''}); const obj = {country: 'Chile', city: 'Santiago'}; useEffect(() => { setAddress(obj); console.log('useEffect called'); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}依赖数组上方的正文禁用了单行的react-hooks/exhausting-deps规定。
当useEffect钩子的第二个参数传递的是空数组时，只有当组件挂载或者卸载时才会调用。依赖移入
另一种解决办法是，将变量或者函数申明挪动到useEffect钩子外部。
import React, {useEffect, useState} from 'react';export default function App() { const [address, setAddress] = useState({country: '', city: ''}); useEffect(() => { // ️ move object / array / function declaration // inside of the useEffect hook const obj = {country: 'Chile', city: 'Santiago'}; setAddress(obj); console.log('useEffect called'); }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}咱们把对象的变量申明移到了useEffect钩子外面。这就打消了正告，因为钩子不再依赖对象，对象申明在钩子外部。
依赖移出
另一个可能的解决方案是将函数或变量的申明移出你的组件，这可能很少应用，但最好晓得。
import React, {useEffect, useState} from 'react';// ️ move function/variable declaration outside of componentconst obj = {country: 'Chile', city: 'Santiago'};export default function App() { const [address, setAddress] = useState({country: '', city: ''}); useEffect(() => { setAddress(obj); console.log('useEffect called'); }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}这是很有用的，因为每次从新渲染App组件时，变量不会每次都从新创立。该变量在所有渲染中都会指向内存的雷同地位，因而useEffect不须要在其依赖数组中跟踪它。
useMemo
另一个解决方案是应用useMemo钩子来失去一个记忆值。
import React, {useMemo, useEffect, useState} from 'react';export default function App() { const [address, setAddress] = useState({country: '', city: ''}); // ️ get memoized value const obj = useMemo(() => { return {country: 'Chile', city: 'Santiago'}; }, []); useEffect(() => { setAddress(obj); console.log('useEffect called'); // ️ safely include in dependencies array }, [obj]); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}咱们应用useMemo钩子失去一个记忆值，该值在渲染期间不会扭转。
useMemo钩子接管一个函数，该函数返回一个要被记忆的值和一个依赖数组作为参数。该钩子只有在其中一个依赖项发生变化时才会从新计算记忆值。useCallback
请留神，如果你正在应用一个函数，你将应用useCallback钩子来取得一个在渲染期间不会扭转的记忆回调。
import React, {useMemo, useEffect, useState, useCallback} from 'react';export default function App() { const [address, setAddress] = useState({country: '', city: ''}); // ️ get memoized callback const sum = useCallback((a, b) => { return a + b; }, []); // ️ get memoized value const obj = useMemo(() => { return {country: 'Chile', city: 'Santiago'}; }, []); useEffect(() => { setAddress(obj); console.log('useEffect called'); console.log(sum(100, 100)); // ️ safely include in dependencies array }, [obj, sum]); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}useCallback钩子接管一个内联回调函数和一个依赖数组，并返回一个记忆化版本的回调，该回调只在其中一个依赖发生变化时才会扭转。
如果这些倡议对你都不起作用，你总是能够用正文来毁灭正告。
import React, {useEffect, useState} from 'react';export default function App() { const [address, setAddress] = useState({country: '', city: ''}); const obj = {country: 'Chile', city: 'Santiago'}; useEffect(() => { setAddress(obj); console.log('useEffect called'); // ️ disable the rule for a single line // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <div> <h1>Country: {address.country}</h1> <h1>City: {address.city}</h1> </div> );}