React中context的用法

1.使用context

• 首先要引入 React 内置的 React Context API 📦
• 然后创建 provider
• 最后创建 consumer，函数式组件使用hook可以不用创建consumer

2.文件目录

3.使用createContext创建context

// context -> index.jsx
import { createContext } from 'react'

export default createContext({})

4.使用Provider将context传递给子孙组件

被Provider包裹的所有组件不管层次多深，都可以取得value值

// home -> index.jsx
import ListContext from '../../context'
import TodoList from './Table'

const { Provider } = ListContext

return (
    <Div id="table">
      <Div id="header">
        <Button onClick={Logout}>Logout</Button>
      </Div>
      <Provider value={{ todoList, setTodoList }}>
        <Div id="box">
          <Input id="searchInput" onChange={(e) => { setSearch(e.target.value) }}></Input>
          <Button id="searchBtn" onClick={searchItems}>Search</Button>
          <Dialog />
        </Div>
        <TodoList />
      </Provider>
    </Div>
  )

5.子孙组件接收祖组件的数据

// home -> table -> index.jsx
import React, { useContext } from 'react'
import ListContext from '../../../context'

let ListContextValue = useContext(ListContext)
const { todoList, setTodoList } = ListContextValue

6.总结

使用Context可以避免组件的层层props嵌套的问题。但是它使用consumer拿值时,会多一层组件。得益于useContext hook我们可以不使用consumer组件，直接拿到值。一般的使用场景,如拿全局的class前缀，或者国际化，Ui主题颜色等。

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。