React 源码解析（二）

五、事件系统

事件委托机制
- React 并没有为每个 DOM 元素直接绑定事件监听器，而是采用事件委托的方式。在应用加载时，React 在文档根节点（通常是 document）上挂载一个单一的事件监听器。例如，对于一个包含多个按钮的列表，不会为每个按钮分别添加 click 事件监听器，而是在文档根节点监听 click 事件。
- 当事件触发时，事件会沿着 DOM 树向上冒泡，直到被文档根节点的事件监听器捕获。React 会根据事件的目标（event.target）以及组件的虚拟 DOM 结构，找到真正触发事件的组件实例，并调用相应的事件处理函数。例如，如果在一个按钮上触发了 click 事件，事件冒泡到文档根节点，React 通过对比 event.target 与虚拟 DOM 中各元素的关系，确定是哪个按钮组件触发的事件，进而调用该按钮组件的 onClick 处理函数。
合成事件（SyntheticEvent）
- React 对原生事件进行了封装，创建了合成事件对象。合成事件提供了跨浏览器的兼容性，并且在事件处理完成后会自动释放资源。例如，无论在哪个浏览器环境下，event.preventDefault() 和 event.stopPropagation() 等方法的行为都是一致的。
- 合成事件对象具有与原生事件对象相似的属性和方法，但它是一个跨浏览器的抽象。在 React 组件的事件处理函数中，接收的就是合成事件对象。例如：

function MyButton() {
    const handleClick = (event) => {
        console.log(event.target);
        event.preventDefault();
    };
    return <button onClick={handleClick}>Click me</button>;
}

这里的 event 就是合成事件对象。React 内部会将原生事件包装成合成事件，然后再传递给事件处理函数。这样做不仅保证了跨浏览器的一致性，还能对事件进行统一管理和优化，比如批量更新机制，在同一事件循环内的多次状态更新会被批量处理，减少不必要的重新渲染。

六、Context（上下文）

Context 的创建与使用
- Context 提供了一种在组件树中共享数据的方式，避免了通过多层组件逐层传递 props 的繁琐过程。首先通过 React.createContext 创建一个 Context 对象，例如：

const MyContext = React.createContext();

然后可以使用 Provider 组件来提供数据，在其内部的组件树中的任何组件都可以通过 Consumer 组件或 useContext Hook 获取数据。例如：

function App() {
    const value = 'Hello, Context!';
    return (
        <MyContext.Provider value={value}>
            <ChildComponent />
        </MyContext.Provider>
    );
}

function ChildComponent() {
    return (
        <MyContext.Consumer>
            {value => <div>{value}</div>}
        </MyContext.Consumer>
    );
}

在函数式组件中，也可以使用 useContext Hook 更简洁地获取 Context 中的数据：

import { useContext } from'react';

function AnotherChildComponent() {
    const value = useContext(MyContext);
    return <div>{value}</div>;
}

Context 的更新机制
- 当 Provider 的 value 属性发生变化时，所有使用该 Context 的 Consumer 组件或依赖 useContext 的组件都会重新渲染。React 通过追踪 Provider 的 value 的引用变化来判断是否需要更新。例如，如果 Provider 的 value 是一个对象，当对象的属性值发生变化但对象的引用不变时，使用该 Context 的组件不会重新渲染。为了确保组件能响应 Context 的变化，通常建议使用不可变数据结构来更新 value。比如，可以使用 Object.assign({}, oldValue, newValues) 或 {...oldValue,...newValues } 的方式来创建一个新的对象作为 value，这样会改变对象的引用，从而触发依赖该 Context 的组件重新渲染。

七、Hook 的实现原理

状态 Hook（useState）
- useState 是 React 提供的用于在函数式组件中添加状态的 Hook。它返回一个数组，第一个元素是当前状态值，第二个元素是用于更新状态的函数。例如：

import { useState } from'react';

function Counter() {
    const [count, setCount] = useState(0);
    const increment = () => setCount(count + 1);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

在 React 内部，Hook 是通过链表结构来管理的。每个函数式组件都有一个对应的 Hook 链表，当组件渲染时，React 会按照顺序依次处理链表中的 Hook。useState Hook 在初始化时会将初始状态值存储在链表节点中，并返回当前状态值和更新函数。当更新函数被调用时，React 会更新链表节点中的状态值，并触发组件重新渲染。

副作用 Hook（useEffect）
- useEffect 用于在函数式组件中执行副作用操作，如数据获取、订阅事件等。它接收一个回调函数和一个依赖数组作为参数。例如：

import { useEffect } from'react';

function DataFetcher() {
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://example.com/api/data');
            const result = await response.json();
            console.log(result);
        };
        fetchData();
        return () => {
            // 清理副作用，例如取消订阅
        };
    }, []);
    return <div>Fetching data...</div>;
}

当组件渲染时，React 会将 useEffect 的回调函数放入一个队列中。在组件渲染完成后，React 会遍历这个队列并依次执行回调函数。如果提供了依赖数组，React 会在每次渲染时对比依赖数组的值，只有当依赖数组中的值发生变化时，才会重新执行 useEffect 的回调函数。在回调函数中返回的函数会在组件卸载或依赖变化时被调用，用于清理副作用，如取消定时器、解绑事件监听器等。

通过对 React 事件系统、Context 和 Hook 原理的深入解析，能更全面地理解 React 在处理复杂交互、数据共享和组件逻辑复用方面的工作机制，有助于开发出更高效、可维护的 React 应用。

文章版权归作者所有，未经允许请勿转载。

THE END