React Context 實現原理詳解

一、Context是什麼？

Context是React提供的一種跨組件層級共享數據的方式。它解決了React組件之間數據傳遞的諸多問題。

1.1 基本用法

const ThemeContext = React.createContext('light');
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
function Toolbar(props) {
  return (
    <div>
     <ThemedButton />
    </div>
  );
}
class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

在上述示例中，我們創建一個名為ThemeContext的Context對象並將其默認值設置為「light」。在App組件中提供了ThemeContext的值為「dark」，然後將Toolbar組件渲染到App組件中。Toolbar組件沒有直接使用ThemeContext，而是將其傳遞給子組件ThemedButton，可以通過在ThemedButton類中使用上下文的方式來獲取ThemeContext的值，並將其作為Button組件的theme屬性傳遞給它。

1.2. createContext的返回值

React.createContext方法返回一個Context對象。你可以通過Context對象的Provider組件提供一個值，並通過Consumer組件消費該值。例如：

const MyContext = React.createContext(defaultValue);

其中defaultValue在Consumer中沒有對應Provider的時候被使用。如果你沒有提供defaultValue，而在消費Context的時候沒有找到Provider，那麼React將會拋出一個錯誤。

二、Context的原理

2.1. Context簡介

在React中，Context允許你在組件之間共享值，而不必顯式地傳遞一個prop。對於許多組件需要訪問相同數據源的情況，Context可以幫助你更輕鬆地傳遞數據。

2.2. Provider

首先，我們需要Provider來提供需要共享的數據。我們需要使用createContext來創建一個上下文，然後在Provider中傳入一個值。這將會創建出一個新的上下文。接下來的步驟中，所有子組件都可以讀取這個上下文的值。

示例代碼：

const Context = createContext('default value');

class Parent extends React.Component {
  render() {
    return (
      <Context.Provider value="new value">
        <Child />
      </Context.Provider>
    );
  }
}

function Child() {
  return <Grandchild />;
}

function Grandchild() {
  const value = useContext(Context);
  return <div>{value}</div>;
}

2.3. Consumer

當數據被包含在上下文中時，後代組件可以使用Consumer獲取它。Consumer是一個函數組件，它接收上下文中的值作為參數，並返回表示所呈現內容的React元素。

示例代碼：

const Context = createContext('default value');

class Parent extends React.Component {
  render() {
    return (
      <Context.Provider value="new value">
        <Child />
      </Context.Provider>
    );
  }
}

function Child() {
  return <Grandchild />;
}

function Grandchild() {
  return (
    <Context.Consumer>
      {value => <div>{value}</div>}</Context.Consumer>
  );
}

三、實現一個簡單的Context

3.1 實現Provider

首先，我們需要在Context對象上定義一個Provider組件。Provider組件需要接收一個value屬性，這個屬性表示共享的值，它應該被傳遞給所有後代組件。

示例代碼：

const MyContext = React.createContext();

class MyProvider extends React.Component {
  render() {
    return(
      <MyContext.Provider value={{foo: 'bar'}}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

3.2 實現Consumer

Consumer組件使用高階組件模式，從Provider組件中獲取共享值，然後將值傳遞給被渲染的組件。這裡我們採用render props模式來實現Consumer。

示例代碼：

const MyContext = React.createContext();

class MyProvider extends React.Component {
  render() {
    return(
      <MyContext.Provider value={{foo: 'bar'}}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

class MyConsumer extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {value => this.props.children(value)}
      </MyContext.Consumer>
    );
  }
}

class App extends React.Component {
  render() {
    return(
      <MyProvider>
        <MyConsumer>
          {value => <div>The foo value is {value.foo}.</div>}
        </MyConsumer>
      </MyProvider>
    );
  }
}

四、結論

本文介紹了React Context的實現原理。Context是React提供的一種跨組件層級共享數據的方式，它解決了React組件之間數據傳遞的諸多問題。使用createContext方法創建出一個Context對象，然後我們可以在應用中使用Provider和Consumer組件綁定數據。Provider組件提供需要共享的數據，而Consumer組件可以從Provider中獲取共享的值。實現了Provider和Consumer組件之後，我們可以在應用中實現跨組件之間的數據傳遞。