6、react-useReducer初体验、useReducer和useContext结合使用

最新推荐文章于 2024-08-19 21:36:26 发布

山川pro

最新推荐文章于 2024-08-19 21:36:26 发布

阅读量453

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/rrrrrdong/article/details/122323418

版权

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

初次体验

import React, { useState, useEffect, useReducer } from 'react';
export const Demo = () => {
	const [conut, setCount] = useReducer((state, action) => {
	    switch (action) {
	        case 'increment':
	            return state + 1
	        case 'decrement':
	            return state - 1
	        default:
	            return state
	    }
	}, 0)
	return (
		<>
		    <span>{conut}</span>
		    <Button onClick={() => { setCount('increment') }}>+</Button>
		    <Button onClick={() => { setCount('decrement') }}>-</Button>
		</>
	)

}

useReducer和useContext结合使用

主页面组件

import React from 'react'
import { Color } from './color'
import { Content } from './content'
const Demo = () => {
    return (
        <Color>
            <Content></Content>
        </Color>
    )
}
export default Demo

Color 组件

import React, { createContext, useReducer } from 'react'
const ColorContext = createContext(null) //提供全局ColorContext

const reducer = (state, action) => {
    if (action?.type == 'UPDATE_COLOR') return action.color
    return state
}
const Color = props => {
    const [color, dispatch] = useReducer(reducer, 'red')
    return (
        <ColorContext.Provider value={{ color, dispatch }}>
            {props.children}
        </ColorContext.Provider>
    )
}
export {
    ColorContext,
    Color
}

Content组件

import React, { useContext } from 'react'
import { Button } from 'antd'
import { ColorContext } from './color'

export const Content = () => {
    const { color, dispatch } = useContext(ColorContext)
    return (
        <>
            <p style={{ color }}>你看我是什么颜色</p>
            <Button onClick={() => { dispatch({ type: 'UPDATE_COLOR', color: 'green' }) }}>变绿</Button>
            <Button onClick={() => { dispatch({ type: 'UPDATE_COLOR', color: 'yellow' }) }}>变黄</Button>
        </>
    )
}