副作用与useEffect

在JavaScript中，副作用是指除了返回值外，对外部环境产生了影响的任何行为。常见的副作用包括数据存储、网络请求、DOM操作等。

在React中，页面上的变化往往需要与外部环境产生交互，因此使用副作用是必不可少的。然而，直接在组件内进行副作用操作可能会影响组件的渲染效率或者产生不可预知的bug。

为此，在React中引入了useEffect这个hooks函数来进行副作用操作。

什么是useEffect

useEffect是React提供的一个hooks函数，用来处理在函数组件中的副作用操作。

useEffect会在每次渲染组件时都被调用，并且根据传入的依赖数组来判断是否需要执行副作用操作。

如何使用useEffect

在使用useEffect时，需要传入两个参数：一个副作用函数和一个依赖数组。副作用函数中可以执行任何副作用操作，而依赖数组则用来判断何时需要执行这些操作。

import React, { useEffect } from 'react';

function MyComponent(props) {
  useEffect(() => {
    // 这里可以执行任何副作用操作，例如：网络请求、DOM操作、订阅事件等
    console.log('Component mounted');
    
    // 在组件卸载时执行清理操作
    return () => {
      console.log('Component unmounted');
    }
  }, []);  // 空数组表示不依赖任何props，只在组件挂载和卸载时执行一次

  return <div>{props.message}</div>
}

在上面的例子中，useEffect传入了一个副作用函数，这个函数会在组件被挂载后执行，并且在组件被卸载前执行清理操作。

注意到第二个参数是一个空数组，这表示副作用操作不依赖任何props，只在组件挂载和卸载时执行一次。

依赖数组

useEffect中的依赖数组用来判断何时需要执行副作用操作。

import React, { useEffect } from 'react';

function MyComponent(props) {
  useEffect(() => {
    console.log(`Message changed to ${props.message}`);
  }, [props.message]);  // 只在props.message改变时执行副作用操作

  return <div>{props.message}</div>
}

在上面的例子中，useEffect传入了一个副作用函数和一个依赖数组。这个依赖数组只包含一个props.message，表示只有当这个值发生变化时，才需要执行副作用操作。

清理操作

在副作用函数中返回一个函数，可以在组件卸载时执行清理操作。这个清理函数也可以返回一个函数，在下一次副作用函数执行前执行。

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log(`Count is ${count}`);
    
    // 在下一次副作用函数执行前执行清理操作
    return () => {
      console.log(`Count cleanup: ${count}`);
    }
  }, [count]);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count+1)}>Increment</button>
    </div>
  )
}

在上面的例子中，useEffect中返回了一个函数，这个函数会在组件被卸载前执行清理操作。同时这个函数也返回了一个函数，这个函数会在下一次副作用函数执行前执行。

总结

副作用的使用是必不可少的，但是直接在组件中进行副作用操作可能会引起问题。通过使用React提供的useEffect函数，可以很方便地处理副作用操作，而且在性能方面也做了很好的优化。