Hooks-useContext

useContext

1. 说明

• useContext，能够让我们在函数组件中使用context的能力, 替换之前的 context.Consumer

2. 语法

2.1 语法格式

const value = useContext(MyContext);

2.2 语法说明

• 参数 : 一个 context对象
• 返回值 : 返回 Provider 提供的 value 值

2.3 使用说明

• 回忆 :
  • 之前在类组件件中 , 使用 context实现从上到下跨多层组件传递数据

1. 通过 createContext() 创建 context对象
   const myContext =  React.createContext() 
   
2. 在context对象中，提供了一个自带的 Provider 组件, 用来提供数据。
   <myContext.Provider value={ 数据 }>
      ....
   </myContext.Provider>

3. 在context对象中，提供了一个自带的 Consumer 组件, 用来接收数据。
    <myContext.Consumer>
      {  data => data 就是传递过来的数据 }
   </myContext.Consumer>

• 在函数组件中, 使用 useContext hook 可以实现三个功能
  • 功能1 : 实现从上到下跨多层组件传递数据
  • 功能2 : 兄弟组件数据交互 (共享数据)
  • 功能3 : 配合 useReducer 组合 redux

3. 使用

3.1 功能1-跨多层组件传递数据

• Context : context.js

// context.js 
import React from 'react'

export default React.createContext()

• 父组件 : index.js

// 引入 context
import myContext from './demo1/context'

// 提供数据
<myContext.Provider value={'哈哈哈'}>
   ...
   <Child></Child>
</myContext.Provider>

• 子组件 : child.js

// 引入 context
import myContext from './context'

//2. 创建组件
const Child = () => {
  // 获取 context 里面的数据
  const val = useContext(myContext)
  
  return <div>子组件 - { val }</div>
}

3.2 功能2-封装 Provider-共享数据

• Context : context.js

import React, { useState } from 'react'

// 导出1 : context
export const myContext = React.createContext()                      # 导出   myContext

// 导出2 : 函数组件
// 重定义 Provider
export function MyProvider({ children }) {                          # 导出   函数组件
  // 初始值
  const [count, setCount] = useState(0)

  // 组合要传递的共享数据   
  const value = {
    count,
    increment: () => setCount(count + 1),
    decrement: () => setCount(count - 1)
  }

  return <myContext.Provider value={value}>{children}</myContext.Provider>
}

• Counter1 组件

//1. 引入包
import React, { useContext } from 'react'
// 引入 context
import { myContext } from './context'                             # 引入 myContext

//2. 创建组件
const Counter1 = () => {
  const { counter, increment, decrement } = useContext(myContext) # 获取共享数据

  return (
    <div>
      <div>函数组件1 - {counter}</div>
      <button onClick={() => increment()}>函数组件 +1</button>
      <button onClick={() => decrement()}>函数组件 -1</button>
    </div>
  )
}

//3. 渲染DOM
export default Counter1

• Counter2 组件

//1. 引入包
import React, { useContext } from 'react'

import { myContext } from './context'                              # 引入 myContext

//2. 创建组件
const Counter2 = () => {
  
  const { counter, increment, decrement } = useContext(myContext)   # 获取共享数据

  return (
    <div>
      <div>函数组件2 - {counter}</div>
      <button onClick={() => increment()}>函数组件 +1</button>
      <button onClick={() => decrement()}>函数组件 -1</button>
    </div>
  )
}

//3. 渲染DOM
export default Counter2

• 父组件

//1. 引入包
import React from 'react'
import Counter1 from './demo2/Counter1'
import Counter2 from './demo2/Counter2'

// 引入  Provider
import { MyProvider } from './context'                            # 引入 MyProvider

//2. 创建组件
const App = () => {
  return (
    <div>
                                                               #   包裹着要共享数据的组件 
      <MyProvider>
        <Child1></Child1>
        <Child2></Child2>
      </MyProvider>
    
    </div>
  )
}
//3. 导出组件
export default App

3.3 功能3- useContext 和 useReducer 组合 redux

• 文件1 : context.js

import React from 'react'
import { useReducer } from 'react'

// 导出 context
export const myContext = React.createContext()

// 第一个 reducer
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}


// 导出 Provider
export const MyProvider = ({ children }) => {
  const [count, dispatch] = useReducer(reducer, 0)

  const values = {
    count,
    dispatch
  }

  return <myContext.Provider value={values}>{children}</myContext.Provider>
}

• 文件2 : 父组件 index.js

//1. 引入包
import React from 'react'
import Counter1 from './Counter1'
import Counter2 from './Counter2'
import { MyProvider } from './context'

//2. 创建组件
const App = () => {
  return (
    <div>
      <div>函数组件</div>
        <MyProvider>
          <Counter1></Counter1>
          <Counter2></Counter2>
        </MyProvider>
    </div>
  )
}

//3. 导出组件
export default App

• 文件3 : 子组件 countert1.js

//1. 引入包
import React from 'react'
import { useContext } from 'react'
import { myContext } from './context'

//2. 创建组件
const Counter1 = () => {
  const { count, dispatch } = useContext(myContext)

  return (
    <div>
      <div>Counter1 - {count}</div>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
    </div>
  )
}

//3. 导出组件
export default Counter1

• 文件4 :子组件 counter2.js

//1. 引入包
import React from 'react'
import { useContext } from 'react'
import { myContext } from './context'

//2. 创建组件
const Counter2 = () => {
  const { count, dispatch } = useContext(myContext)

  return (
    <div>
      <div>Counter2 - {count}</div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
 
    </div>
  )
}

//3. 导出组件
export default Counter2