React Hooks 必知必会-JavaScript中文网-JavaScript教程资源分享门户

React Hooks 是 React 16.8 引入的一个新特性，它可以让我们在无需编写类组件的情况下，使用 state 和其他 React 特性。本文将详细介绍 React Hooks 的使用方法，包括 useState、useEffect、useContext、useReducer、useCallback、useMemo 和 useRef。

useState

useState 是 React Hooks 中最常用的一个。它用来声明一个 state 并返回一个数组，其中第一个元素是当前的 state，第二个元素是更新 state 的函数。下面是一个例子：

// www.javascriptcn.com code example
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>
  );
}

useEffect

useEffect 是 React Hooks 中用来处理副作用的一个函数。它接收两个参数，第一个参数是一个函数，用来执行副作用，第二个参数是一个数组，用来控制副作用的执行时机。下面是一个例子：

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

useContext

useContext 是 React Hooks 中用来访问 context 的一个函数。它接收一个 context 对象作为参数，并返回 context 的值。下面是一个例子：

// www.javascriptcn.com code example
import React, { useContext } from 'react';

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

function Example() {
  const theme = useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;
}

useReducer

useReducer 是 React Hooks 中用来处理复杂 state 的一个函数。它接收一个 reducer 函数和初始 state，并返回一个数组，其中第一个元素是当前的 state，第二个元素是 dispatch 函数。下面是一个例子：

// www.javascriptcn.com code example
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 (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Click me
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Click me
      </button>
    </div>
  );
}

useCallback

useCallback 是 React Hooks 中用来缓存函数的一个函数。它接收一个函数和一个数组作为参数，并返回一个缓存后的函数。下面是一个例子：

// www.javascriptcn.com code example
import React, { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

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

useMemo

useMemo 是 React Hooks 中用来缓存值的一个函数。它接收一个函数和一个数组作为参数，并返回一个缓存后的值。下面是一个例子：

// www.javascriptcn.com code example
import React, { useMemo } from 'react';

function Example({ a, b }) {
  const result = useMemo(() => {
    return a + b;
  }, [a, b]);

  return <div>Result: {result}</div>;
}

useRef

useRef 是 React Hooks 中用来创建 ref 的一个函数。它接收一个初始值作为参数，并返回一个 ref 对象。下面是一个例子：

// www.javascriptcn.com code example
import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

以上就是 React Hooks 的全部介绍。学习并掌握这些 Hooks，可以让我们更方便地编写 React 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d0f2f2a941bf713420c135

React Hooks 必知必会