React Hooks 实践：从 useState 到 useContext 的深入分析

深入分析useState和useContext

React Hooks 彻底改变了 React 组件的状态管理和函数复用，让函数组件拥有类组件的功能。

useState：功能组件的状态管理

介绍：

useState是React中最基本的Hook，它允许我们为功能组件添加状态。 useState 是 React 提供的内置 Hook，用于向功能组件添加本地状态。它接受初始值作为参数并返回一个数组。数组的第一个元素是当前状态，第二个元素是更新状态的函数。

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

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

useState返回的setCount函数用于更新状态。每次调用 setCount 时，React 都会重新渲染组件并根据新的状态值重新生成虚拟 DOM，然后执行高效的 DOM diff，最后更新实际 DOM。

深入了解

useState 的工作原理、状态更新的异步性及其对性能的影响。

• 状态更新是异步的，这意味着如果在同一事件循环中多次调用 setCount，React 将仅使用最后一个值。

• useState 不支持复杂对象的浅层比较。如果需要根据之前的状态更新状态，可以使用setCount的函数形式，如setCount(prevCount => prevCount 1).

高级应用

结合useEffect来处理副作用，例如数据获取和清理。

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

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1 id="Data-Retrieved-Successfully">Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}