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时,可以用
    将其括起来。
  • 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:} />

获取参数,类组件写法:

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

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

Linux

;     } } export default (props) => (     )
函数组件写法:

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

const Linux = () => {
    console.log(useParams());
    return (

Linux

); } 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 

Django

;     } } export default (props) => (     );
函数组件写法:

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

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

Django

); } export default Django;

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

  • } />

7、嵌套路由

}>
    a} />
    b} />
    c} />

注意:需要在父组件中添加组件,用来填充子组件的内容。

六、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

你可能感兴趣的:(前端,react.js,javascript,node.js,后端,框架,笔记)