web应用课——（第五讲：React）

目录

一、配置环境

二、ES6语法补充

三、Components

四、组合Components

五、路由

六、Redux

---

一、配置环境

感谢z神（zst_2001）的分享：

• git下载与安装
• Node.js下载与安装
• React下载与安装

二、ES6语法补充

• 使用bind()函数绑定this取值，在JavaScript中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。

const person = {
  name: "yxc",
  talk: function() {
    console.log(this);
  }
}

person.talk();

const talk = person.talk;
talk();



运行结果：
{name: 'yxc', talk: ƒ}
Window

• bind()函数，可以绑定this的取值。（例如：const talk = person.talk.bind(person);）
• 箭头函数的简写方式

const f = (x) => {
  return x * x;
};



可以简写为：
const f = x => x * x;

• 箭头函数不重新绑定this的取值

const person = {
  talk: function() {
    setTimeout(function() {
      console.log(this);
    }, 1000);
  }
};

person.talk();  // 输出Window
const person = {
  talk: function() {
    setTimeout(() => {
      console.log(this);
    }, 1000);
  }
};

person.talk();  // 输出 {talk: f}

• 对象的解构

const person = {
  name: "yxc",
  age: 18,
  height: 180,
};

const {name : nm, age} = person;  // nm是name的别名

• 数组和对象的展开

let a = [1, 2, 3];
let b = [...a];  // b是a的复制
let c = [...a, 4, 5, 6];
const a = {name: "yxc"};
const b = {age: 18};
const c = {...a, ...b, height: 180};
Named 与 Default exports
Named Export：可以export多个，import的时候需要加大括号，名称需要匹配
Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名

三、Components

• 1.创建项目

创建项目box-app：

create-react-app box-app
cd box-app
npm start

• 2.安装bootstrap库：

npm i bootstrap
bootstrap的引入方式：

import 'bootstrap/dist/css/bootstrap.css';

• 3.创建Component
• 4.创建按钮：当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。
• 5.内嵌表达式：JSX中使用{}嵌入表达式。
• 6.设置属性：class -> className。CSS属性：background-color -> backgroundColor，其它属性类似
• 7.数据驱动改变Style
• 8.渲染列表：使用map函数。每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。
• 9.Conditional Rendering：利用逻辑表达式的短路原则。与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值
• 10.绑定事件：注意妥善处理好绑定事件函数的this
• 11.修改state：需要使用this.setState()函数。每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。
• 12.给事件函数添加参数

四、组合Components

1. 创建Boxes组件：Boxes组件中包含一系列Box组件。
2. 从上往下传递数据：通过this.props属性可以从上到下传递数据。
3. 传递子节点：通过this.props.children属性传递子节点
4. 从下往上调用函数：注意：每个组件的this.state只能在组件内部修改，不能在其他组件内修改。
5. 每个维护的数据仅能保存在一个this.state中：不要直接修改this.state的值，因为setState函数可能会将修改覆盖掉。
6. 创建App组件（包含：导航栏组件和Boxes组件。）（注意：：要将多个组件共用的数据存放到最近公共祖先的this.state中。）
7. 无状态函数组件：当组件中没有用到this.state时，可以简写为无状态的函数组件。函数的传入参数为props对象
8. 组件的生命周期：

• Mount周期，执行顺序：constructor() -> render() -> componentDidMount()
• Update周期，执行顺序：render() -> componentDidUpdate()
• Unmount周期，执行顺序：componentWillUnmount()

五、路由

1、Web分类：

• 静态页面：页面里的数据是写死的
• 动态页面：页面里的数据是动态填充的
• 后端渲染：数据在后端填充
• 前端渲染：数据在前端填充

2、安装环境：

• VSCODE安装插件：Auto Import - ES6, TS, JSX, TSX
• 安装Route组件：npm i react-router-dom

3、Route组件介绍：

• BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
• Link：跳转到某个链接，to属性表示跳转到的链接
• Routes：类似于C++中的switch，匹配第一个路径
• Route：路由，path属性表示路径，element属性表示路由到的内容

4、URL中传递参数：

解析URL：<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />

获取参数，类组件写法：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

class Linux extends Component {
    state = {  } 
    render() {
        console.log(this.props.params);
        return <h1>Linux</h1>;
    }
}

export default (props) => (
    <Linux
        {...props}
        params={useParams()}
    />
)

函数组件写法：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

const Linux = () => {
    console.log(useParams());
    return (<h1>Linux</h1>);
}

export default Linux;

Search Params传递参数
类组件写法：

import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

class Django extends Component {
    state = {
        searchParams: this.props.params[0],  // 获取某个参数
        setSearchParams: this.props.params[1],  // 设置链接中的参数，然后重新渲染当前页面
    }

    handleClick = () => {
        this.state.setSearchParams({
            name: "abc",
            age: 20,
        })
    }

    render() {
        console.log(this.state.searchParams.get('age'));
        return <h1 onClick={this.handleClick}>Django</h1>;
    }
}

export default (props) => (
    <Django
        {...props}
        params={useSearchParams()}
    />
);

函数组件写法：

import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

const Django = () => {
    let [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('age'));
    return (<h1>Django</h1>);
}

export default Django;

6、重定向：使用Navigate组件可以重定向。

• <Route path="*" element={ <Navigate replace to="/404" /> } />

7、嵌套路由

<Route path="/web" element={<Web />}>
    <Route index path="a" element={<h1>a</h1>} />
    <Route index path="b" element={<h1>b</h1>} />
    <Route index path="c" element={<h1>c</h1>} />
</Route>
注意：需要在父组件中添加<Outlet />组件，用来填充子组件的内容。

六、Redux

1、redux将所有数据存储到树中，且树是唯一的。

2、Redux基本概念

• store：存储树结构。
• state：维护的数据，一般维护成树的结构。
• reducer：对state进行更新的函数，每个state绑定一个reducer。传入两个参数：当前state和action，返回新state。
• action：一个普通对象，存储reducer的传入参数，一般描述对state的更新类型。
• dispatch：传入一个参数action，对整棵state树操作一遍。

3、React-Redux基本概念

• Provider组件：用来包裹整个项目，其store属性用来存储redux的store对象。
• connect(mapStateToProps, mapDispatchToProps)函数：用来将store与组件关联起来。
• mapStateToProps：每次store中的状态更新后调用一次，用来更新组件中的值。
• mapDispatchToProps：组件创建时调用一次，用来将store的dispatch函数传入组件。

4、安装：npm i redux react-redux @reduxjs/toolkit