React相关一览

组件home

import React, { Component } from "react";
import { Link } from "react-router-dom";
import IndexComponets from "../componets/IndexComponets";

export default class home extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      title: "hello word",
    };
  }

  linkPage = (event) => {
    event.preventDefault()
    console.log(event)
    console.log(this.inputRef);

  };

  componentDidMount() {
    console.log("componentDidMount");
  }

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  clickIndedx=()=>{
    console.log("clickIndedx")
  }

  updateDataFun = (data) => {
    console.log(data)
  };

  render() {
    const { title } = this.state;
    return (
      <div>
        <Link to={"/about"}>{title}</Link>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.linkPage}>点击</button>
        <IndexComponets
          content="IndexComponets" 
          clickIndedx={this.clickIndedx}
          updateDataFun={this.updateDataFun}
         ></IndexComponets>
      </div>
    );
  }
}

组件IndexComponets

import React, { Component } from "react";
import { useNavigate } from "react-router-dom";

export default class IndexComponets extends Component {
  controlDataFun = () => {
    const { updateDataFun } = this.props;
    updateDataFun("i am Children ...");
    
    
    //1.路由跳转及传参(Index页面)
    const navavigate=useNavigate()
    //URLSearchParams具有移动端兼容性
    const param=new URLSearchParams()
    param.set("name",2)
    param.set("age",13)
    navavigate("/about?"+URLSearchParams.toString())

    //2.接收参数

  };

  render() {
    const { content, clickIndedx } = this.props;
    return (
      <>
        <div>{content}</div>
        <button onClick={clickIndedx}>点击Index</button>
        <button onClick={this.controlDataFun}>点击子组件</button>
      </>
    );
  }
}

标签式路由== 特殊位置App组件

import React, { Component } from "react";
import { Route, Routes } from "react-router-dom";

const Home = React.lazy(() => import("./page/home"));
const About = React.lazy(() => import("./page/about"));

export default class app extends Component {
  render() {
    return (
    <React.Suspense fallback>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
      </Routes>
    </React.Suspense>
    );
  }
}

- 根组件==index组件

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./app";
import { BrowserRouter } from "react-router-dom";

import store from "./store";
import { Provider } from "mobx-react";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
       <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

路由表式导航

import { createBrowserRouter } from "react-router-dom";

import Home from '../page/home.jsx';

//Brower路由： createBrowserRouter 
//Hash路由： createHashRouter 
const router=createBrowserRouter([
    {

        path:'/',
        element:<Home/>
       
    }
])

export default router

- 根组件==index组件

import React from "react";
import ReactDOM from "react-dom/client";
import {RouterProvider } from "react-router-dom";
import router from "./Router/router";

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

Mobx状态管理(导出文件)

import { SchoolName} from "./SchoolName";


const Store=new SchoolName()

export default{
    Store
}

Mobx状态管理(数据管理)

import { makeObservable, observable } from "mobx";



export class SchoolName {
    
    name = ""

    constructor(value){
        makeObservable(this,{
            name:observable
        })
    }

    increment=()=>{

    }
  
}

Redux状态管理(RTK)--出口文件

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

import Goods from "./Goods";

const Store=configureStore({
    reducer:{
        GoodsState:Goods
    }
})

export default Store

Redux状态管理

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

const initialState={
    name:"张三"
}

export const Goods=createSlice({
    name:"GoodsState",
    initialState,
    reducers:{
        increament:(state,actions)=>{

        }
    }
})


export const {increament}=Goods.actions

export default Goods.reducer

- 根组件==index组件

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./app";
import { BrowserRouter } from "react-router-dom";

import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
       <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);