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团队对开发便捷性的深刻理解。

相关推荐
光影少年13 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_15 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891117 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾18 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking18 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu20 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym25 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫26 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫30 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat31 分钟前
前端性能优化2
前端