ReactJS Hooks 完整参考

ReactJS Hooks 是一种优秀的 ReactJS 开发方式，它能够帮助程序员编写更加简洁、易于维护的代码。下面我们来介绍一下 ReactJS Hooks 的用法。

useState

useState 是 ReactJS Hooks 的一种，它用于管理组件中的状态。通过使用 useState，你可以改变组件中的状态并触发组件的重新渲染。

import React, { useState } from 'react';

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

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

在上面的代码中，我们使用 useState 来定义一个 count 状态，并将这个状态值设置为 0。然后我们通过 setCount 函数来更新 count 值，并触发组件的重新渲染。

useEffect

useEffect 是 ReactJS Hooks 的另一种，它用于处理组件的副作用。副作用是指那些不只是改变状态的操作，例如从服务器上获取数据或者添加或删除元素等等。

import React, { useState, useEffect } from 'react';

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

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

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

在上面的代码中，我们首先定义了一个计数器 count 和一个 setCount 函数来更新它。接着我们使用 useEffect 来更改文档标题。注意到我们并没有直接操作文档标题，而是将我们想要展示的文本传递给 useEffect 函数。这样我们就不必担心在使用 React 时出现一些错误的情况，例如循环执行副作用等等。

此外，useEffect 也可以通过一个回调函数来清除副作用。例如：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div>
      <p>You clicked {count} times.</p>
    </div>
  );
}

在上面的代码中，我们定义了一个计数器 count 和一个 setCount 函数来更新它。然后我们使用 useEffect 来设置一个定时器，每隔 1 秒钟更新一次计数器。在 useEffect 的返回值中，我们通过 clearInterval 来将定时器清除。注意到回调函数中传递了一个空数组 []，这代表我们仅在组件加载时执行 useEffect。如果我们不传递空数组，则 useEffect 在每次组件重新渲染时都会运行。

useContext

useContext 是 ReactJS Hooks 的另一种，它用于访问 ReactJS 上下文数据。上下文数据是指在组件之间共享的全局数据。

import React, { useContext } from 'react';

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

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

  return (
    <div>
      <p>The current theme is {theme}.</p>
    </div>
  );
}

在上面的代码中，我们首先使用 React.createContext 定义了一个上下文 ThemeContext。然后我们将其提供给一个子组件 Toolbar。最后 Toolbar 中的 useContext 函数会获取到 ThemeContext 中的 value 值，即 dark。

useMemo

useMemo 是 ReactJS Hooks 的一种，它用于性能优化，可以避免一些不必要的重复计算。

import React, { useState, useMemo } from 'react';

function App() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const result = useMemo(() => {
    console.log('Computing result...');

    return x + y;
  }, [x, y]);

  return (
    <div>
      <input
        type="number"
        value={x}
        onChange={(event) => setX(parseInt(event.target.value))}
      />
      <input
        type="number"
        value={y}
        onChange={(event) => setY(parseInt(event.target.value))}
      />
      <p>x + y = {result}</p>
    </div>
  );
}

在上面的代码中，我们首先定义了两个状态 x 和 y，并使用 useMemo 函数将它们相加。useMemo 的第二个参数是一个数组，包含了需要监听的变量。如果这些变量的值发生改变，则 useMemo 函数会重新计算，否则它会返回上一次的结果。

useCallback

useCallback 是 ReactJS Hooks 的另一种，它也用于性能优化，可以让函数在不必要时不重新声明。

import React, { useState, useCallback } from 'react';

function App() {
  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>
  );
}

function Button(props) {
  console.log('Rendering button...');

  return (
    <button onClick={props.onClick}>
      {props.children}
    </button>
  );
}

在上面的代码中，我们定义了一个计数器 count 和一个 setCount 函数来更新它。然后我们使用 useCallback 函数来声明 handleClick 函数，它会随着 count 的改变而改变。最后我们将 handleClick 函数传递给一个子组件 Button，让它渲染一个按钮。因为 handleClick 函数没有被重新声明，所以每次 render Button 时都不会打印 "Rendering button..."。

useRef

useRef 是 ReactJS Hooks 的一种，它用于获取 DOM 节点以及保存组件中的值。如果你需要在组件之间共享数据，但不希望它用于触发组件的重新渲染，则可以使用 useRef 来保存它。

import React, { useState, useRef } from 'react';

function App() {
  const [text, setText] = useState('');
  const textRef = useRef();

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleSubmit = () => {
    console.log(`Submitting ${text}...`);
    setText('');
    textRef.current.focus();
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        ref={textRef}
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

在上面的代码中，我们定义了一个状态 text 以及一个 setTex 函数。然后我们使用 useRef 函数来获取 input DOM 节点并将其保存在 textRef 变量中。在 handleSubmit 函数中我们使用 textRef.current.focus() 来将焦点放在 input 元素中。

总结

ReactJS Hooks 提供了很多方便的工具来简化 ReactJS 开发。使用 Hooks 可以帮助我们编写出更加易于维护、高效的代码，让我们的应用更加流畅。我们介绍了 useState、useEffect、useContext、useMemo、useCallback、useRef 函数，它们在 ReactJS 开发中都有着重要的作用。