副作用、useEffect和返回 - Javascript

什么是副作用？

副作用指当一个函数执行时，它对程序状态之外的环境造成的影响，这些状态包括全局变量、文件系统、网络请求等。在函数式编程中，尽量避免副作用可以使代码更加健壮和可维护。

但在实际开发中，副作用是必要的。常见的副作用包括获取数据、更新DOM、发送网络请求等。

useEffect

React提供了一个称为useEffect的Hook来处理副作用。useEffect可以接受两个参数：第一个参数是执行副作用的函数，第二个参数是一个数组，用于指定依赖项。

useEffect(() => {
  // 副作用代码
}, [依赖项])

当[依赖项]的值发生变化时，useEffect会重新执行。

如果useEffect的第二个参数为空数组，表示不依赖任何值，那么副作用只会在组件挂载时执行一次，类似于类组件中的componentDidMount。

useEffect(() => {
  console.log('组件挂载了！')
}, [])

如果省略第二个参数，副作用会在每次组件更新时都执行一次，类似于类组件中的componentDidUpdate。

useEffect(() => {
  console.log('组件更新了！')
})

当组件被销毁时，useEffect会执行一个清除函数，用来清理副作用。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时器执行了！')
  }, 1000)

  return () => {
    clearInterval(timer)
    console.log('定时器被清除了！')
  }
}, [])

返回值

useEffect可以返回一个函数，用来清除副作用。当组件被销毁时，这个清除函数会被自动执行，以清理所有的副作用。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时器执行了！')
  }, 1000)

  return () => {
    clearInterval(timer)
    console.log('定时器被清除了！')
  }
}, [])

总结

副作用是程序状态之外的影响，如文件系统、网络请求等。React提供了useEffect来处理副作用，它可以接受副作用函数和依赖项数组作为参数，并且可以返回一个清除函数。在使用useEffect时，需要注意副作用的触发时机以及清除函数的实现。