react钩子函数用法（useState、useEffect、useContext）

useState

useState 是 React Hooks API 中的一个函数，它允许你在函数组件中添加局部状态。通过 useState，函数组件可以像类组件一样拥有和管理自己的状态，从而使得函数组件更加动态和可交互。

useState 函数接受一个初始状态作为参数，并返回一个包含两个元素的数组。第一个元素是当前的状态值，第二个元素是一个函数，用于更新这个状态。

import React, { useState } from 'react';  
  
function Example() {  
  // 声明一个新的状态变量, 我们称之为 “count”  
  const [count, setCount] = useState(0);  
  
  return (  
    <div>  
      <p>你点击了 {count} 次</p>  
      <button onClick={() => setCount(count + 1)}>  
        点我  
      </button>  
    </div>  
  );  
}

在上面的例子中，useState(0) 初始化了一个名为 count 的状态变量，并将其初始值设置为 0。setCount 是一个函数，用于更新 count 的值。每当用户点击按钮时，就会调用 setCount(count + 1)，从而更新 count 的值。

注意事项

1、状态更新可能是异步的：React 可能会推迟状态的更新以提高性能。因此，不要依赖当前的状态来计算下一个状态。如果你需要基于当前状态来更新状态，可以使用函数形式的更新器：

setCount(prevCount => prevCount + 1);

2、状态更新会触发重新渲染：每当状态值发生变化时，React 都会重新渲染组件。这是 React 保持 UI 与状态同步的方式。

3、不要在循环、条件或嵌套函数中调用状态更新函数：这可能会导致不必要的渲染或逻辑错误。

4、状态应该是不可变的：不要直接修改状态值，而是通过状态更新函数来更新它。

useState 使得函数组件在保持简单和可预测的同时，也能处理复杂的用户交互和状态管理。它是 React Hooks 中最基础和最常用的一个。

useEffect

useEffect 是 React Hooks 中的一个重要函数，用于在函数组件中处理副作用（side effects）。副作用是指那些除了返回 UI 以外的所有操作，比如数据获取、订阅、手动更改 DOM、定时器等。useEffect 钩子让你可以在组件渲染后执行某些操作，它基本上替代了类组件中的生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

useEffect 接受两个参数：一个函数和一个依赖项数组。第一个参数是一个包含副作用逻辑的函数，这个函数会在组件渲染后执行。第二个参数是一个数组，包含了所有此副作用依赖的值；当这些值中的任何一个发生变化时，都会重新运行副作用函数。如果省略依赖项数组，副作用将在每次渲染后执行。

import React, { useState, useEffect } from 'react';  
  
function Example() {  
  const [count, setCount] = useState(0);  
  
  useEffect(() => {  
    // 这个函数在组件挂载后以及 count 发生变化时执行  
    console.log(`组件已更新，当前 count 的值为: ${count}`);  
  
    // 清除函数，在副作用即将被重新执行或组件卸载前调用  
    return () => {  
      console.log('清除副作用');  
    };  
  }, [count]); // 依赖项列表，当 count 发生变化时，重新执行副作用  
  
  return (  
    <div>  
      <p>你点击了 {count} 次</p>  
      <button onClick={() => setCount(count + 1)}>  
        点我  
      </button>  
    </div>  
  );  
}

在上面的例子中，useEffect 的第一个参数是一个函数，它包含了副作用的逻辑。这个函数在组件初次渲染后会执行，以及当 count 状态变量发生变化时也会执行。第二个参数 [count] 是一个依赖项数组，它告诉 React 只有在 count 发生变化时才重新运行副作用函数。

注意事项

1、清除函数：useEffect 允许你返回一个清除函数，这个函数会在副作用即将被重新执行或组件卸载之前调用。这对于取消网络请求、清除定时器或清理任何在副作用期间创建的资源非常有用。

2、空依赖项数组：如果你传递一个空数组 [] 作为 useEffect 的第二个参数，那么副作用只会在组件挂载时运行一次，相当于类组件的 componentDidMount 生命周期方法。

3、性能优化：为了避免不必要的重新渲染和副作用执行，确保正确设置依赖项数组。如果省略依赖项数组或设置不正确，可能会导致性能问题或逻辑错误。

4、异步操作：如果你在副作用中执行异步操作，确保正确处理异步逻辑，以避免在组件卸载后出现未处理的异步操作。

useContext

useContext 是 React Hooks 中的一个函数，它允许你在不使用组件嵌套传递的情况下直接访问 React 的 Context 值。Context 提供了一种在组件之间共享某些值（如主题、语言设置、用户数据等）而无需显式地通过每个层级的 props 传递这些值的方式。

首先，你需要使用 React.createContext() 创建一个 Context 对象。然后，在父组件中使用 <Context.Provider> 包裹子组件，并通过 value 属性传递你想要共享的数据。在任何子组件中，你可以使用 useContext(Context) 来获取这些共享的数据。

useContext 的主要优势在于它简化了在多层嵌套的组件之间共享数据的过程。它避免了 props drilling（即过多地将 props 一层层传递下去）的问题，使得代码更加简洁和可维护。

const MyContext = React.createContext();  
  
function ParentComponent() {  
  const [sharedState, setSharedState] = useState('Initial Value');  
    
  return (  
    <MyContext.Provider value={sharedState}>  
      <ChildComponent />  
    </MyContext.Provider>  
  );  
}  
  
function ChildComponent() {  
  const sharedState = useContext(MyContext);  
    
  return <div>{sharedState}</div>;  
}

当Context 的值发生变化时，所有使用了 useContext 的子组件都会重新渲染。为了避免不必要的渲染，需要谨慎地选择何时和如何更新 Context 的值。useContext 必须在组件的顶层调用，且 <Context.Provider> 必须位于调用 useContext 的组件之上。