easycodesniper

blog by chen qiyi

useContext

context

在开发中，父组件可能需要通过多层中间组件将 props 传递给某个子孙组件，这个传递 props 的过程就会变得十分冗长

context可以在组件树中不需要props 传递数据，而是将数据直达所需的组件

context可以让父组件为其内部的整个组件树人提供数据

使用context

使用context需要三个步骤：

  • 创建一个context
  • 在需要数据的组件中使用创建的context
  • 在指定数据的组件中提供context

创建一个context

新建一个 js 文件，在其中创建constext并导出他

使用createContext()来创建一个 context，需要给他传入一个默认值

1
2
3
import { createContext } from "react";

export const MyContext = createContext(1); // 创建并导出一个context

使用context

在需要用到数据的组件中，引入useContextHook 以及 创建的context

1
2
3
4
5
6
7
import { useContext } from 'react';
import { MyContext } from './MyContext.js';

function Son() [
  const context = useContext(MyContext) // useContext 告诉 React 想要读取 myContext
  // 现在，得到的context就是myContext的默认值
]

提供context

在父组件中使用context provider将子组件包裹起来，就可以提供context给他们

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useState } from 'react';
import { MyContext } from './MyContext.js';

function Parent() {

  let [ name, setName ] = useState('easy code sniper')

  return (
    <div>
      <MyContext.Provider value={name}>
      <MyContext.Provider>
    </div>
  )
}

这告诉 React：“如果在Parent组件中的任何子组件请求MyContext，给他们这个name。”
组件会使用 UI 树中在它上层最近的那个MyContext.Provider传递过来的值。

useContext

语法：const value = useContext(SomeContext)

  • SomeContext就是先前用createContext创建的 context，context 本身不包含信息，它只代表你可以提供或从组件中读取的信息类型。

返回值

useContext为调用它的组件返回 context 的值。它的返回值被确定为传递给树中调用组件上方最近的SmeContext.Provider的value。
如果没有这样的 provider，那么返回值将会是为创建该 context 传递给createContext的defaultValue。返回的值始终是最新的，如果 context 发生变化，React 会自动重新渲染读取 context 的组件。

React Hooks