react Hook useContext()

• useContext

接收一个上下文对象（React.createContext的返回值，可以理解为全局比变量）并返回该上下文的当前值。当前的上下文值由上层组件中距离当前组件最近的属性<MyContext.Provider>决定value。

当上层最近<MyContext.Provider>更新时，该 Hook 会触发重渲染，并使用最新提交给MyContext提供者的上下文value。即使祖先使用React.memo或使用组件，也会在其自身shouldComponentUpdate组件使用useContext时重新渲染。

• 使用方法：

1. 创建createContex。

const context = createContext(null);

2. 使用context.Provider包裹根组件，在value中传入值。

function A () {
  const [count,setCount] = useState(0)
  return(
    // 指定上下文使用范围，使用provider,并传入读数据和写入据
    <context.Provider value={{count, setCount}}>
      这是A组件
      <B></B>
    </context.Provider>
  )
}

3. 使用useContext接受上下文(上下文可以理解为全局变量)，这样子组件就可以使用value中共享的值。

function C () {
  const { count, setCount }= useContext(context)
  return(
    <div>
      这是C组件: {count}  
      <button onClick={() =>  { setCount( count 1 )}}>-</button>
    </div>
  )
}

• 完整试例

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

// 创造一个上下文
const context = createContext(null);

function A () {
  const [count, setCount] = useState(0)
  return(
    // 指定上下文使用范围，使用provider,并传入读数据和写入据
    <context.Provider value={{count, setCount}}>
      这是A组件
      <B></B>
    </context.Provider>
  )
}

function B () {
  return(
    <div>
      这是B组件
      <C></C>
    </div>
  )
}

function C () {
  const { count, setCount }= useContext(context)
  return(
    <div>
      这是C组件: {count}  
      <button onClick={() =>  { setCount( count 1 )}}>-</button>
    </div>
  )
}

这篇好文章是转载于：学新通技术网