React介绍

开发环境创建

npx create-react-app react-basic （项目名）

JSX基础

什么是JSX

概念：JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式

优势：

HTML的声明式模版写法
JavaScript的可编程能力

JSX的本质

JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中使用

JSX高频场景-JS表达式

在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

使用引号传递字符串
使用JS变量
函数调用和方法调用
使用JavaScript对象 :::warning 注意：if语句、switch语句、变量声明不属于表达式，不能出现在{}中 :::

const message = 'this is message'

function getAge(){
  return 18
}

function App(){
  return (
    <div>
      <h1>this is title</h1>
      {/* 1.字符串识别 */}
      {'this is str'}
      {/* 2.变量识别 */}
      {message}
      {/* 3.函数调用 渲染为函数的返回值 */}
      {getAge()}
       {/* 4.使用对象 */}
      <div style={{ color: "red" }}>123</div>
    </div>
  )
}

JSX高频场景-列表渲染

在JSX中可以使用原生js种的map方法 实现列表渲染

const list = [
  {id:1001, name:'Vue'},
  {id:1002, name: 'React'},
  {id:1003, name: 'Angular'}
]

function App(){
  return (
    <ul>
      {list.map(item=><li key={item.id}>{item}</li>)}
    </ul>
  )
}

JSX高频场景-条件渲染

在React中，可以通过逻辑与运算符&&、三元表达式(?:) 实现基础的条件渲染

const flag = true
const loading = false

function App(){
  return (
    <div>
      {flag && <span>123</span>}
      {loading ? <span>123</span>:<span>567</span>}
    </div>
  )
}

JSX高频场景-复杂条件渲染

需求：列表中需要根据文章的状态适配解决方案：自定义函数 + 判断语句

const type = 1  // 0|1|3

function getArticleJSX(){
  if(type === 0){
    return <div>无图模式模版</div>
  }else if(type === 1){
    return <div>单图模式模版</div>
  }else(type === 3){
    return <div>三图模式模版</div>
  }
}

function App(){
  return (
    <div>
      { getArticleJSX() }
    </div>
  )
}

React的事件绑定

基础实现

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

