我一直在玩 React 16.7-alpha 中的新钩子系统，当我处理的状态是对象或数组时，我陷入了 useEffect 的无限循环。
首先，我使用 useState 并使用一个空对象启动它，如下所示：
const [obj, setObj] = useState({});
然后，在 useEffect 中，我再次使用 setObj 将其设置为空对象。作为第二个参数，我传递了 [obj]，希望如果对象的内容没有改变，它就不会更新。但它一直在更新。我猜是因为无论内容如何，这些总是不同的对象让 React 认为它不断变化？
useEffect(() => {
setIngredients({});
}, [ingredients]);
数组也是如此，但作为原语，它不会像预期的那样陷入循环。
使用这些新钩子，在检查天气内容是否发生变化时，我应该如何处理对象和数组？
将空数组作为第二个参数传递给 useEffect 使其仅在挂载和卸载时运行，从而停止任何无限循环。
useEffect(() => {
setIngredients({});
}, []);
我在https://www.robinwieruch.de/react-hooks/上关于 React hooks 的博客文章中澄清了这一点
有同样的问题。我不知道他们为什么不在文档中提及这一点。只想对 Tobias Haugen 的回答补充一点。
要在每个组件/父级重新渲染中运行，您需要使用：
useEffect(() => {
// don't know where it can be used :/
})
要在组件安装后仅运行一次（将呈现一次），您需要使用：
useEffect(() => {
// do anything only one time if you pass empty array []
// keep in mind, that component will be rendered one time (with default values) before we get here
}, [] )
要在组件安装和 data/data2更改时运行任何一次：
const [data, setData] = useState(false)
const [data2, setData2] = useState('default value for first render')
useEffect(() => {
// if you pass some variable, than component will rerender after component mount one time and second time if this(in my case data or data2) is changed
// if your data is object and you want to trigger this when property of object changed, clone object like this let clone = JSON.parse(JSON.stringify(data)), change it clone.prop = 2 and setData(clone).
// if you do like this 'data.prop=2' without cloning useEffect will not be triggered, because link to data object in momory doesn't changed, even if object changed (as i understand this)
}, [data, data2] )
我大部分时间是如何使用它的：
export default function Book({id}) {
const [book, bookSet] = useState(false)
const loadBookFromServer = useCallback(async () => {
let response = await fetch('api/book/' + id)
response = await response.json()
bookSet(response)
}, [id]) // every time id changed, new book will be loaded
useEffect(() => {
loadBookFromServer()
}, [loadBookFromServer]) // useEffect will run once and when id changes
if (!book) return false //first render, when useEffect did't triggered yet we will return false
return <div>{JSON.stringify(book)}</div>
}
我也遇到过同样的问题，我通过确保在第二个参数中传递原始值来修复它[]。
如果你传递一个对象，React 将只存储对对象的引用并在引用改变时运行效果，这通常是每一次（但我现在不知道如何）。
解决方案是传递对象中的值。你可以试试，
const obj = { keyA: 'a', keyB: 'b' }
useEffect(() => {
// do something
}, [Object.values(obj)]);
或者
const obj = { keyA: 'a', keyB: 'b' }
useEffect(() => {
// do something
}, [obj.keyA, obj.keyB]);
如果您正在构建自定义钩子，有时会导致无限循环，默认情况如下
function useMyBadHook(values = {}) {
useEffect(()=> {
/* This runs every render, if values is undefined */
},
[values]
)
}
解决方法是使用相同的对象，而不是在每次函数调用时都创建一个新对象：
const defaultValues = {};
function useMyBadHook(values = defaultValues) {
useEffect(()=> {
/* This runs on first call and when values change */
},
[values]
)
}
如果您在组件代码中遇到此问题，如果您使用 defaultProps 而不是 ES6 默认值，循环可能会得到修复
function MyComponent({values}) {
useEffect(()=> {
/* do stuff*/
},[values]
)
return null; /* stuff */
}
MyComponent.defaultProps = {
values = {}
}
正如文档（https://reactjs.org/docs/hooks-effect.html）useEffect中所说，当您希望在每次渲染后执行某些代码时，可以使用该钩子。从文档：
useEffect 是否在每次渲染后运行？是的！
如果您想对此进行自定义，您可以按照同一页面稍后显示的说明进行操作 ( https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects )。基本上，该useEffect方法接受第二个参数，React 将检查该参数以确定是否必须再次触发效果。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
您可以将任何对象作为第二个参数传递。如果这个对象保持不变，你的效果只会在第一次坐骑后触发。如果物体发生变化，效果会再次触发。