开发环境搭建

使用create-react-app快速搭建开发环境，创建react开发环境的工具，底层由webpack构建，封装了配置细节，开箱即用：

执行命令：

npx create-react-app react-basic

1. npx node.js工具命令，查找并执行后续命令
2. create-react-app 核心包(固定写法),用于创建React项目
3. react-basic React项目的名称(可以自定义)

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 导入React库，用于构建用户界面
import React from 'react';
// 导入ReactDOM库，用于将React组件渲染到Web页面中
import ReactDOM from 'react-dom/client';

// 导入App组件，该组件是应用的主要入口点
import App from "./App";

// 使用ReactDOM创建一个根DOM元素，与HTML中的root元素对应
const root = ReactDOM.createRoot(document.getElementById('root'));
// 渲染React组件到DOM中，此处将App组件渲染到root元素中
root.render(
    <App />
);

APP.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 定义一个常量，用于在组件中显示欢迎信息
const message = "Hello World!";

/**
 * App函数是React组件的实现，用于渲染页面的根组件
 * 
 * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题
 */
function App() {
    return (
        <div className="App">
            <h1>this is {message}</h1>
        </div>
    );
}

// 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用
export default App;

JSX基础

概念和本质

JSX是JavaScript和xml(html)的缩写，表示在js代码中编写html模板结构,它是React中编写UI模板的方式

1 2 3 4 5 6 7 8 9

const message = 'this is message' function APP(){ return( <div> <h1>this is title</h1> {message} </div> ) }

优势：

• HTML的声明式模板写法
• js的可编程能力

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

JSX中使用JS表达式

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

1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象

注意：if语句，switch语句，变量声明属于语句，表示表达式，不能出现在{}中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// 定义一个常量，用于在组件中显示欢迎信息 const message = "Hello World!"; const getName = () => { return "da Chun!"; }; /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { return (<div className="App"> {/*1. 使用引号传递字符串*/} {'你好 React！'} <br/> {/*2. 使用JavaScript变量*/} {message} <br/> {/*3. 函数调用和方法调用*/} {getName()} <br/> {new Date().toLocaleTimeString()} <br/> {/*4. 使用JavaScript对象*/} <div style={{color: 'red'}}>React is awesome!</div> <h1>this is {message}</h1> </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

列表渲染

语法：在JSX中使用原生JS中map方法遍历渲染列表.

注意事项：加上一个独一无二的key，字符串或者number比如id。

key的作用：React框架内部使用 提升更新性能。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// 定义一个常量，用于在组件中显示欢迎信息 const list = [ {id: 1, name: "John"}, {id: 2, name: "Jane"}, {id: 3, name: "Jim"} ] /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { return (<div className="App"> {/*列表渲染*/} <ul> {list.map(item => <li key={item.id}>{item.name}</li>)} </ul> </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

条件渲染

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

