阿狗工具

useContext和useReducer 可以用来减少层级使用, useContext，可以理解为供货商提供一个公共的共享值，然后下面的消费者去接受共享值，只有一个供货商，而有多个消费者，可以达到共享的状态改变的目的。
useReducer 可以和 useContext 配合使用，useReducer 可以理解为所有的公共组件共享状态。有多个组件，但是都要共享同一个状态和改变状态后的值，这时候就需要公共的useReducer来改变了。
下面通过代码具体讲解如何使用useContext 和useReducer

一. useContext基本使用可以分为固定的三步

1.根组件导入并调用createContext方法，得到Context对象

import React, { useContext } from 'react'
const GlobalContext = React.createContext()

2.在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据

<GlobalContext.Provider value={
            {
                title: "12313",
                info: info,
                changeInfo: (value) => {
                    setInfo(value)
                }
            }
        }
>
</GlobalContext.Provider>

3.需要获取公共数据的后代组件：

a) 导入useContext,并按需导入根组件中导出的Context对象；
b) 调用useContext(第一步中导出的Context) 得到value的值

a) 
const value = useContext(GlobalContext)
return (
      <div onClick={() => { value.changeInfo(context); }}>
        {value.title}
    </div>
    )

b)
return (
        <GlobalContext.Consumer>
            {
                (value) =>
                    <div className='business-product-details' >
                        {value.info}
                    </div>
            }
        </GlobalContext.Consumer>
    )

4.完整例子

import React, { useState, useEffect, useContext } from 'react'
import axios from 'axios'
import './css/index.css'
const GlobalContext = React.createContext()
export default function app() {
    const [list, setlist] = useState([])
    const [info, setInfo] = useState("")

    useEffect(() => {
        axios.get("./test.json").then(res => {
            setlist(res.data[2].list)

        })
    }, [])
    return (
        <GlobalContext.Provider value={
            {
                title: "12313",
                info: info,
                changeInfo: (value) => {
                    setInfo(value)
                }
            }}>
            <div className="w-warp">
                <div className="business-why">
                    <div className='business-ul'>
                        {

                            list && list.map((item, index) =>
                                <ReasonLi key={index} {...item} ></ReasonLi>
                            )
                        }
                    </div>
                    <ReasonDetails />
                </div>
            </div>
        </GlobalContext.Provider>
    )
}
function ReasonLi(props) {
    let { name, url, context } = props
    const value = useContext(GlobalContext)
    return (
      <div className="business-product" onClick={() => { value.changeInfo(context); }}>
        <div className='business-img'><img src={url} alt={name} /></div>
        <h5>{name}</h5>
    </div>
    )
}

function ReasonDetails() {
    return (
        <GlobalContext.Consumer>
            {
                (value) =>
                    <div className='business-product-details' >
                        {value.info}
                    </div>
            }
        </GlobalContext.Consumer>
    )


}

实际效果

二. useReducer基本使用可以分为固定的三步

1.页面引入 useReducer 并且创建相关对象

import React, { useReducer} from 'react'
父组件创建
 const [state, dispatch] = useReducer(reducer, intialState)

2.页面根组件定义reducer的函数和初始状态值intialState

reducer里面包含两个参数(prevState,action) 之前状态值和 操作改变的类型
定义初始状态值 intialState 可以是对象包含多个值

const reducer=(prevState,action) => {
   console.log(prevState,acton)  // count:0 ,action.type:minus
}
const intialState = {
    count:0
}

const intialState = {
    count:0
}

3.父组件定义相关的dispatch状态改变操作类型

<button onClick={() => {
              dispatch({
                  type: "minus"
              })
 }}>-</button>

4.完整例子

import React, { useReducer } from 'react'
const reducer=(prevState,action) => {
    const newState = {...prevState}
    switch (action.type) {
        case 'minus':
            newState.count--;
            return newState ;
       case 'add':
        newState.count++;
            return newState  
        
        default: return newState
    }
}
const intialState = {
    count:0
}

export default function app() {
  const [state,dispatch] = useReducer(reducer,intialState)
  return ( 
      <div>
          <button onClick={() => {
              dispatch({
                  type: "minus"
              })
          }}>-</button>
          {state.count}
          <button onClick={() => {
              dispatch({
                type: "add"
            })
          }}>+</button>
       </div>
  )
}

这个一个简单的数字加加和减减，根据的是action的类型判断状态的改变。下面看一个例子是useReducer结合useContext使用的例子。如果共享状态值和共享改变后的状态值。
如下效果

效果

其中两个按钮是组件1，child2 和child3 为组件2 和组件3 ，通过组件1的操作改变组件2和组件3的值共享之前的状态和改变之后的状态，具体demo如下

import React, { useReducer, useContext } from 'react'
const intialState = {
    a: "1111",
    b: "22222"
}
const reducer = (prevState, action) => {
    let newState = { ...prevState }
    switch (action.type) {
        case "child2":
            newState.a = "aaaa";
            return newState;
        case "child3":
            newState.b = "bbbb";
            return newState;
        default: return newState;
    }

}
const GlobalContext = React.createContext()
export default function app() {
    const [state, dispatch] = useReducer(reducer, intialState)
    return (
        <GlobalContext.Provider value={
            {
                state: state,
                dispatch: dispatch
            }
        }>
            <div>
                <Child1></Child1>
                <Child2></Child2>
                <Child3></Child3>
            </div>
        </GlobalContext.Provider>)
}

function Child1() {
    const value = useContext(GlobalContext)
    return (<div>
        <button onClick={() => {
            value.dispatch({ type: "child2" })
        }}>改变child2</button>
        <button onClick={() => {
            value.dispatch({ type: "child3" })
        }}>改变child3</button>
    </div>
    )
}

function Child2() {
    const value = useContext(GlobalContext)
    return (
        <div style={{ background: "yellow" }}>
            Child2 {value.state.a}
        </div>
    )
}

function Child3() {
    const value = useContext(GlobalContext)
    return (
        <div style={{ background: "blue" }}>
            Child3  {value.state.b}
        </div>

    )
}