react-memo

父

import React from 'react'
import Demo from './Demo'
export default function Index() {
    const [xainghong,setxiaohong]=React.useState('小红正在待客')
    const [zhiling,setzhiling]=React.useState('志玲正在待客')
  return (
    <div>
        <button onClick={()=>{
            setxiaohong(new Date().getTime()+'小红向我们走来')
        }}>小红</button>
        <button onClick={()=>{
            setzhiling(new Date().getTime()+'志玲向我们走来')
        }} >志玲</button>
        <h2>{zhiling}</h2>
        <hr />
        <Demo name={xainghong}>{xainghong}</Demo>
    </div>
  )
}

子

import React from 'react'

export default function Demo({ name, children }) {
    function changehong() {
        console.log('小红向我们走来了');
        return name + '小红向我们走来了'
    }
    const action = React.useMemo(()=>changehong(name),[name])
    return (
        <div>
            {children}
            <hr />
            <div>{action}</div>
        </div>
    )
}

react-context

a.js

import React from 'react'

export const CountContext = React.createContext()

index

import React from 'react'

export default function Demo({ name, children }) {
    function changehong() {
        console.log('小红向我们走来了');
        return name + '小红向我们走来了'
    }
    const action = React.useMemo(()=>changehong(name),[name])
    return (
        <div>
            {children}
            <hr />
            <div>{action}</div>
        </div>
    )
}

demo

import React from 'react'
import {CountContext} from '../a'
export default function Demo() {
    let count=React.useContext(CountContext)
    console.log(count);
  return (
    <div>13
        {count}
    </div>
  )
}

react-reducer

import React, { useReducer } from 'react'

export default function App() {
  const [count,countDispatch] = useReducer((state, action) => {
    switch (action) {
      case 'add':
        return state + 1
      case 'sub':
        return state - 1
      default:
        return state
    }
  }, 0)
  return (
    <div>
     <h2>{count}</h2>
     <button onClick={()=>{
       countDispatch('add')
     }}>+</button>
     <button onClick={()=>{
       countDispatch('sub')
     }}>-</button>
    </div>
  )
}

react-context和react-reducer自定义redux

color.js

import {createContext,useReducer} from 'react'


export const ColorContext=createContext({})

export const UPDTE_COLOR="UPDTE_COLOR"

const reducer=(state,action)=>{
     switch(action.type){
         case UPDTE_COLOR:
             return action.color
             default :
             return state
     }
}

export const Color=(props)=>{
 const [color,dispatchColor]=useReducer(reducer,'blue')
    return (
        <ColorContext.Provider value={{color,dispatchColor}}>
        {props.children}
        </ColorContext.Provider>
    )
}
 

index

import React from 'react'
import ShowArea from './showArea'
import Button from './Button'
import { Color } from './color'
export default function index() {
    return (
        <div>
            <Color>
                <Button></Button>
                <ShowArea></ShowArea>
            </Color>

        </div>
    )
}

ShowArea

import React,{useContext} from 'react'
import {ColorContext} from './color'
export default function ShowArea() {
  const {color}=useContext(ColorContext)
  console.log(color);
  return (
    <div style={{color:color}}>字体颜色{color}</div>
  )
}

Button

import React,{useContext} from 'react'
import {ColorContext,UPDTE_COLOR} from './color'
export default function Button() {
    const {dispatchColor}=useContext(ColorContext)
  return (
    <div>
        <button onClick={()=>{
            dispatchColor({type:UPDTE_COLOR,color:'red'})
        }}>红色</button>
        <button onClick={()=>{
            dispatchColor({type:UPDTE_COLOR,color:'yellow'})
        }}>黄色</button>
    </div>
  )
}