function App(){
  const clickHandler = ()=>{
    console.log('button按钮点击了')
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

使用事件参数

在事件回调函数中设置形参e即可

function App(){
  const clickHandler = (e)=>{
    console.log('button按钮点击了', e)
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

function App(){
  const clickHandler = (name)=>{
    console.log('button按钮点击了', name)
  }
  return (
    <button onClick={()=>clickHandler('jack')}>click me</button>
  )
}

:::warning 注意：不能直接写函数调用，这里事件绑定需要一个函数引用 :::

同时传递事件对象和自定义参数

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

function App(){
  const clickHandler = (name,e)=>{
    console.log('button按钮点击了', name,e)
  }
  return (
    <button onClick={(e)=>clickHandler('jack',e)}>click me</button>
  )
}

React组件基础使用

组件基础使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可

// 1. 定义组件
function Button(){
  return <button>click me</button>
}

// 2. 使用组件
function App(){
  return (
    <div>
      {/* 自闭和 */}
      <Button/>
      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}

组件状态管理-useState

基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

import { useState } from "react";
 {/* 
 	1.count定义一个响应式的变量
 	2.setCount改变count的值，重新渲染视图
 */}
function App() {
  const [count, setCount] = useState(0);
  const handleClck = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClck}>{count}</button>;
}

export default App;

组件的基础样式处理

React组件基础的样式控制有俩种方式，行内样式和class类名控制

<div style={{ color:'red'}}>this is div</div>

//index.css
.foo{
  color: red;
}

import './index.css'

function App(){
  return (
    <div>
      <span className="foo">this is span</span>
    </div>
  )
}

动态样式

//tabItem 固定类名
//active  要添加的类名

className={`tabItem ${type === item.type ? "active" : ""}`}

classnames库

npm install classnames

const classNames = require('classnames');

classNames('tabItem', {active:type === item.type}); // tabItem:静态类名，{key:valu}   key:动态类名  vlaue:判断条件

React表单控制

受控绑定

概念：使用React组件的状态（useState）控制表单的状态

function App(){
  const [value, setValue] = useState('')
  return (
    <input 
      type="text" 
      value={value} 
      onChange={e => setValue(e.target.value)}
    />
  )
}

非受控绑定

概念：通过获取DOM的方式获取表单的输入数据

function App(){
  const inputRef = useRef(null)

  const onChange = ()=>{
    console.log(inputRef.current.value)
  }
  
  return (
    <input 
      type="text" 
      ref={inputRef}
      onChange={onChange}
    />
  )
}

React组件通信

父子通信
兄弟通信
跨层通信

父子通信-父传子

实现步骤

父组件传递数据 - 在子组件标签上绑定属性
子组件接收数据 - 子组件通过props参数接收数据

function Son(props){
  return <div>{ props.name }</div>
}


function App(){
  const name = 'this is app name'
  return (
    <div>
       <Son name={name}/>
    </div>
  )
}

props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX

props是只读对象 子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改

特殊的prop-chilren

场景：当我们把内容嵌套在组件的标签内部时，组件会自动在名为children的prop属性中接收该内容

function Son(props) {
  return <div>{props.children}</div>;  //123
}

function App() {
  return (
    <div>
      <Son>
        <span>123</span>
      </Son>
    </div>
  );
}

父子通信-子传父

核心思路：在子组件中调用父组件中的函数并传递参数

function Son(props){
  return (
    <div>
      <button onClick={()=>props.onGetMsg('hahahha')}>send</button>
    </div>
  )
}

function App(){
  const getMsg = (msg)=>console.log(msg)
  
  return (
    <div>
      {/* 传递父组件中的函数到子组件 */}
       <Son onGetMsg={ getMsg }/>
    </div>
  )
}

兄弟组件通信

实现思路: 借助 状态提升 机制，通过共同的父组件进行兄弟之间的数据传递

A组件先通过子传父的方式把数据传递给父组件App

App拿到数据之后通过父传子的方式再传递给B组件

import { useState } from "react"

function A ({ onGetAName }) {
  // Son组件中的数据
  const name = 'this is A name'
  return (
    <div>
      this is A compnent,
      <button onClick={() => onGetAName(name)}>send</button>
    </div>
  )
}

function B ({ name }) {
  return (
    <div>
      this is B compnent,
      {name}
    </div>
  )
}

function App () {
  const [name, setName] = useState('')
  const getAName = (name) => {
    setName(name)
  }
  return (
    <div>
      this is App
      <A onGetAName={getAName} />
      <B name={name} />
    </div>
  )
}

export default App

跨层组件通信

实现步骤：

使用 createContext方法创建一个上下文对象Ctx
在顶层组件（App）中通过 Ctx.Provider 组件提供数据
在底层组件（B）中通过 useContext 钩子函数获取消费数据

// App -> A -> B

import { createContext, useContext } from "react";

// 1. createContext方法创建一个上下文对象

const MsgContext = createContext();

function A() {
  return (
    <div>
      <B />
    </div>
  );
}

function B() {
  // 3. 在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext);
  return <div>{msg}</div>;
}

function App() {
  const msg = "this is app msg";
  return (
    <div>
      {/* 2. 在顶层组件 通过Provider组件提供数据,所以组件放里面 */}
      <MsgContext.Provider value={msg}>
        <A />
      </MsgContext.Provider>
    </div>
  );
}

export default App;

React副作用管理-useEffect

概念理解

useEffect用于在React组件中创建不是由事件引起而是由渲染本身引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等 (类似生命周期)

基础使用

import { useEffect } from "react";
useEffect(() => {}, []);

说明：

参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次

useEffect依赖说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现

依赖项	副作用功函数的执行时机
没有依赖项（不传）	组件初始渲染 + 组件更新时执行(视图更新)
空数组依赖	只在初始渲染时执行一次
添加特定依赖项（定义的变量）	组件初始渲染 + 依赖项变化时执行

清除副作用

概念：组件卸载是自动执行的return函数,这个过程就是清理副作用

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行

import { useEffect, useState } from "react"

function Son () {
  // 1. 渲染时开启一个定时器
  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>
  )
}

export default App

自定义Hook实现

概念：自定义Hook是以 use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

import { useState } from "react";
// 封装自定义Hook
//useToggle：名称自定义，把需要的变量和方法return出去即可
function useToggle() {
  const [value, setValue] = useState(true);

  const toggle = () => setValue(!value);

  return [value, toggle]; //这里是对象和数组都可以，和引用保持一致即可
}

function App() {
  const [value, toggle] = useToggle();
  return (
    <div>
      {value && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  );
}

export default App;

React Hooks使用规则

只能在组件中或者其他自定义Hook函数中调用
只能在组件的顶层调用，不能嵌套在if、for、其它的函数中

Redux介绍

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行作用：通过集中管理的方式管理应用的状态

Redux与React - 环境准备

1. 配套工具

在React中使用redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux

Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
react-redux - 用来链接 Redux 和 React组件的中间件

2. 配置基础环境

npm i @reduxjs/toolkit  react-redux

3. store目录结构设计

通常集中状态管理的部分都会单独创建一个单独的 store 目录
应用通常会有很多个子store模块，所以创建一个 modules 目录，在内部编写业务分类的子store
store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store

目录结构
```
store
    --modules
        --aaa.js
        --bbb.js
    --index.js
```

Redux与React - 实现counter

1. 使用React Toolkit 创建 counterStore

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

const counterStore = createSlice({
  name: "counter",
  // 初始化state
  initialState: {
    count: 1,
  },
  // 修改状态的方法 同步方法 支持直接修改
  reducers: {
    inscrement(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    addToNum(state, action) {
      state.count = action.payload;
    },
  },
});

// 解构出来actionCreater函数
const { inscrement, decrement, addToNum } = counterStore.actions;
// 获取reducer
const reducer = counterStore.reducer;

// 以按需导出的方式导出actionCreater
export { inscrement, decrement, addToNum };
// 以默认导出的方式导出reducer
export default reducer;

index.js

import { configureStore } from '@reduxjs/toolkit'

import counterReducer from './modules/counterStore'

export default configureStore({
  reducer: {
    // 注册子模块
    counter: counterReducer
  }
})

2. 为React注入store

react-redux负责把Redux和React 链接起来，内置 Provider组件通过 store 参数把创建好的store实例注入到应用中，链接正式建立

根目录下的index.js

// 导入store
import store from './store'
// 导入store提供组件Provider
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  // 提供store数据
  <Provider store={store}>
    <App />
  </Provider>
)

4. React组件使用store中的数据

在React组件中使用store中的数据，需要用到一个钩子函数 - useSelector，它的作用是把store中的数据映射到组件中

import { useEffect } from "react";
import {useSelector } from "react-redux";

function App() {
  const { count } = useSelector((state) => state.counter);
  return (
    <div className="App">
      {count}
    </div>
  );
}
export default App;

5. React组件修改store中的数据

React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的dispatch函数，使用样例如下：

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
// 导入actionCreater
import { inscrement, decrement, addToNum } from "./store/modules/counter";
function App() {
  const { count } = useSelector((state) => state.counter);
 
  const dispatch = useDispatch();
 
  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(inscrement())}>+</button>
      
      
    </div>
  );
}

export default App;

Redux与React - 提交action传参

需求：修改数据的时候传递参数

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
// 导入actionCreater
import {  addToNum } from "./store/modules/counter";
function App() {
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div className="App">
      {count}
      <button onClick={() => dispatch(addToNum(10))}>add To 10</button>
    </div>
  );
}
export default App;

Redux与React - 异步action处理

实现步骤

创建store的写法保持不变，配置好同步修改状态的方法
单独封装一个函数，在函数内部return一个新函数，在新函数中 2.1 封装异步请求获取数据 2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
组件中dispatch的写法保持不变

代码实现

stroe/modules/channel.js

import { createSlice } from '@reduxjs/toolkit'
import axios from 'axios'

const channelStore = createSlice({
  name: 'channel',
  initialState: {
    channelList: []
  },
  reducers: {
    setChannelList (state, action) {
      state.channelList = action.payload
    }
  }
})


// 创建异步
const { setChannelList } = channelStore.actions

// 封装一个函数 在函数中return一个新函数 在新函数中封装异步
// 得到数据之后通过dispatch函数 触发修改
const fetchChannelList = () => {
  return async (dispatch) => {
    const res = await axios.get('xxxxx')
    dispatch(setChannelList(res.data.data.channels))
  }
}

export { fetchChannelList }

const channelReducer = channelStore.reducer
export default channelReducer

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchChannelList } from './store/channel'

