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

什么是 Hooks?

Hooks 是 React 16.8 引入的新特性,它允许你在不编写类的情况下使用 state 以及其他的 React 特性。Hooks 让你在函数组件中“钩子”到 React state 以及生命周期特性。

常用 Hooks

  • useState:用于在函数组件中添加 state。
  • useEffect:用于在组件挂载和更新后执行副作用操作。
  • useContext:用于在组件中订阅 context。
  • useReducer:用于替代 useStateuseContext 的更复杂的状态逻辑。
  • useCallback:用于缓存回调函数。
  • useMemo:用于缓存计算结果。

示例

以下是一个使用 useStateuseEffect 的简单示例:

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

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

  useEffect(() => {
    document.title = `你点击了 ${count} 次`;
  }, [count]); // 依赖项数组

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

扩展阅读

更多关于 React Hooks 的内容,可以参考官方文档:React Hooks

React Hooks 示例