React 学习指南 - 第八天

今天，我们将深入探索 React 组件通信、自定义 Hook 和 错误边界。这些知识点能帮助你构建更可复用、更健壮的应用。

1. React 组件通信方式

在 React 中，组件之间的数据传递方式主要有以下几种：

1.1 父组件向子组件传递 props

这是最基础的通信方式，父组件通过 props 传递数据给子组件。

function Child({ message }) {
  return <h2>{message}</h2>;
}

function Parent() {
  return <Child message="Hello from Parent!" />;
}

🔹 优点：简单、直观
🔹 缺点：如果组件嵌套层级较深，可能会出现“props drilling”问题

1.2 子组件向父组件传递数据（回调函数）

父组件可以传递一个函数给子组件，子组件调用该函数并传递数据回去。

function Child({ onSendData }) {
  return <button onClick={() => onSendData("Data from Child")}>Send Data</button>;
}

function Parent() {
  const handleReceiveData = (data) => {
    console.log("Received:", data);
  };

  return <Child onSendData={handleReceiveData} />;
}

🔹 适用场景：子组件需要向父组件传递事件或数据

1.3 兄弟组件通信（使用 Context 或全局状态管理）

如果两个组件是兄弟关系，通常需要一个中间层来共享数据，例如 Context API 或 Redux。

✅ 使用 Context API：

import React, { createContext, useContext, useState } from 'react';

const DataContext = createContext();

function Parent() {
  const [data, setData] = useState("Initial Data");

  return (
    <DataContext.Provider value={{ data, setData }}>
      <SiblingOne />
      <SiblingTwo />
    </DataContext.Provider>
  );
}

function SiblingOne() {
  const { setData } = useContext(DataContext);
  return <button onClick={() => setData("Updated by SiblingOne")}>Update Data</button>;
}

function SiblingTwo() {
  const { data } = useContext(DataContext);
  return <h2>Data from Context: {data}</h2>;
}

🔹 适用场景：组件层级较深，且需要在多个组件间共享状态

2. 自定义 Hook

React 的 自定义 Hook 让我们可以抽离组件逻辑，提高代码复用性。

2.1 封装 useLocalStorage Hook

让我们创建一个 Hook，用于在 localStorage 中存取数据：

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useLocalStorage;

使用 useLocalStorage：

function App() {
  const [theme, setTheme] = useLocalStorage("theme", "light");

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Toggle Theme</button>
    </div>
  );
}

🔹 适用场景：抽离可复用的逻辑，例如本地存储、API 请求、表单状态管理等

3. React 错误边界

在 React 组件中，错误可能会导致整个组件树崩溃。React 提供了 Error Boundary（错误边界），用于捕获子组件的错误并显示回退 UI，而不会导致整个应用崩溃。

3.1 创建 Error Boundary 组件

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error caught in boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

3.2 使用 Error Boundary 包裹组件

function BuggyComponent() {
  throw new Error("Oops! Something went wrong.");
}

function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

🔹 适用场景：错误处理，防止整个应用崩溃

🔹 明天预告：React 进阶优化技巧（懒加载、性能分析、React Profiler） 🚀