function App () {
   const dispatch = useDispatch();
  // 使用数据
  const { channelList } = useSelector(state => state.channel)
  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])

  return (
    <div className="App">
      <ul>
        {channelList.map(task => <li key={task.id}>{task.name}</li>)}
      </ul>
    </div>
  )
}

export default App

路由

1. 创建路由开发环境

# 安装ReactRouter包
npm i react-router-dom

2. 快速开始

pages/Login/index.js

//新建路由组件
const Login = () => {
  return <div>login</div>;
};
export default Login;

router/index.j

//配置路由
import Login from "../pages/Login/index";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login></Login>,
  },
]);
export default router;、

跟目录index.js


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

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router}/>
)
// <App />   删除APP替换RouterProvider

路由导航

1. 声明式导航

声明式导航是指通过在模版中通过 <Link/> 组件描述出要跳转到哪里去

About/index.js

//通过Link的方式调整到login
import { Link } from "react-router-dom";
const About = () => {
  return (
    <div>
      <Link to="/login">跳转</Link>
    </div>
  );
};
export default About;

2. 编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转

import { useNavigate } from "react-router-dom";
const About = () => {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate("/login")}>跳转</button>
    </div>
  );
};
export default About;

导航传参

1.useSearchParams传参

import { useNavigate } from "react-router-dom";
const About = () => {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate("/login?id=1&&name=foo")}>跳转</button>
    </div>
  );
};
export default About;

