React 常用 Hooks

React 常用 Hooks 简介

React Hooks 是 React 16.8 中引入的一项功能,它允许你在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 的出现极大地简化了函数组件的状态管理和副作用的处理。本文将介绍几个最常用的 Hooks,并提供简洁明了的示例代码。

useState

useState 是一个让函数组件能够使用 state 的 Hook。它接受初始状态并返回两个值:当前状态和更新状态的函数。

jsx 复制代码
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中,useState 初始化计数器的值为 0。setCount 是一个函数,用来更新计数器的值。

useEffect

useEffect 让你在函数组件中执行副作用操作(如数据获取、订阅或手动更改 DOM)。它可以看作是 componentDidMountcomponentDidUpdatecomponentWillUnmount 这些生命周期方法的组合。

jsx 复制代码
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中,useEffect 会在每次渲染后更新文档的标题。

useContext

useContext 让你可以访问 React 的 Context 对象,这个对象可以让你在组件树中传递数据而不必使用 props。

jsx 复制代码
import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

在上面的代码中,useContext 使得函数组件 ThemedButton 能够读取到最近的 ThemeContext 提供的主题。

useReducer

useReducer 是另一种可以在 React 函数组件中管理复杂 state 的方法。它通常用于组件中有多个子值的 state,或者当下一个 state 依赖于之前的 state 时。

jsx 复制代码
import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

在上面的例子中,useReducer 接受一个 reducer 函数和初始状态,返回当前状态和 dispatch 函数,用于触发状态的更新。

useCallback

useCallback 返回一个记忆化的回调函数。这个回调函数仅在它的依赖项改变时才会更新,这有助于避免在渲染时不必要的重新渲染。

jsx 复制代码
import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []); // 依赖项为空数组,这个函数永远不会变

  return <button onClick={increment}>+</button>;
}

在这个例子中,increment 函数只会在组件首次渲染时创建一次。

useMemo

useMemo 用于返回一个记忆化的值。它只会在依赖项改变时重新计算这个值,有助于避免在每次渲染时都进行高开销的计算。

jsx 复制代码
import React, { useState, useMemo } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return count * 2;
  }, [count]); // 只有当 count 变化时才重新计算

  return <div>{doubleCount}</div>;
}

在上面的代码中,doubleCount 只会在 count 改变时重新计算。

React Hooks 提供了一种强大而灵活的方式来共享逻辑和状态管理,而无需重构组件为类。上述 Hooks 是最常用的,但 React 还提供了其他 Hooks(如 useRef, useLayoutEffect, useImperativeHandle 等),以及允许你创建自定义 Hooks,以更好地适应你的应用需求。

相关推荐
paopaokaka_luck3 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94936 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_38 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js