React Hooks 的基本用法

故事背景

React Hooks 的推出让我从类组件转向了函数式组件。我总结了 useState 和 useEffect 的基本用法及其注意事项。

设计思路

使用 useState 管理状态。
使用 useEffect 处理副作用。
展示 Hooks 的简单应用。
项目结构搭建

bash

npx create-react-app hooks-demo --template=typescript

Hooks 示例

tsx

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

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
    return () => {
      document.title = 'React App';
    };
  }, [count]);

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