import { useSearchParams } from "react-router-dom";
//通过useSearchParams接受参数
const Login = () => {
  const [params] = useSearchParams();
  const id = params.get("id");
  return <div>login-{id}</div>;
};
export default Login;

2.params传参

import { useNavigate } from "react-router-dom";
const About = () => {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate("/login/123")}>跳转</button>
    </div>
  );
};
export default About;

router配置

import Login from "../pages/Login/index";
import About from "../pages/About/index";

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

const router = createBrowserRouter([
  {
    path: "/login/:id", //通过:id增加占位符
    element: <Login></Login>,
  },
  {
    path: "/about",
    element: <About></About>,
  },
]);
export default router;

import { useParams } from "react-router-dom";
//通过useParams获取传递的参数
const Login = () => {
  const params = useParams();
  const id = params.id;
  return <div>login-{id}</div>;
};
export default Login;

嵌套路由配置

1. 嵌套路由配置

实现步骤

使用 children属性配置路由嵌套关系

使用 <Outlet/> 组件配置二级路由渲染位置

router/index.js

//children声明二级路由
import Layout from "../pages/Layout/index";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout></Layout>,
    children: [
      {
        path: "first",
        element: <div>first</div>,
      },
    ],
  },
]);
export default router;

Layout

//Outlet  声明路由的位置

import { useNavigate } from "react-router-dom";
import { Outlet } from "react-router-dom";
const About = () => {
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate("/first")}>跳转二级路由</button>
      <Outlet></Outlet>
    </div>
  );
};
export default About;

2. 默认二级路由

当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true

import Layout from "../pages/Layout/index";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout></Layout>,
    children: [
      {
        index: true,//默认显示这个
        element: <div>first</div>,
      },
    ],
  },
]);
export default router;

3. 404路由配置

场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染

实现步骤：

准备一个NotFound组件
在路由表数组的末尾，以*号作为路由path配置路由

