既然可以不使用useEffect()钩子直接从axios获取数据，那么为什么首选使用useEffect()然后使用axios？另外，在哪种情况下不需要useEffect()？下面是一个示例：
useEffect()
useEffect(() => { axios .get('http://localhost:3001/notes') .then(response => { setNotes(response.data) }) }, [])
字符串
uqcuzwp81#
通过使用useEffect，你告诉React你的组件需要在渲染后做一些事情。React会记住你传递的函数，并在执行DOM更新后调用它。使用函数式组件时使用React Hooks，而使用基于类的组件时，可以在componentDidMount()方法中使用axios从API获取数据。
useEffect
componentDidMount()
axios
vnzz0bqm2#
假设你的setNotes(response.data)是一个状态修改函数（从useState()返回的第二个值），它在调用时触发组件的重新呈现。因此，当组件第一次被呈现时，它会进行fetch调用，该调用在响应时触发组件的重新呈现。一旦重新渲染，再次返回到使用axios调用获取数据的组件的相同代码行，这再次调用您的setNotes()并触发重新渲染...它一直在渲染...永远你可以在响应中看到console.log。
setNotes(response.data)
useState()
setNotes()
console.log
默认情况下，效果会在每个完成的渲染之后运行（类似于根本不使用useEffect()钩子），但您可以选择仅在某些值发生更改时才触发它，方法是向它传递第二个参数数组和变量。传递一个空数组作为第二个参数会导致效果只运行一次;在组件的第一次渲染上。
当你想对组件的呈现做一些副作用（数据获取、订阅、DOM操作等），或者当某些值从组件的最后一次呈现发生了变化时，可以使用钩子。例如，当你有一个函数来获取一些事件（onClick，onSubmit等）的数据时，你不需要useEffect()钩子，因为这些不会在组件渲染上自动运行（它们只在用户事件上运行）。
onClick
onSubmit
taor4pac3#
**useEffect（）在第一次渲染和每次更新后调用。在本例中，axios服务将在render和每次更新后调用，您可以从调用中删除useEffect，并将axios放在componentDidMount（）**中
c2e8gylq4#
在React 16.8之后，我相信react社区正试图远离这门课。因此引入了钩子的概念。通过使用useEffect（），可以避免使用类组件的componentDidMount等。
3hvapo4f5#
当你需要组件的生命周期时，比如功能组件中的componentWillMount或componentDidMount，就可以使用useEffect钩子
componentWillMount
componentDidMount
5条答案
按热度按时间uqcuzwp81#
通过使用
useEffect，你告诉React你的组件需要在渲染后做一些事情。React会记住你传递的函数，并在执行DOM更新后调用它。使用函数式组件时使用React Hooks，而使用基于类的组件时，可以在componentDidMount()方法中使用axios从API获取数据。vnzz0bqm2#
不带
useEffect()假设你的
setNotes(response.data)是一个状态修改函数（从useState()返回的第二个值），它在调用时触发组件的重新呈现。因此，当组件第一次被呈现时，它会进行fetch调用，该调用在响应时触发组件的重新呈现。一旦重新渲染，再次返回到使用axios调用获取数据的组件的相同代码行，这再次调用您的
setNotes()并触发重新渲染...它一直在渲染...永远你可以在响应中看到
console.log。使用
useEffect()默认情况下，效果会在每个完成的渲染之后运行（类似于根本不使用
useEffect()钩子），但您可以选择仅在某些值发生更改时才触发它，方法是向它传递第二个参数数组和变量。传递一个空数组作为第二个参数会导致效果只运行一次;在组件的第一次渲染上。
什么时候不使用
useEffect()？当你想对组件的呈现做一些副作用（数据获取、订阅、DOM操作等），或者当某些值从组件的最后一次呈现发生了变化时，可以使用钩子。
例如，当你有一个函数来获取一些事件（
onClick，onSubmit等）的数据时，你不需要useEffect()钩子，因为这些不会在组件渲染上自动运行（它们只在用户事件上运行）。taor4pac3#
**useEffect（）在第一次渲染和每次更新后调用。在本例中，axios服务将在render和每次更新后调用，您可以从调用中删除useEffect，并将axios放在componentDidMount（）**中
c2e8gylq4#
在React 16.8之后，我相信react社区正试图远离这门课。因此引入了钩子的概念。通过使用useEffect（），可以避免使用类组件的componentDidMount等。
3hvapo4f5#
当你需要组件的生命周期时，比如功能组件中的
componentWillMount或componentDidMount，就可以使用useEffect钩子