react中 useContext 和useReducer的使用

一. useContext基本使用可以分为固定的三步
1.根组件导入并调用createContext方法，得到Context对象
import React, { useContext } from 'react'
const GlobalContext = React.createContext()
2.在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据

{
setInfo(value)
}
}
}
>

3.需要获取公共数据的后代组件：
a) 导入useContext,并按需导入根组件中导出的Context对象；
b) 调用useContext(第一步中导出的Context) 得到value的值

a)
const value = useContext(GlobalContext)
return (

)
b)
return (

{
(value) =>

}

)
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 (

)
}

function ReasonDetails() {
return (

{
(value) =>

}

)

}
实际效果
二. 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状态改变操作类型

{
dispatch({
type: "minus"
})
}}>-
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 (

)
}
这个一个简单的数字加加和减减，根据的是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 (

)
}

function Child1() {
const value = useContext(GlobalContext)
return (

)
}

function Child2() {
const value = useContext(GlobalContext)
return (

)
}

function Child3() {
const value = useContext(GlobalContext)
return (

)

}