React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。以下是一些常用的 React Hooks：

常用 Hooks

  • useState: 用于在函数组件中添加 state。
  • useEffect: 用于在组件挂载和更新后执行副作用操作。
  • useContext: 用于访问 React 上下文。
  • useReducer: 用于替代 useState 的更复杂的状态逻辑。
  • useCallback: 用于返回一个记忆化的回调函数。
  • useMemo: 用于记忆化计算结果。

useState

useState 钩子允许你在函数组件中添加 state。以下是一个简单的例子：

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 钩子用于在组件挂载和更新后执行副作用操作。以下是一个例子，它会在组件卸载时取消订阅：

import React, { useEffect } from 'react';

function EmailSubscription() {
  useEffect(() => {
    const subscription = emailService.subscribe('example@example.com');

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return <div>Email subscription</div>;
}

图片

React Hooks 的发展让函数组件更加灵活和强大。想要了解更多关于 React Hooks 的内容，请访问React Hooks 官方文档。

React Hooks