Context上下文

React 上下文 Context

为什么要使用上下文

（理解）

没有上下文的话，在组件间传递数据，必须逐层传递属性，导致中间的组件本来不需要这个属性，为了传递它也要定义这个属性。造成的问题：

• 使用繁琐
• 破坏组件重用性
• 不利于移植
• 对于第三方库更加是不支持的

需要有一个环境里的变量，通过Context在任何位置都可以取得这个变量的值。

Context应用场景

• 网站的主题
• 用户登录信息
• 网站语言的设置
• 服务类型的全局工具
• 共享给环境使用的数据、对象

Context的使用

创建Context对象

// 写在模块的顶层
const Context = React.createContext(默认值)

默认值是在没有此上下文的环境里使用，不要误认为是此上下文的value=undefined时候使用。

提供Context环境

Provider - 供应者（写，给）

<Context.Provider value={...}>
  ...
</Context.Provider>

消费上下文

Consumer - 消费者（读，取）

1. 类组件中用contextType

缺点：只能消费一个上下文，只能在类组件使用

static contextType = ...

class Component extends React.Component {
  static contextType = Context
  render() {
    this.context.username
    ...
  }
}

2. 用Context.Consumer消费

类组件和函数组件都可以用

优点：

1. 消费多个上下文
2. 类组件函数组件都可以使用

缺点：

1. 只能在render里使用
2. 繁琐

render() {
  return <Context.Consumer>
  { user => {
    return <span>我是：{user.username}</span>
  }}
  </Context.Consumer>
}

3. 使用useContext函数

优点：

1. 简洁
2. 可以使用多个Context

缺点：

1. 只能运用在函数组件里

import {useContext} from 'react'

const user = useContext(UserContext)

Context应该存什么值

不经常改变的值但需要在很多地方都使用到的全局属性放在context里

• 用户的登录信息
• 网站的主题配置（夜间模式）

组件重新渲染（不完全的情况）

• props 改变
• state 改变
• context 改变的时候，消费它的组件会重新渲染