reactive

一、跨层级传递

import { useContext, createContext, useState } from "react"

const msgContext = createContext()
function A(){
  const m = useContext(msgContext)
  return (
    <div>
      A-{m}
      <B></B>
    </div>
  )
}
function B(){
  const m = useContext(msgContext)
  return (
    <div>B-{m}</div>
  )
}

function App(){
  const message = 'my name is msg'
  return (
    <div>
      <msgContext.Provider value={message}>
        <A ></A>
      </msgContext.Provider>  
    </div>
  )
}

export default App 

二、useEffect

function App(){
  const [num,setNum] = useState(0)
  // 没有依赖项[]，初始+组件更新，会执行
  // 空数组[]，初始，会执行
  // 传入依赖项，初始+依赖项，会执行
  useEffect(()=>{
    console.log("副作用函数执行了")
  },[num])
  return (
    <div>
     <button onClick={()=>{setNum(num+1)}}>{num}</button>
    </div>
  )
}

三、清除副作用

function Son () {
  useEffect(()=>{
    const timer = setInterval(()=>{
      console.log("定时任务执行中...")
    },1000)
    // 清除副作用
    return () => {
      clearInterval(timer)
    }
  },[])
  return <div>this is son</div>
}

function App () {
    // 通过条件渲染模拟组件卸载
    const [show, setShow] = useState(true)
    return (
        <div>
            {show && <Son />}
            <button onClick={() => setShow(false)}>卸载Son组件</button>
        </div>
    )
}

四、自定义hook

函数名称用以use打头

function useToggle(){
  const [show, setShow] = useState(true)
  const toggle = () => setShow(!show)
  return {
    show,
    toggle
  }
}

function App () {
    const {show,toggle} = useToggle()
    return (
        <div>
            {show && <div>is dispaly</div>}
            <button onClick={toggle}>卸载Son组件</button>
        </div>
    )
}

 

 

五、redux

npx create-react-app react-redux

npm i @reduxjs/toolkit react-redux

目录结构

 counterStore.js

import { createSlice } from "@reduxjs/toolkit";
const createrStore = createSlice({
  name: 'counter',
  initialState: {
    counte: 10
  },
  reducers: {
    add(state){
      state.counte++
    },
    jian(state){
      state.counte--
    }
  }
})

const {add,jian} = createrStore.actions
const counterReducer = createrStore.reducer
export {add,jian}
export default counterReducer

state/index.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore"
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export default store

index.js

import store from './store'
import { Provider } from 'react-redux';

<React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
 </React.StrictMode>

App.js

import { useSelector,useDispatch } from "react-redux"
import { add,jian } from "./store/modules/counterStore"
function App () {
    const {counte} = useSelector(state => state.counter)
    const dispath = useDispatch()
    return (
        <div>
          {counte}
          <button onClick={()=>dispath(add())}>+</button>
          <button onClick={()=>dispath(jian())}>-</button>
        </div>
    )
}


export default App