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

Question

用cra脚手架运行下面的demo：src/App.jsimport 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

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