Hooks - useState 和 useEffect

# Web 开发# React# 移动开发

Hooks - useState 和 useEffect

**什么是 React Hooks？**

Hooks 是 React v16.8 中引入的特殊函数，它允许功能组件使用 React 特性，例如状态和生命周期方法，而无需编写类组件。

**1. useState 钩子**

useState 钩子用于向功能组件添加状态。

它提供：

  • 用于存储数据的状态变量。
  • 用于更新状态的 setter 函数。语法：
    • const [state, setState] = useState(initialValue);

    **例子：**

    import React, { useState } from 'react';

export default function MyComponent() {
  const [name, setName] = useState("Guest");
  const [age, setAge] = useState(0);

  const updateName = () => setName("Damilare");
  const updateAge = () => setAge(age + 2);

  return (
    
    
      
    Name: {name}
    
      

      
    Age: {age}
    
      
    
    
  );
}

    **2. useEffect Hook**

    `useEffect` 钩子允许你在功能组件中执行副作用。示例包括：

  • 从 API 获取数据。
  • 订阅事件。
  • 直接更新 DOM（例如，更改 document.title）。语法：
    • useEffect(callback, [dependencies]);
  • 回调：要执行的函数。
  • [dependencies]：效果所依赖的值的数组。

    • **基于依赖关系的行为：**

  • useEffect(() => { ... }); 每次重新渲染组件后运行。
  • useEffect(() => { ... }, []); 仅在挂载时运行（如 componentDidMount）。
  • useEffect(() => { ... }, [value]); 在安装时以及值发生变化时运行。

    • **例子：**

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

export default function UseEffectHook() {
  const [count, setCount] = useState(0);
  const [color, setColor] = useState("green");

  // Runs on mount and whenever count or color changes
  useEffect(() => {
    document.title = `Count: ${count} - Color: ${color}`;
  }, [count, color]);

  const incrementCount = () => setCount(count + 1);
  const decrementCount = () => setCount(count - 1);
  const toggleColor = () => setColor(color === "green" ? "red" : "green");

  return (
    <>
      
    {`Count: ${count}`}
    
      
      
      
    
  );
}

    **useEffect 的用例：**

  • 事件监听器：添加/删除监听器（例如，window.addEventListener）。
  • 获取数据：当组件安装或状态改变时获取 API 数据。
  • DOM 更新：更新 document.title 或其他 DOM 属性。
  • 清理：处理清理任务，例如取消订阅听众。

    • **清理示例：**

    useEffect(() => {
  const timer = setInterval(() => console.log('Running...'), 1000);

  return () => {
    clearInterval(timer); // Cleanup on unmount
  };
}, []);

    **要点：**

  • 功能组件中的状态：使用 useState 作为状态变量。
  • 副作用：使用 useEffect 与外界互动或对状态/道具的变化做出反应。
  • 依赖数组：始终指定依赖数组以避免不必要的渲染或无限循环。
  • 清理：始终清理 useEffect 中的订阅、间隔或侦听器。借助 useState 和 useEffect，构建 React 应用程序变得更加轻松、直观。

    • 日复一日。

    理解再理解。