526互联

react_hooks系列 useEffect

发布时间 2023-12-11 19:50:56作者: 成全我的理想

一、作用
​ 　　　　可以使得你在函数组件中执行一些带有副作用的方法。

​ 　　　　每当 React组件更新之后，就会触发 useEffect，在第一次的render 和每次 update 后的useEffect触发，不用再去考虑“初次挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

​ 　　　　你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

​ 　　　　我们在函数式组件里，没有 componentDidMount，componentDidUpdate 和 componentWillUnmount，用useEffect。即：当数据发生变化后，渲染到组件上，组件渲染完毕后，就会调用useEffect。

二、格式：

 

　　　　　useEffect(回调函数，[依赖]); //在render之后触发useEffect，进一步调用回调函数。

三、示例：

1、useEffect的无条件执行（只有一个参数）

import React,{useState,useEffect} from 'react';

function App() {
  const [count,setCount] = useState(0);
  
  //useEffect:相当于 componentDidMount，componentDidUpdate
  useEffect(()=>{
      console.log("userEffect");
      document.title = count;
  });
  return (
    <div className="App">
      <p>{count}</p>
      <input type="button" value="测试" onClick={()=>{setCount(count+1)}} />
    </div>
  );
}

2、useEffect的条件执行（useEffect的第二个参数）
​ 　　　　当useEffect只有一个参数时，会无条件执行，但是，当发送请求时（页面的初始数据来自后端），一旦把请求放在useEffect里，就会无休止的执行。因为，当请求的数据回来后，引起组件的更新，组件更新后，再次触发useEffect，再次发送请求，再次组件更新………………，陷入到了无限的死循环。那么，可以使用useEffect的第二个参数。

​ 第二个参数表示，useEffect是否再次触发，依赖于某个值。当为空数组时，表示不会二次触发（因为，没有任何依赖）。即：componentDidMount时会触发，componentDidUpdate不会触发。

​ 如下代码，由于依赖是空，所以，useEffect只表示componentDidMount。

 useEffect( async ()=>{
      let data = await getBooks();  //发送请求的代码已经封装     
      setBooks(data);      
  },[]);

​ 如下代码，表示componentDidMount，和 count变化后引起的componentDidUpdate。

　 useEffect( async ()=>{
      let data = await getBooks();  //发送请求的代码已经封装     
      setBooks(data);      
  },[count]);