import Login from "../pages/Login/index";
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login></Login>,
  },
  {
    path: "*",  //以*号作为路由path配置路由
    element: <div>213123</div>,
  },
]);

export default router;

4. 俩种路由模式

各个主流框架的路由常用的路由模式有俩种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建

路由模式	url表现	底层原理	是否需要后端支持
history	url/login	history对象 + pushState事件	需要
hash	url/#/login	监听hashChange事件	不需要

项目优化

项目预览

npm i -g serve //用来启动本地服务器
 serve -s ./build  //在build目录中开启服务器

优化-路由懒加载

使用 lazy 方法导入路由组件
使用内置的 Suspense 组件渲染路由组件

import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense } from 'react'

const Article = lazy(() => import('@/pages/Article'))

const router = createBrowserRouter([
  {
          path: 'article',
          element: (
              <Suspense fallback={'加载中'}>
            <Article />
        </Suspense>
        )
    },
  
])

export default router

打包-打包体积分析

通过分析打包体积，才能知道项目中的哪部分内容体积过大，方便知道哪些包如何来优化 使用步骤

安装分析打包体积的包：npm i source-map-explorer
在 package.json 中的 scripts 标签中，添加分析打包体积的命令
对项目打包：npm run build（如果已经打过包，可省略这一步）
运行分析命令：npm run analyze
通过浏览器打开的页面，分析图表中的包体积

"scripts": {
  "analyze": "source-map-explorer 'build/static/js/*.js'",
}

优化-配置CDN

分析说明：通过 craco 来修改 webpack 配置，从而实现 CDN 优化 核心代码 craco.config.js

craco.config.js

const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    },
    // 配置webpack
    // 配置CDN
    configure: (webpackConfig) => {
      let cdn = {
        js:[]
      }
      whenProd(() => {
        // key: 不参与打包的包(由dependencies依赖项中的key决定)
        // value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
        webpackConfig.externals = {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
        // 配置现成的cdn资源地址
        // 实际开发的时候 用公司自己花钱买的cdn服务器
        cdn = {
          js: [
            'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
          ]
        }
      })

      // 通过 htmlWebpackPlugin插件 在public/index.html注入cdn资源url
      const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
      )

      if (isFound) {
        // 找到了HtmlWebpackPlugin的插件
        match.userOptions.files = cdn
      }

      return webpackConfig
    }
  }
}

public/index.html

<body>
  <div id="root"></div>
  <!-- 加载第三发包的 CDN 链接 -->
  <% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %>
    <script src="<%= cdnURL %>"></script>
  <% }) %>
</body>

React学习笔记

React介绍

开发环境创建

JSX基础

什么是JSX

JSX的本质

JSX高频场景-JS表达式

JSX高频场景-列表渲染

JSX高频场景-条件渲染

JSX高频场景-复杂条件渲染

React的事件绑定

基础实现

使用事件参数

传递自定义参数

同时传递事件对象和自定义参数

React组件基础使用

组件基础使用

组件状态管理-useState

基础使用

组件的基础样式处理

classnames库

React表单控制

受控绑定

非受控绑定

React组件通信

父子通信-父传子

props说明

特殊的prop-chilren

父子通信-子传父

兄弟组件通信

跨层组件通信

React副作用管理-useEffect

概念理解

基础使用

useEffect依赖说明

清除副作用

自定义Hook实现

React Hooks使用规则

Redux介绍

Redux与React - 环境准备

1. 配套工具

2. 配置基础环境

3. store目录结构设计

Redux与React - 实现counter

1. 使用React Toolkit 创建 counterStore

2. 为React注入store

4. React组件使用store中的数据

5. React组件修改store中的数据

Redux与React - 提交action传参

Redux与React - 异步action处理

路由

1. 创建路由开发环境

2. 快速开始

路由导航

1. 声明式导航

2. 编程式导航

导航传参

1.useSearchParams传参

2.params传参

嵌套路由配置

1. 嵌套路由配置

2. 默认二级路由

3. 404路由配置

4. 俩种路由模式

项目优化

项目预览

优化-路由懒加载

打包-打包体积分析

优化-配置CDN