php网站开发遇到的问题,wordpress 主题制作视频,设计公司画册模板,小程序游戏开发公司 useEffect作为做常用的Hook#xff0c;以下三个知识点你有必要了解下~
防止写出奇怪的代码祸害队友#xff0c;而我不幸就是这个受害者#xff01;#xff01;#xff01;#xff01;#xff01;
useEffect的依赖项为空
useEffect的dependencyList作为一个可选参数… useEffect作为做常用的Hook以下三个知识点你有必要了解下~
防止写出奇怪的代码祸害队友而我不幸就是这个受害者
useEffect的依赖项为空
useEffect的dependencyList作为一个可选参数当他的依赖项为空的时候每次引起页面的渲染更新的时候都会调用一次该useEffect参数。
function App() {const [updateList, setUpdateList] useState([])useEffect(() {console.log(dependencyList 为null的useEffect被调用了)})return (div classNameAppheader classNameApp-headerdiv{updateList.map(time { return divtime:{time}/div })}/divdiv onClick{() { setUpdateList([...updateList, new Date()]) }}Add record/div/header/div);
}效果如下 在示例中点击页面的Add Record 按钮共计四次右侧中显示了共计24次的日志这说明了每次页面的刷新时候由于dependencyList为空所以每次的副作用都可以被调用到。
useeffect的依赖项为空数组的时候
在第一个示例中我们可以猜想每次的页面更新useEffect作为副作用都会被调用但当dependencyList为空数组的时候由于没有匹配到任何的dependency所以会导致为每次的副作用都跟我们无关只有第一次初始化页面的时候才会匹配到。
同样的下面一个简单的例子。
function App() {const [updateList, setUpdateList] useState([])useEffect(() {console.log(dependencyList 为空数组的useEffect被调用了)}, [])return (div classNameAppheader classNameApp-headerdiv{updateList.map(time { return divtime:{time}/div })}/divdiv onClick{() { setUpdateList([...updateList, new Date()]) }}Add record/div/header/div);
}usseEffect返回函数代表什么
首先讲这个内容并不是想要表达什么只是因为很多人在写博客的时候内容太过于旧了所以现在就更新一波并不是说谁谁谁的问题。
打开CSDN可以看到很多关于useEffect返回函数的描述
事实真的是这样嘛让我们测试下。
function App() {const [updateList, setUpdateList] useState([])useEffect(() {return () {console.log(useEffect的返回函数被调用)}}, [])return (div classNameAppheader classNameApp-headerdiv{updateList.map(time { return divtime:{time}/div })}/divdiv onClick{() { setUpdateList([...updateList, new Date()]) }}Add record/diva hrefhttps://www.baidu.com跳转到百度/a/header/div);
}上述代码中我们添加了一个a标签作用是跳转到百度的网站模拟出了组件被干掉的情况这时候让我们在打开”保留日志“开关让我们看看是否会在日志中打印出来。
此时尚未点击按钮useEffect的回调函数已经被调用了。
当我们点击按钮跳转过去的时候useEffect的回调函数并没有被调用。 查看官网看看如何解释~
所以当我们要在useEffect的clean up逻辑运行的东西你在useEffect中要有相对应的set up操作。
求关注~ 希望能帮到你~
微信公众号文章 公众号文章链接求关注
求关注~ 希望能帮到你~
