react中 useContext 和useReducer的使用

开发者 · 2024-9-28 14:39:33

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

react中 useContext 和useReducer的使用

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品