React Context 源码剖析

前端

2023-12-15 07:29:29

React Context源码浅析

在React中，Context API提供了一种在组件树中共享数据的方法，而无需显式地传递props。其核心数据结构是一个称为valueStack的栈，负责存储Context信息。

valueStack：Context的栈结构

valueStack是一个数组，在beginWork阶段，当Fiber节点为ContextProvider时，会将当前Context的旧值压入栈，并赋予新值。这确保了子组件可以访问到最新版本的Context。

当此Fiber节点执行到completeWork阶段时，会将旧值弹出栈，恢复到之前的Context值。这样，子组件中的Context值就始终保持最新。

Context的消费和提供

当一个组件需要消费Context值时，它可以使用useContext Hook。useContext Hook会从valueStack中获取当前Context值，并将其作为Hook的返回值。

当一个组件需要提供Context值时，它可以使用Context.Provider组件。Context.Provider会创建一个新的Context，并将当前的Context值作为其value prop。

优化：备忘Context值

为了优化Context的性能，React引入了备忘Context值的机制。当一个组件消费Context值时，React会创建一个备忘值，并将其存储在组件实例上。

在下一次渲染中，如果Context值没有改变，组件将使用备忘值，从而避免不必要的重新渲染。

实际案例：主题切换

让我们以主题切换为例来说明Context的用法。

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

const App = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      {/* 应用中的其他组件 */}
    </ThemeContext.Provider>
  );
};

export default App;

// MyComponent.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const MyComponent = () => {
  const theme = useContext(ThemeContext);

  return (
    // 根据theme渲染组件
  );
};

export default MyComponent;