使用React Hooks进行状态管理

什么是React Hooks？

React Hooks是React 16.8引入的新特性，它允许你在不编写class组件的情况下使用状态和其他React特性。

useState

useState是一个用于在函数组件中添加状态的Hook。以下是一个简单的示例：

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是一个用于在函数组件中执行副作用的Hook。以下是一个示例：

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

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

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

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

总结

React Hooks使得在函数组件中管理状态和副作用变得更加简单和直观，鼓励你在项目中尝试使用它们。

思维导图

graph TD;
    A[使用React Hooks进行状态管理] --> B[什么是React Hooks]
    A --> C[useState]
    A --> D[useEffect]