web应用课——(第五讲:React)

目录

一、配置环境

二、ES6语法补充

三、Components

四、组合Components

五、路由

六、Redux


一、配置环境

感谢z神(zst_2001)的分享:

二、ES6语法补充

  • 使用bind()函数绑定this取值,在JavaScript中,函数里的this指向的是执行时的调用者,而非定义时所在的对象。
javascript 复制代码
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);)
  • 箭头函数的简写方式
javascript 复制代码
const f = (x) => {
  return x * x;
};



可以简写为:
const f = x => x * x;
  • 箭头函数不重新绑定this的取值
javascript 复制代码
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}
  • 对象的解构
javascript 复制代码
const person = {
  name: "yxc",
  age: 18,
  height: 180,
};

const {name : nm, age} = person;  // nm是name的别名
  • 数组和对象的展开
javascript 复制代码
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.创建项目
javascript 复制代码
创建项目box-app:

create-react-app box-app
cd box-app
npm start
  • 2.安装bootstrap库:
javascript 复制代码
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 />} />

javascript 复制代码
获取参数,类组件写法:

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()}
    />
)
javascript 复制代码
函数组件写法:

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

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

export default Linux;
javascript 复制代码
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()}
    />
);
javascript 复制代码
函数组件写法:

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、嵌套路由

javascript 复制代码
<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

相关推荐
智慧老师2 分钟前
Spring基础分析13-Spring Security框架
java·后端·spring
轻口味16 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami19 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
oneouto39 分钟前
selenium学习笔记(二)
笔记·学习·selenium
sealaugh3244 分钟前
aws(学习笔记第十九课) 使用ECS和Fargate进行容器开发
笔记·学习·aws
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
丰云1 小时前
一个简单封装的的nodejs缓存对象
缓存·node.js
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs