为什么我们要在 react 中使用 useEffect 或 componentDidMount？答案

【问题标题】：Why should we use useEffect or componentDidMount in react?为什么我们要在 react 中使用 useEffect 或 componentDidMount？
【发布时间】：2021-08-25 16:19:52
【问题描述】：

我不明白在我想要做事情的情况下使用 useEffect 的必要性，例如在渲染之前。例如，在下面的代码中，我想用信息填充数据，例如通过从 API 接收。现在下面代码的区别：

const Product_List = (props) => {

    const [data, setData] = useState();

    getData((response)=> setData(response));

    return(
        <FlatList
            data={data}
        />
    )
}

使用以下代码：

const Product_List = (props) => {

    const [data, setData] = useState();

    useEffect(() => {
        getData((response)=> setData(response));
    }, []);

    return(
        <FlatList
            data={data}
        />
    )
}

换句话说，这段代码不同：

class Product_List extends Component{
    constructor(props) {
        this.state = {
            data: []
        }
        getData((response)=> this.setState({data: response}));
    }
    render(){
        return(
            <FlatList
                data={data}
            />
        )
    }
}

使用以下代码：

class Product_List extends Component{
    constructor(props) {
        this.state = {
            data: []
        }
    }
    componentDidMount(){
        getData((response)=> this.setState({data: response}));
    }
    render(){
        return(
            <FlatList
                data={data}
            />
        )
    }
}

【问题讨论】：

函数体 != 类构造函数。而是 Function body == Class 渲染方法。

标签： javascript reactjs react-native react-hooks

【解决方案1】：

构成函数组件的函数在每次组件被渲染时都会被调用。

useEffect 将一些代码放在一边，因此它仅在其中一个依赖项发生更改时运行。

在您的第二个示例中，您有一个 [] 的依赖项列表，因此它仅在组件首次呈现时运行。

在您的第一个示例中，您调用getData 每次组件被渲染。所以它渲染，你调用getData，它调用setData，它触发一个渲染，所以你调用getData，你有一个无限循环。

您的类组件代码不等效。

【讨论】：

【解决方案2】：

当您的 console.log 不在 useEffect 范围内时，它会在 “渲染阶段”

运行

“渲染阶段” 纯净无副作用。可能会被 React 暂停、中止或重新启动。

当您在 useEffect 中使用它时，它会在“渲染阶段”之后运行，或者在“提交阶段”期间运行。

“提交阶段” 可以使用 DOM、运行副作用、安排更新。

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

所以在 useEffect 或 componentDidMount 之外做副作用是不明智的，因为 React 的行为并不总是我们所期望的。

【讨论】：