React Hooks 是 React 16.8 版本引入的新特性,它允许你在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些关于 React Hooks 的基本概念和案例。

常用 Hooks

  1. useState:用于在函数组件中添加 state。
  2. useEffect:用于在组件渲染后执行副作用操作。
  3. useContext:用于在组件树中共享值。
  4. useReducer:用于替代 useState 的更复杂的状态逻辑。
  5. useCallback:返回一个记忆化的回调函数。
  6. useMemo:返回一个记忆化的值。

示例

假设我们有一个简单的计数器组件,使用 useStateuseEffect 来实现:

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

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

扩展阅读

想要了解更多关于 React Hooks 的内容,可以阅读官方文档

React Hooks 示例