hook-useContext

示例代码

import React,{useState,useContext,useEffect} from 'react'

const Themes={
    light: {
        foreground: "#000000",
        background: "#eeeeee"
      },
    dark: {
        foreground: "#ffffff",
        background: "#222222"
      }
}

const ThemeContext=React.createContext(Themes.light)

function Content(){
    const [themes,setThemes]=useState(Themes.dark)
    function handleSetThemes(){
        console.log(themes)
        if (themes=="light"){
            setThemes(Themes.dark)
        }else{
            setThemes(Themes.light)
        }
    }

    return (
        <ThemeContext.Provider value={themes}>
            <Toolbar changeTheme={handleSetThemes} />
        </ThemeContext.Provider>
    )
}


function Toolbar(props) {
    function handleClick(){
        console.log('click')
    }
    return (
      <div className="123" onClick={props.changeTheme}>
        <ThemedButton  />
        {/* 为什么不能直接加在组件上呢 */}
      </div>
    );
}

function ThemedButton(){
    const theme=useContext(ThemeContext)
    return (
        <button 
            style={{ background: theme.background, color: theme.foreground }}
        >
            I am styled by theme context!
        </button>
    )
}
export default Content

useContext 实现数据全局托管

import React,{useState,useContext,useEffect,useReducer} from 'react'
import ContextTest from './contextTest'
export const TodosDispatch = React.createContext(null);
//这个context 需要对外暴露，使用的地方需要引入
function reducer(state,action){
    switch(action.type){
        case 'add':
            return {count:state.count+action.value}
        case 'sub':
            return {count:state.count-action.value}
        default:
            throw new Error();
    }
}
//设置操作数据的规则

const initState={count:0}
//初始数据

function Content(){
    
    const [state,dispatch]=useReducer(reducer,initState)
    //注册数据和dispatch方法
    return (
        <>
            {state.count}
            <button onClick={()=>dispatch({type:'add',value:10})}>+</button>
            <button onClick={()=>dispatch({type:'sub',value:5})}>-</button>
  //本地使用disoatch方法
            <TodosDispatch.Provider value={dispatch}>
//通过context把方法广播出去
                <ContextTest todos={state.count}></ContextTest>
            </TodosDispatch.Provider>
        </>
    )
}

export default Content

使用

import React,{ useContext } from 'react'
import {TodosDispatch} from './content'
export default function DeepChild(props){
    const dispatch=useContext(TodosDispatch)
//找到想要寻找的方法
    return (
        <>
            {props.todos}
            <button onClick={()=>{dispatch({type:'add',value:10})}}>+</button>
//在另一个组件使用
            <button onClick={()=>{dispatch({type:'sub',value:5})}}>--</button>
        </>
    )
}

//但是这个数据多了是不是有点不好管理
//但是也有一些不足的地方是在根源上的,即 context, 在同一个页面中 如果有多个使用 context 的地方
那么如果一旦dispatch ,其他的所有地方也会触发render 造成资源的浪费,小项目还好,大项目仍旧不可取