api使用介绍

1，使用方式一

import React, { createContext } from 'react'

import ReactDOM from 'react-dom/client'

const Context = createContext()
function Child() {
  return <Context.Consumer>{value => <div>{value}</div>}</Context.Consumer>
}
function App() {
  return (
    <Context.Provider value="Hello World this is child">
      <Child />
    </Context.Provider>
  )
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

2，使用方式二

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

import ReactDOM from 'react-dom/client'

const Context = createContext()
function Child() {
  const value = useContext(Context)
  return <div>{value}</Cdiv>
}
function App() {
  return (
    <Context.Provider value="{name: 'this is child'}">
      <Child />
    </Context.Provider>
  )
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

综上所述，createContext就是一个小型的状态容器。你可以创建一个状态容器，然后通过Context.Provider给状态容器里面添值，然后在Context.Consumer或者useContext里面使用这个值。

createContext源码分析

我觉得createContext的源码逻辑应该不难理解。其核心，我猜就是构建一个容器出来，然后，通过给conetxt.provider赋值，从而改变容器的状态。然后在context.consumer中，在渲染的时候，特殊处理容器里面的值，从而可以让context.consumer里面传参的逻辑走得通。usecontext就更简单了，直接把context里面的值给取出来。，并保持和context里面的值的同步。