文章目录

点击这里访问站长的博客

React V16.8+

For componentDidMount

useEffect(() => {
    // Your code here
}, []); // 这个地方没有依赖,所以只执行一次

For componentDidUpdate

useEffect(() => {
    // Your code here
}, [yourDependency]);

For componentWillUnmount

useEffect(() => {
    // componentWillUnmount
    return () => {
        // Your code here
    }
}, [yourDependency]);

So in this situation, you need to pass your dependency into this array. Let’s assume you have a state like this

const [count, setCount] = useState(0);

And whenever count increases you want to re-render your function component. Then your useEffect should look like this

useEffect(() => {
// <div>{count}</div>
}, [count]);

代替 Callback

第二个参数是依然列表, 完全可以在 loading 获得数据或者完成的时候调用 callback

useEffect(() => {
    if (!loading) {
        // callback here
    }
}, [loading])

异步处理的模板

export default function Example() { 
    const [data, dataSet] = useState(false)



    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await res.json()
      dataSet(response)
    }

    useEffect(() => {
      fetchMyAPI();
    }, []);



  return <div>{data}</div>
}