为什么react的useEffect hooks重复不停的运行？

Question

用cra脚手架运行下面的demo：
src/App.js

import React, {useState, useEffect} from "react"
import {InfiniteScroller} from "react-iscroller";
import axios from "axios";


function App() {
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        getArticleList().then(res => {
            setArticles(res.data.article_list);
            console.log(articles);  //控制台会一直打印这一行
        });
    });

    const getArticleList = params => {
        return axios.get('/api/articles', params).then(res => {
            return res.data
        }, err => {
            return Promise.reject(err);
        }).catch((error) => {
            return Promise.reject(error);
        });
    };


    let renderCell = (item, index) => {
        return (
            <li key={index} style={{listStyle: "none"}}>
                <div>
                    <span style={{color: "red"}}>{index}</span>
                    {item.content}
                </div>
                {item.image ? <img src={item.image}/> : null}
            </li>
        );
    };

    let onEnd = () => {
        //...
    };


    return (
        <InfiniteScroller
            itemAverageHeight={66}
            containerHeight={window.innerHeight}
            items={articles}
            itemKey="id"
            onRenderCell={renderCell}
            onEnd={onEnd}
        />
    );
}

export default App;

控制台会一直打印useEffect中的console.log(articles)，是怎么回事？

Answer 1

如果是想componentDidMout的效果，第二个参数设置[]，如果未设置第二个参数，而且在内部改变了状态，就会一直重复渲染

官方文档：https://reactjs.org/docs/hook...

Answer 2

useEffect在render,re-render,unmount时都会触发，加个state放在第二个参数锁一下

Answer 3

正常的啊，userEffect 这个钩子函数就是在每次组件渲染时，都会调用一次，而且会先调用钩子函数的返回值反注册之前的逻辑，再执行当前的函数体。