React Hooks 入门教程三：useContext、createContext使用，父子组件传递状态数据

本教程是React Hooks系统教程中的一部分。

createContext 能够创建组件间共享的上下文状态。然后通过 useContext 在组件中使用这些状态

createContext 用法

只需要一个defaultValue默认值参数，可不填。

const MyContext = React.createContext(defaultValue)

useContext 示例

比如上文中的例子，我们把显示计数器放到了一个叫 ExampleChild 的子组件中，然后创建一个全局CountContext来共享计数器，然后通过 CountContext.Provider 向子组件传递状态。

ExampleContext.js:

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

const CountContext = createContext();

function ExampleChild() {
  let count = useContext(CountContext);

  return (
    <div style={{ backgroundColor: '#ff0', padding:'24px' }}>
      <h3>ExampleChild: count in child {count}</h3>
    </div>
  )
}

export function ExampleContext() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <hr/><h1>useContext </h1>
      <CountContext.Provider value={count}>
        <ExampleChild/>
      </CountContext.Provider>
      <button onClick={()=>{ setCount(count+1) }}>Click me in Parent</button>
    </div>
  )
}

完整示例：