react易忘知识点

组件通信

1.父传子

function Children(props){
  return(
    <div>我是孩子:{props.msg}</div>
  )
}


function App(){
  const msg = '传递给孩子的东西'
  return(
    <div>
      <Children msg={msg}></Children>
    </div>
  )
}


export default App

2.子传父

就是在传递props的时候，传递一个函数

import { useEffect } from "react"
import { useState } from "react"

function Children(props){
  const msg = '传递给父亲的东西'
  const {onMsg} = props
  useEffect(()=>{
    onMsg(msg)
  },[])
  return(
    <div>我是孩子:</div>
  )
}


function App(){
  let [data, setData] = useState()
  const msg = (value)=>{
    setData(value)
  }
  return(
    <div>
      <Children onMsg={msg}></Children>
      <h6>{data}</h6>
    </div>
  )
}


export default App

3.使用createContext()进行跨级通信

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

const MsgContext = createContext()

function Demo1(){
  return(
    <div>demo1
      <Demo2></Demo2>
    </div>
  )
}

function Demo2(){
  const msg = useContext(MsgContext)
  return(
    <div>demo2:{msg}</div>
  )
}

function App(){
  const msg = "我是父组件"
  return(
    <div>
      <MsgContext.Provider value={msg}>
        this is App
        <Demo1></Demo1>
      </MsgContext.Provider>
    </div>
  )
}


export default App

redux的使用

首先安装依赖：

npm i react-redux @reduxjs/toolkit

创建store文件夹，用于配置redux

创建modules目录，用于存放具体模块，创建index.js文件用于集中导出

例如创建一个counterStore.js用于存放计数信息

import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
    name: "counter",
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态的方法
    reducers: {
        inscrement(state){
            state.count++
        },
        descrement(state){
            state.count--
        },
    }
})

// 解构actions
const {inscrement,descrement} = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer

// 导出
export {inscrement,descrement}
export default reducer

index.js:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counterStore"

const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})

export default store

入口文件main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import store from './store/index.js'
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

使用：

import { useSelector,useDispatch } from "react-redux"
import { inscrement,descrement } from "./store/modules/counterStore"

function App(){
  const {count} = useSelector(state=>state.counter)
  const dispatch = useDispatch()
  
  return(
    <div>
      <div>使用redux进行状态管理</div>
      <div>当前状态{count}</div>
      <button style={{marginRight:10}} onClick={()=>dispatch(inscrement())}>+</button>
      <button onClick={()=>dispatch(descrement())}>-</button>
    </div>
  )
}


export default App

路由知识

安装依赖：

npm i react-router-dom

新建一个router目录,再新建一个index.js文件用以配置路由

import {createBrowserRouter} from "react-router-dom"
import Home from "../pages/Home"
import About from "../pages/About"

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home/>
    },
    {
        path: "/about",
        element: <About/>
    }
])

export default router

main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {RouterProvider} from "react-router-dom"
import router from "./router"

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
)