React Hooks Handbook

在React的丰富多彩的生态圈中,Hooks的问世无疑是划时代的进步。它们为函数组件注入了状态管理和副作用处理的能力,未经多余修饰、无须变换身形,优雅且直接。本文将介绍React中的常用Hooks,并提供精选示例代码,展现其在日常开发中的应用魔力。

基础Hooks

useState

useState用于为函数组件添加状态。

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

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

  return (
    <div>
      <p>您点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

useEffect

useEffect用来在函数组件中执行副作用操作。

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

function UserStatus({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // 仅当 userId 更改时,才重新获取用户数据

  // ...
}

useContext

useContext允许组件订阅React的Context变更。

javascript 复制代码
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      我被主题化了
    </button>
  );
}

额外Hooks

useReducer

useReduceruseState的替代品,适用于复杂的状态逻辑。

javascript 复制代码
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>
    </>
  );
}

useCallback

useCallback返回一个记忆化的回调函数。

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

function Todos({ addTodo }) {
  const [text, setText] = useState('');

  const onChange = useCallback(e => {
    setText(e.target.value);
  }, []);

  const onSubmit = useCallback(
    e => {
      e.preventDefault();
      addTodo(text);
      setText('');
    },
    [text, addTodo],
  );

  return (
    <form onSubmit={onSubmit}>
      <input value={text} onChange={onChange} />
      <button type="submit">添加</button>
    </form>
  );
}

useMemo

useMemo返回一个记忆化的值。

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

function computeExpensiveValue(a, b) {
  // 假设这是一个计算代价昂贵的函数
}

function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  return <>{memoizedValue}</>;
}

useRef

useRef返回一个可变的ref对象,其.current属性被初始化为传入的参数。

javascript 复制代码
import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 当按钮点击时,input元素将获得焦点
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>聚焦到输入框</button>
    </>
  );
}

useImperativeHandle

useImperativeHandle自定义ref暴露给父组件的实例值。

javascript 复制代码
import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

function Parent() {
  const inputRef = useRef();
  
  return (
    <>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        聚焦到输入框
      </button>
    </>
  );
}

useLayoutEffect

useLayoutEffect的 signature 与useEffect相同,但它在所有DOM变化后同步触发。

javascript 复制代码
import React, { useLayoutEffect, useRef } from 'react';

function MeasureExample() {
  const divRef = useRef();
  useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect().height);
  });

  return <div ref={divRef}>Hello, world</div>;
}

useDebugValue

useDebugValue可以在React开发者工具中显示自定义的hook标签。

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

function useCustomHook() {
  const [value, setValue] = useState(null);
  
  useDebugValue(value ?? 'loading...');
  
  // ...
}

function Component() {
  useCustomHook();
  // ...
}

React Hooks为开发者提供了一系列编码工具,极大简化了状态与生命周期功能的实现,其内在的精妙机制彰显了React团队对开发便捷性的深刻理解。

相关推荐
腾讯TNTWeb前端团队41 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试