const flag = false; /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { return (<div className="App"> {/*逻辑与&&*/} {flag && <span>hello</span>} <br/> {/* 三元运算符*/} {flag ? <span>loading...</span> : <span>hello React!</span>} </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

复杂条件渲染

需求：列表中需要根据文章状态适配三种情况，单图，三图和无图三种模式

解决方案：自定义函数 + if判断语句

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

const count = 1; // 0 1 3 function getImgCount() { if (count === 0) { return <div>我是无图</div> } else if (count === 1) { return <div>我是单图</div> } else { return <div>我是多图</div> } } /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { return (<div className="App"> {/* 调用复杂条件渲染*/} {getImgCount()} </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

事件绑定

基本使用

语法：on+事件名称={事件处理程序}，整体上遵循驼峰命名法。

使用事件对象参数

语法：在事件回调函数中设置形参e.

传递自定义参数

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

注意：不能直接写函数调用，这里时间绑定需要一个函数引用.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

/** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { // 基础使用 // function clickHandler() { // alert("hello React!") // } // 使用事件对象参数 // function clickHandler(e){ // console.log(e) // } // 传递自定义参数 function clickHandler(name, e) { console.log(name, e) } return (<div className="App"> {/* 基础使用*/} {/*<button onClick={clickHandler}>click me</button>*/} {/* 使用事件对象参数*/} {/*<button onClick={clickHandler}>click me</button>*/} {/*传递自定义参数 */} <button onClick={(e) => clickHandler("张三", e)}>click me</button> </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

组件

介绍

概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以复用多次。

组件化开发可以让开发者向搭积木一样构建一个完整的庞大的应用。

---

React组件

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 定义组件 const Button = () => { // 业务逻辑组件 return <button>click me!</button> } /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { return (<div className="App"> {/*渲染组件*/} <Button></Button> </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

useState

useState是一个React Hook(函数),它允许我们想组件添加一个状态变量，从而控制影响组件的渲染结果

本质：和普通JS变量不同的是，状态变量一旦发生组件的视图UI也会跟着变化(数据驱动视图)

1	const [count，setCount] = useState(0);

1. useState是一个函数，返回值是一个数组
2. 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

// 导入useState import {useState} from "react"; /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { const [count, setCount] = useState(0) const handleAdd = () => { setCount(count + 1) } const handleSub = () => { setCount(count - 1) } return (<div className="App"> <button onClick={handleSub}>-</button>&nbsp; {count} &nbsp;<button onClick={handleAdd}>+</button> </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

修改状态规则

状态不可变

在React中，状态被认为说只读的，我们一个始终替换它而不是修改它，直接修改状态不能引发视图更新。

修改对象状态

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

// 导入useState import {useState} from "react"; /** * App函数是React组件的实现，用于渲染页面的根组件 * * @returns 返回根组件的JSX结构，包含一个显示欢迎信息的标题 */ function App() { const [form, setForm] = useState({ name: '张三' }) const changeName = () => { // 错误写法 // form.name = '李四' // 正确写法 setForm({ ...form, name: "李四" }) } return (<div className="App"> <button onClick={changeName}>姓名：{form.name}</button> </div>); } // 将App组件导出为默认导出，使得可以在其他文件中作为默认导入使用 export default App;

组件基础样式

react组件基础样式控制有两种方式

• 行内样式(不推荐)
• class类名控制(推荐)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 导入useState import "./index.css" const style = { color: 'red', fontSize: '50px' } function App() { return (<div className="App"> {/*方式一：行内样式*/} <div style={{color: 'red', fontSize: '40px'}}>Hello React!</div> <div style={style}>Hello React!</div> {/* 方式二，外部引入*/} <div className="foo">Hello React!</div> </div>); } export default App;

classNames优化类名控制

classNames是一个简单的JS库，可以方便的通过条件动态控制class类名的显示。

缺点：字符串的拼接方式不够直观，容易出错。

优化：

1	className={classNames('nav-item', {active: type === item.type})}

• nav-item:静态类名
• {active: type === item.type}：动态类名，key表示要控制的类名，value表示条件，true的时候类名显示.

引用：

1	npm i classnames --save

1	import classNames from 'classnames'

受控表单绑定

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

1. 准备一个React状态值

1	const [value, setValue] = useState('')

2. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数。

1	<input type='text' value={value} onChange={(e) => setValue(e.target.value)}></input>

获取DOM元素

在react组件中获取、操作DOM，需要使用useRef钩子函数，分为两步。

1. 使用useRef创建ref对象，并与JSX绑定

1 2	const inputRef = useRef(null) <input type="text" ref={inputRef} />

2. 在DOM使用时，通过inputRef.current拿到DOM对象

1 2	console.log(inputRef.current) console.dir(inputRef.current)

组件通信

介绍

概念：组件通信就是组件之间的数据传递，根据之间嵌套关系的不同，有不同的通信方法。

父传子

实现步骤：

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function Child(props) { return (<div> <h1>hello React!</h1> <br/> <h2>{props.name}</h2> </div>) } function App() { const name = 'this is App Component' return (<div className="App"> <Child name={name}></Child> </div>); } export default App;

props说明

1. props可传递任意的数据：

数字，字符串，布尔值，数组，对象，函数，JSX

2. props是只读对象：子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能有父组件修改。

特殊的prop children

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

子传父

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import {useState} from "react"; // 形参接收函数 function Child({onMsg4Son}) { const sonMsg = 'hello React!'; return (<div> <button onClick={() => onMsg4Son(sonMsg)}>click me</button> </div>) } function App() { // 定义响应数据 const [msg, setMsg] = useState('') // 定义传递的函数,形参为接收子组件的数据 const getMsg = (msg) => { console.log(msg) setMsg(msg) } return (<div className="App"> <h2>{msg}</h2> <Child onMsg4Son={getMsg}></Child> </div>); } export default App;

兄弟通信

使用状态提升实现兄弟组件通信

思路：借助”状态提升“机制，通过父组件进行兄弟组件之间的数据传递

1. A组件先通过子传父的方式吧数据传给父组件APP
2. APP拿到数据后同父传子的方式在传递给B组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import {useState} from "react"; /** * A组件数据传递给B组件 * @returns {JSX.Element} * @constructor */ function A({onAMsg}){ const aName = 'this A name'; return(<div> <span>A Component</span> <button onClick={() => onAMsg(aName)}>A Button</button> </div>) } function B(props){ return(<div> <div> <span>B Component</span> <h2>{props.name}</h2> </div> </div>) } function App() { // 定义状态变量保存A的信息用于给B组件 const [name, setName] = useState('') // 用于接收A组件的信息 const getAMsg = (msg) => { console.log(msg) setName(msg) } return (<div className="App"> <div>this App</div> <A onAMsg={getAMsg}></A> <B name={name}></B> </div>); } export default App;

Context机制夸层级组件通信

实现步骤：

1. 使用createContext方法创建一个上下文对象Ctx。
2. 在顶层组件(APP)中通过Ctx.provider组件提供数据
3. 在底层组件(B)中通过useContext钩子函数使用数据。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import {useState, createContext, useContext} from "react"; // 1. 使用`createContext`方法创建一个上下文对象Ctx。 const MsgContext = createContext(); /** * A组件数据传递给B组件 * @returns {JSX.Element} * @constructor */ function A() { return (<div> this is A <B></B> </div>) } function B() { // 3. 在底层组件(B)中通过`useContext`钩子函数使用数据。 const msg = useContext(MsgContext); return (<div> this is B {msg} </div>) } function App() { // 2. 在顶层组件(APP)中通过`Ctx.provider`组件提供数据 const msg = 'this is app msg' return (<div className="App"> this is App <MsgContext.Provider value={msg}> <A></A> </MsgContext.Provider> </div>); } export default App;

useEffect

介绍

useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送Ajax请求，更改DOM等等。(类似vue中onMounted生命周期的钩子函数)

说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器请求数据，整个过程属于由渲染本身引起的操作

基础使用

需求：在组件渲染完毕之后，立刻从服务器获取频道列表数据并显示到页面中

语法：

1	useEffect(() => {},[])

参数1是一个函数，可以把它叫做副作用函数，在函数内部可以防止要执行的操作。

参数2是一个数组(可选参),在数组里放置依赖项，不同依赖项会影响第一个参数的执行，当是一个空数组的时候，副作用函数智慧在组件渲染完毕之后执行一次。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import {useEffect, useState} from "react"; const URL = 'http://geek.itheima.net/v1_0/channels'; function App() { const [list, setList] = useState([]) // 定义请求数据的方法 const getData = async () => { const res = await fetch(URL); const list = await res.json(); console.log(list) setList(list.data.channels) } // 页面渲染时调用该函数 useEffect(() => { getData(); },[]) return (<div className="App"> <ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul> </div>); } export default App;

useEffect依赖项参数说明

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import {useEffect, useState} from "react"; function App() { const [count, setCount] = useState(0) // 1. 不传递依赖项，组件发生改变，就会执行一次副作用函数 // useEffect(() =>{ // console.log('副作用函数执行了') // }) // 2. 传递空数组，副作用函数只会执行一次 // useEffect(() =>{ // console.log('副作用函数执行了') // },[]) // 3. 指定依赖项，当依赖项发生改变，就会执行一次副作用函数 useEffect(() =>{ console.log('副作用函数执行了') },[count]) const onChangeCount = (count) => { setCount(count) } return (<div className="App"> <button onClick={() => onChangeCount(count+1)}>+{count}</button> </div>); } export default App;

清除副作用

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们项在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。

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

需求：在SON组件渲染开启一个定时器，卸载是清除这个定时器。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import {useEffect, useState} from "react"; function A(){ useEffect(() => { const timer = setInterval(() => { console.log('副作用函数执行力..') },1000) // 消除副作用，当组件卸载时副作用函数中定时器也消除 return () => { clearInterval(timer) } },[]) return( <div> this is A </div> ) } function App() { const [isShow, setIsShow] = useState(true) const onChangeIsShow = () => { setIsShow(false) } return (<div className="App"> {isShow && <A></A>} <button onClick={() => onChangeIsShow()}>show time</button> </div>); } export default App;

自定义Hook函数

介绍

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import { useState} from "react"; // 自定义hook函数来控制组件的显示与隐藏 function useToggle() { const [isShow, setIsShow] = useState(true) const onChangeIsShow = () => { setIsShow(!isShow) } return{ isShow, onChangeIsShow } } function App() { // 导入自定义hook函数 const {isShow, onChangeIsShow} = useToggle() return (<div className="App"> {isShow && <span>this is span</span>} <button onClick={() => onChangeIsShow()}>show time</button> </div>); } export default App;

使用规则

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

Redux

介绍

Redux是React最常用的集中状态管理工具，类似与vue中的pinia(Vuex)，可以独立于框架运行。

作用：通过集中管理的方式管理应用的状态。

redux管理数据流程梳理

为了职责清晰，数据流项明确，redux把整个数据修改的流程分成三个核心概念，分别是：state，action，reducer

1. state：一个对象，存放我们管理的数据状态
2. action：一个对象，用来描述你想怎么改数据
3. reducer：一个函数，根据action的描述生成一个新的state。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<button id="decrement">-</button> <span id="count">0</span> <button id="increment">+</button> <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script> <script> // 1. 定义reducer函数 // 作用: 根据不同的action对象，返回不同的新的state // state: 管理的数据初始状态 // action: 对象 type 标记当前想要做什么样的修改 function reducer (state = { count: 0 }, action) { // 数据不可变：基于原始状态生成一个新的状态 if (action.type === 'INCREMENT') { return { count: state.count + 1 } } if (action.type === 'DECREMENT') { return { count: state.count - 1 } } return state } // 2. 使用reducer函数生成store实例 const store = Redux.createStore(reducer) // 3. 通过store实例的subscribe订阅数据变化 // 回调函数可以在每次state发生变化的时候自动执行 store.subscribe(() => { console.log('state变化了', store.getState()) document.getElementById('count').innerText = store.getState().count }) // 4. 通过store实例的dispatch函数提交action更改状态 const inBtn = document.getElementById('increment') inBtn.addEventListener('click', () => { // 增 store.dispatch({ type: 'INCREMENT' }) }) const dBtn = document.getElementById('decrement') dBtn.addEventListener('click', () => { // 减 store.dispatch({ type: 'DECREMENT' }) }) // 5. 通过store实例的getState方法获取最新状态更新到视图中 </script>

Redux与React

配套工具

在React中使用redux,官方要求安装两个其他插件：Redux Toolkit和react-redux；

1. Redux Toolkit(RTK)：官方推荐编写redux逻辑的方式，是一套工具的集合，简化书写。
   • 简化store的配置方式
   • 内置immer支持可变式状态修改
   • 内置thunk更好的异步创建
2. react-redux:用来链接redux和react组件的中间件

配置基础环境

1. 使用CRA快速创建React项目

1	npx create-react-app 项目名

2. 安装配套工具

1	npm i @reduxjs/toolkit react-redux

3. 启动项目

1	npm run start

store目录结构设计

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

实现counter

使用React Toolkit创建counterStore：

counterStore.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import {createSlice} from "@reduxjs/toolkit"; const counterStore = createSlice({ name: 'counter', // 初始化状态数据 initialState: { count: 0 }, // 修改数据的同步方法 reducers: { // 累加方法 increment(state){ state.count ++ }, // 减一 decrement(state){ state.count --; } } }) // 解构出创建action对象的函数 const {increment, decrement} = counterStore.actions; // 获取reducer函数 const counterReducer = counterStore.reducer; // 导出创建action对象的函数和reducer函数 export {increment, decrement}; export default counterReducer;

store/index.js

1 2 3 4 5 6 7 8 9 10 11 12

import {configureStore} from "@reduxjs/toolkit"; import counterReducer from "./modules/counterStore"; // 创建根store组合子模块 const store = configureStore({ reducer: { counter: counterReducer } }) export default store

为React注入Store：

react-redux负责把Redux和react链接起来，内置provider组件通过store参数把创建好的store实例注入刀应用中，连接正式建立。（index.js）

src/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {Provider} from "react-redux"; import store from "./store"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode> ); reportWebVitals();

React组件使用store中的数据:

在React组件中使用store中的数据，需要用到一个钩子函数——useSelector,它的作用是把store中数据映射到组件中，使用样例如下：

App.js

1 2 3 4 5 6 7 8 9 10 11

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

React组件修改store中的数据:

React组件中修改store中的数据需要借助另外一个hook函数——

useDispatch,它的作用是删除提交action对象的dispatch函数，使用后样例如下：

App.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import {useDispatch, useSelector} from "react-redux"; // 导入创建action对象的方法 import {decrement, increment} from "./store/modules/counterStore"; function App() { const {count} = useSelector(state => state.counter); // 得到dispatch函数 const dispatch = useDispatch(); return ( <div className="App"> {/*调用dispatch提交action对象*/} <button onClick={() => dispatch(decrement())}>-</button>&nbsp;&nbsp; <span>{count}</span>&nbsp;&nbsp; <button onClick={() => dispatch(increment())}>+</button> </div> ); } export default App;

提交action传参：

需求：

组件中有两个按钮”add to 10”和”add to 20”可以直接把count值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候传递参数

实现步骤：

在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上。

异步状态操作

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

src/store/modules/channelStore.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import {createSlice} from "@reduxjs/toolkit"; import axios from "axios"; const channelStore = createSlice({ name: "channels", initialState: { channelList: [] }, reducers: { setChannelList(state, action){ state.channelList = action.payload } } }) // 解构出创建action的函数 const {setChannelList} = channelStore.actions; // 获取reducer const ChannelReducer = channelStore.reducer; export {setChannelList}; export default ChannelReducer; // 异步请求部分 const url = 'http://geek.itheima.net/v1_0/channels'; const fetchChannelList = () => { return async (dispatch) => { const res = await axios.get(url); console.log(res); dispatch(setChannelList(res.data.data.channels)); } } export {fetchChannelList}

src/store/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import {configureStore} from "@reduxjs/toolkit"; import counterReducer from "./modules/counterStore"; import ChannelReducer from "./modules/channelStore"; // 创建根store组合子模块 const store = configureStore({ reducer: { counter: counterReducer, channels: ChannelReducer } }) export default store

src/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {Provider} from "react-redux"; import store from "./store"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode> ); reportWebVitals();

App.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import {useDispatch, useSelector} from "react-redux"; // 导入创建action对象的方法 import {decrement, increment, addToNum} from "./store/modules/counterStore"; import {useEffect} from "react"; import {fetchChannelList} from "./store/modules/channelStore"; function App() { const {count} = useSelector(state => state.counter); const { channelList } = useSelector(state => state.channels) // 得到dispatch函数 const dispatch = useDispatch(); // 异步调用 useEffect(() => { dispatch(fetchChannelList()) }, [dispatch]) return ( <div className="App"> {/*调用dispatch提交action对象*/} <button onClick={() => dispatch(decrement())}>-</button> &nbsp;&nbsp; <span>{count}</span>&nbsp;&nbsp; <button onClick={() => dispatch(increment())}>+</button> <br/> {/*传参*/} <button onClick={() => dispatch(addToNum(10))}>add To 10</button> <button onClick={() => dispatch(addToNum(20))}>add To 20</button> <ul> {channelList.map(item => <li key={item.id}>{item.name}</li>)} </ul> </div> ); } export default App;

ReactRouter

介绍

概念：应该路径path对应一个组件component，当我们在浏览器中访问一个path的时候，path对应的中间会在页面中进行渲染。

环境准备

1. 创建项目并安装所有依赖

1 2	npx create-react-app (react-router-pro)项目名 npm i

2. 安装最新的ReactRouter包

1	npm i react-router-dom

3. 启动项目

1	npm run start

快速开始

需求：创建一个可以切换登录页和文章页的路由系统

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import {createBrowserRouter, RouterProvider} from "react-router-dom"; const router = createBrowserRouter([ { path: '/login', element: <div>我是登录页</div> }, { path: '/article', element: <div>我是文章页</div> } ]) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <RouterProvider router={router}></RouterProvider> </React.StrictMode> ); reportWebVitals();

抽象路由模块

实际项目配置

src/router/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import {createBrowserRouter} from "react-router-dom"; import Login from "../page/Login"; import Article from "../page/Article"; const router = createBrowserRouter([ { path: '/login', element: <Login/> }, { path: '/article', element: <Article/> } ]) export default router;

src/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import router from "./router"; import { RouterProvider} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <RouterProvider router={router}></RouterProvider> </React.StrictMode> ); reportWebVitals();

路由导航

概念：路由系统中的多个路由组件需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

声明式导航

声明式导航是指通过在模板中通过‘<Link/>’组件描述要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行。

说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可.

编程式导航

编程式导航是指同useNavigate钩子函数得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如向在登录请求完毕之后跳转就可以选择这种方式，更加灵活。

说明：通过调用navigate方法传入地址path实现跳转。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import {Link, useNavigate} from "react-router-dom"; function Login() { const navigate = useNavigate() return ( <div> 欢迎登录 <div> {/*声明式导航，适合固定菜单*/} <Link to={'/article'}>跳转到文章页</Link> <br/> {/*命令式导航，比较灵活，在js代码中使用*/} <button onClick={() => navigate('/article')}>跳转到文章页</button> </div> </div> ) } export default Login

路由导航传参

searchParams传参

login/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import {useNavigate} from "react-router-dom"; function Login() { const navigate = useNavigate() return ( <div> 欢迎登录 <div> <button onClick={() => navigate('/article?id=100&name=张三')}>跳转到文章页</button> </div> </div> ) } export default Login

article/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import {useSearchParams} from "react-router-dom"; function Article(){ const [params] = useSearchParams(); const id = params.get('id'); const name = params.get('name'); return ( <div> hello 文章页 id:{id} -name:{name} </div> ) } export default Article

params传参

login/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import {useNavigate} from "react-router-dom"; function Login() { const navigate = useNavigate() return ( <div> 欢迎登录 <div> <button onClick={() => navigate('/article/18/男')}>跳转到文章页</button> </div> </div> ) } export default Login

router/index.js

article/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import {useParams} from "react-router-dom"; function Article(){ const params = useParams(); const age = params.age; const sex = params.sex; return ( <div> hello 文章页 年龄:{age} -性别:{sex} </div> ) } export default Article

嵌套路由

概念：在一级路由中又内嵌了其他路由，这种关系叫做嵌套路由，嵌套值一级路由内的路由又称为二级路由。

步骤：

1. 使用children属性配置路由嵌套关系
2. 使用<Outlet/>组件配置二级路由渲染位置。

router.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import {createBrowserRouter} from "react-router-dom"; import Login from "../page/Login"; import Article from "../page/Article"; import Layout from "../page/Layout"; import About from "../page/About"; import Panel from "../page/Panel"; const router = createBrowserRouter([ { path: '/', element: <Layout/>, children: [ { path: 'about', element: <About/> }, { path: 'panel', element: <Panel/> } ] }, { path: '/login', element: <Login/> }, { path: '/article/:age/:sex', element: <Article/> } ]) export default router;

Layout/index.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import {Link, Outlet} from "react-router-dom"; function Layout(){ return ( <div>我是Layout页 <div> <Link to={'/about'}>关于页</Link> <br/> <Link to={'/panel'}>面板</Link> </div> <Outlet></Outlet> </div> ) } export default Layout;

默认二级路由

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

404路由配置

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

步骤：

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

两种路由模式

history模式和hash模式，ReactRouter分别由createBrowerRouter和createHashRouter函数负责创建

钩子函数

useReducer

作用：和useState作用类似，用来管理相对复杂的状态数据。

基础用法：

1. 定义一个reducer函数(根据不同的action返回不同的新状态)
2. 在组件中调用useReducer，并传入reducer函数和和状态初始值。
3. 事件发生事，通过dispatch函数分派一个action对象(通知reducer要返回哪个新状态并渲染UI)

分派action是传参：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import {useReducer} from "react"; function reducer(state,action){ switch (action.type){ case "INC": return state + 1 case "DEC": return state - 1 case "SET": return action.payload default: return state } } function App() { const [state, dispatch] = useReducer(reducer, 0) return (<div className="App"> <button onClick={() => dispatch({type: "DEC"})}>-</button> {state} <button onClick={() => dispatch({type: "INC"})}>+</button> <button onClick={() => dispatch({type: "SET", payload: 100})}>update</button> </div>); } export default App;

useMemo

作用：在组件每次重新渲染的时候缓存计算的结果

需求：

基础语法：

说明：使用useMemo做缓存之后可以保证只有count1依赖项发生事才会重新计算。

React.memo

作用：允许组件在Props没有改变的情况下跳过渲染

React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染。

语法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import {memo, useState} from "react"; const MemoSon = memo(function Son() { console.log("son组件渲染") return ( <div> this is son </div> ) }) function App() { const [count, setCount] = useState(0) return (<div className="App"> {count} <button onClick={() => setCount(count + 1)}>+</button> <MemoSon/> </div>); } export default App;

props的比较机制

机制：在使用memo缓存组件之后，React会对每一个prop使用Object.is比较新值和老值，返回true，表示没有变化。

prop是简单类型

Object.is（3,3）=> true 没有变化

prop是引用类型(对象/数组)

Object([],[]) =》false 有变化，React只更新引用是否变化。

1. 传递一个简单类型的prop时， 当prop变化时，子组件重新渲染
2. 传递一个引用类型的prop， 当父组件重新渲染时，prop本身没有变化，但是prop变成了新的引用，子组件重新渲染
3. 保证引用稳定->使用useMemo缓存该引用类型

1 2 3

const list = useMemo(()=> { return [1,2,3] },[])

useCallback

作用：在组件多次重新渲染时缓存函数。

说明：使用useCallback包裹函数之后，函数可以保证在App重新渲染的时候保持引用稳定。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import {memo, useCallback, useState} from "react"; const MemoSon = memo(function Son({onChange}) { console.log("son组件渲染") return ( <div> <input onChange={(e) => onChange(e.target.value)}/> </div> ) }) function App() { const [count, setCount] = useState(0) // 传递给子组件的函数,useCallback是父组件渲染时，保证子组件不会渲染，把该函数缓存下来 const change = useCallback((value) => console.log(value),[]) return (<div className="App"> {count} <button onClick={() => setCount(count + 1)}>+</button> <MemoSon onChange={change}/> </div>); } export default App;

forwardRef

场景说明：

语法实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import {forwardRef, useRef} from "react"; const Son = forwardRef((props, ref) => { return <input type={"text"} ref={ref}/> }) function App() { const inputRef = useRef() const show = () => { inputRef.current.focus() } return (<div className="App"> <Son ref={inputRef}></Son> <button onClick={show}>聚焦</button> </div>); } export default App;

useInperativeHandlle

将子组件内部的函数暴露给父组件使用

场景说明：

语法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import {forwardRef, useImperativeHandle, useRef} from "react"; const Son = forwardRef((props, ref) => { const inpRef = useRef() // 子组件提供聚焦函数 const focus = () => { inpRef.current.focus() console.log('子组件focus方法被调用') } // 将该函数暴露出来，给父组件调用 useImperativeHandle(ref, () => { return { focus } }) return <input type={"text"} ref={inpRef}/> }) function App() { const inputRef = useRef() const show = () => { // 调用子组件的focus方法 inputRef.current.focus() } return (<div className="App"> <Son ref={inputRef}></Son> <button onClick={show}>聚焦</button> </div>); } export default App;

Class API(如今已不常用)

类组件基础结构

类组件就是通过JS中的类来组织组件的代码

1. 通过类属性state定义状态数据
2. 通过setState方法来修改状态数据
3. 通过render来写UI模板(JSX语法一致)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

class Counter extends Component { // 定义状态变量 state = { count: 0 } //定义修改状态变量的方法 setCount = () => { this.setState({ count: this.state.count + 1 }) } // jsx render() { return <button onClick={this.setCount}>{this.state.count}</button> } } function App() { return (<div className="App"> <Counter></Counter> </div>); } export default App;

类组件的说明周期函数

概念：组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数

1. componetDidMount：组件挂载完毕自动执行——异步数据获取
2. componentWillUnmount：组件卸载时自动执行——清除副作用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

class Counter extends Component { // 组件挂载完毕自动执行 componentDidMount() { this.timer = setInterval(() => { console.log("子组件渲染了") },1000) } // 组件卸载时自动执行 componentWillUnmount() { clearInterval(this.timer) console.log("子组件被卸载了") } // jsx render() { return <button>son</button> } } function App() { const [show, setShow] = useState(true) return (<div className="App"> { show && <Counter/> } <button onClick={() =>setShow(false)}>卸载子组件</button> </div>); } export default App;