react使用createContext()和useContext()实现组件传值

官方文档

使用场景

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

案例

效果图

使用

...
const MyContext = React.createContext(defaultValue);

// 父
<MyContext.Provider value={/* 某个值 */}>

// 子孙
<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
...

目录结构

代码

LayoutContext.js

import React from 'react'

const LayoutContext = React.createContext()

export default LayoutContext

index.jsx

import React from 'react'
import { Button } from 'antd'
import Sub from '@/pages/Sub/index'
import LayoutContext from '@/store/LayoutContext'

export default function Layout() {
  const [num, setNum] = React.useState(1)
  const element = React.useRef(null)

  const addNum = (arg) => setNum((num) => num + arg)

  return (
    <LayoutContext.Provider value={{ num, setNum, addNum }}>
      <h2 ref={element}>数字为：{num}</h2>
      <Button type="primary" onClick={() => addNum(1)}>
        加一
      </Button>
      <Sub num={num} childFn={addNum}></Sub>
    </LayoutContext.Provider>
  )
}

Sub.jsx

import React from 'react'
import { Button } from 'antd';
import List from '@/pages/List/list'
import './sub.less'

function Sub(props) {
  return (
    <div className='Sub'>
      <h2>Sub组件：{props.num}</h2>
      <Button type="primary" onClick={()=>props.childFn(3)}>加3</Button>
      <List></List>
    </div>
  )
}

export default Sub

List.jsx

未使用使用useContext()

import React, { useContext } from 'react'
import { Button } from 'antd'
import './list.less'
import LayoutContext from '@/store/LayoutContext'

export default function List() {
  // const { num, setNum, addNum } = useContext(LayoutContext)
  const [arr] = React.useState(['刘备', '关羽', '张飞'])

  return (
    <LayoutContext.Consumer>
      {({ num, setNum, addNum }) => {
        return (
          <div className="List">
            <h2>list组件:{num}</h2>
            <Button className='mr-10' type="primary" onClick={() => addNum(10)}>
              加10
            </Button>
            <Button type="primary" onClick={() => setNum(num - 10)}>
              减10
            </Button>
            <ul>
              {arr.map((item, index) => {
                return (
                  <React.Fragment key={index}>
                    <span className="ml-10">
                      第{index + 1}
                      {item}
                    </span>
                  </React.Fragment>
                )
              })}
            </ul>
          </div>
        )
      }}
    </LayoutContext.Consumer>
  )
}

使用useContext()

import React, { useContext } from 'react'
import { Button } from 'antd'
import './list.less'
import LayoutContext from '@/store/LayoutContext'

export default function List() {
  const { num, setNum, addNum } = useContext(LayoutContext)
  const [arr] = React.useState(['刘备', '关羽', '张飞'])

  return (
    <div className="List">
      <h2>list组件:{num}</h2>
      <Button className="mr-10" type="primary" onClick={() => addNum(10)}>
        加10
      </Button>
      <Button type="primary" onClick={() => setNum(num - 10)}>
        减10
      </Button>
      <ul>
        {arr.map((item, index) => {
          return (
            <React.Fragment key={index}>
              <span className="ml-10">
                第{index + 1}
                {item}
              </span>
            </React.Fragment>
          )
        })}
      </ul>
    </div>
  )
}