react钩子函数用法(useState、useEffect、useContext)

发布于:2024-06-23 ⋅ 阅读:(19) ⋅ 点赞:(0)

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 的状态变量,并将其初始值设置为 0setCount 是一个函数,用于更新 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 钩子让你可以在组件渲染后执行某些操作,它基本上替代了类组件中的生命周期方法,如 componentDidMountcomponentDidUpdate 和 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 的组件之上。