React useEffect Hook 使用指南 - 副作用操作的利器

"useEffect是React中的一个hook，用于在函数组件中执行副作用操作。它接受两个参数：一个是副作用函数，另一个是依赖数组。\n\n副作用函数是一个普通的JavaScript函数，用于执行一些具有副作用的操作，比如数据获取、订阅事件、手动操作DOM等等。副作用函数会在组件渲染完成后执行，并且每次组件重新渲染时都会执行。\n\n依赖数组是一个可选的参数，用于指定副作用函数的依赖项。当依赖项发生变化时，副作用函数会重新执行。如果不传递依赖数组，则副作用函数会在每次组件重新渲染时都执行。\n\n下面是一个使用useEffect的例子：\n\njavascript\nimport React, { useEffect } from 'react';\n\nfunction MyComponent() {\n useEffect(() => {\n // 这里是副作用函数\n console.log('组件渲染完成后执行');\n \n // 返回一个清除函数，用于在组件卸载或重新渲染前执行清除操作\n return () => {\n console.log('组件卸载或重新渲染前执行清除操作');\n }\n }, []); // 依赖数组为空，表示副作用函数只在组件渲染完成后执行一次\n\n return (\n <div>\n {/* 组件内容 */}\n </div>\n );\n}\n\n\n在上面的例子中，副作用函数会在组件渲染完成后执行，并输出"组件渲染完成后执行"。同时，也返回了一个清除函数，在组件卸载或重新渲染前执行清除操作。\n\n需要注意的是，如果依赖数组中的值发生变化，副作用函数会重新执行。如果依赖数组为空，则副作用函数只会在组件渲染完成后执行一次。如果依赖数组中的值永远不会变化，可以传递一个空数组来确保副作用函数只执行一次。\n\n