React/社区/React_Hooks

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

什么是 React Hooks？

React Hooks 是 React 16.8 版本引入的一个新特性，它允许你在不编写类的情况下使用 state 和其他 React 特性。Hooks 可以让你在函数组件中“钩子”一些 React 的特性。

常用 Hooks

useState

useState 是 React 最基本的 Hooks，它允许你在函数组件中添加 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 允许你在组件中执行副作用操作，比如数据获取、订阅或者手动更改 DOM。

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then((data) => setData(data));
  }, []); // 空依赖数组意味着这个 effect 只在组件挂载时运行一次

  if (!data) return <span>Loading...</span>;

  return (
    <div>
      <p>{data.someProperty}</p>
    </div>
  );
}

useContext

useContext 允许你订阅 React 上下文（Context）的变化，并重新渲染组件。

import React, { useContext, useState } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const theme = useContext(MyContext);
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

更多资源

想要了解更多关于 React Hooks 的信息，可以访问我们的 React Hooks 教程。

<center><img src="https://cloud-image.ullrai.com/q/React Hooks/" alt="React Hooks"/></center>