useEffect使用简述

react-Hooks简单理解就是函数体中使用周期。

接下来就是主题

 useEffect

useEffect 是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

简单复述下：

componentDidMount: 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

componentDidUpdate:组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

componentWillUnmount:在此处完成组件的卸载和数据的销毁。

举例来说，我们希望组件加载以后，网页标题（document.title）会随之改变

import React, { useEffect } from 'react';

    function Welcome(props) {

        useEffect(() => {

            document.title = '加载完成';

        });

    return

Hello, {props.name}

;

}

加载组件就开始调用，个人理解组件优先级高最先调用的钩子。

useEffect()的作用就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。

@@useEffect第二个参数

刚使用的时候总有些疑惑为什么会一直调用，就是因为这个 没有绑定依赖（第二个参数）

我们不希望useEffect()每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。

function Welcome(props) {

    useEffect(() => {

        document.title = `Hello, ${props.name}`;

    }, [props.name]);

    return

Hello, {props.name}

;

}

如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。

useEffect() 的用途

1.获取数据（data fetching）

2.事件监听或订阅（setting up a subscription）

3.改变 DOM（changing the DOM）

useEffect注意事项

当需要多个调用多个依赖是需要书写多个useEffect