Record study record life
React学习笔记
Web
React学习笔记
Web

React学习笔记

配置环境

React官网

安装Git Bash（仅限使用Windows的同学，使用Mac和Linux的同学无需安装） 安装地址

安装Nodejs 安装地址

安装create-react-app 打开Git Bash，执行：

npm i -g create-react-app

安装VSCode的插件

  • Simple React Snippets
  • Prettier - Code formatter

创建React App 在目标目录下打开Git Bash，在终端中执行：

create-react-app react-app  # 可以替换为其他app名称

cd react-app
npm start  # 启动应用

JSX React中的一种语言，会被Babel编译成标准JavaScript。

 

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.3.1 创建项目

创建项目box-app：

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

安装bootstrap库：

npm i bootstrap

bootstrap的引入方式：

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

 

1.3.2 创建Component

1.3.3 创建按钮

当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。

1.3.4 内嵌表达式

JSX中使用{}嵌入表达式。

1.3.5 设置属性

  • class -> className
  • CSS属性：background-color -> backgroundColor，其它属性类似

1.3.6 数据驱动改变Style

1.3.7 渲染列表

  • 使用map函数
  • 每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。

1.3.8 Conditional Rendering

利用逻辑表达式的短路原则。

  • 与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
  • 或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值

1.3.9 绑定事件

注意妥善处理好绑定事件函数的this

1.3.10 修改state

需要使用this.setState()函数 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。

1.3.11 给事件函数添加参数

 

组合Components

1.4.1 创建Boxes组件

Boxes组件中包含一系列Box组件。

1.4.2 从上往下传递数据

通过this.props属性可以从上到下传递数据。

1.4.3 传递子节点

通过this.props.children属性传递子节点

1.4.4 从下往上调用函数

注意：每个组件的this.state只能在组件内部修改，不能在其他组件内修改。

1.4.5 每个维护的数据仅能保存在一个this.state中

不要直接修改this.state的值，因为setState函数可能会将修改覆盖掉。

1.4.6 创建App组件

包含：

  • 导航栏组件
  • Boxes组件

注意：

  • 要将多个组件共用的数据存放到最近公共祖先的this.state中。

1.4.7 无状态函数组件

  • 当组件中没有用到this.state时，可以简写为无状态的函数组件。
  • 函数的传入参数为props对象

1.4.8 组件的生命周期

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

路由

Web分类

  • 静态页面：页面里的数据是写死的

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

安装环境

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

Route组件介绍

import { BrowserRouter ,Route,Routes } from 'react-router-dom';

 

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

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;

重定向

使用Navigate组件可以重定向。

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

嵌套路由

<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

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

Redux基本概念

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

React-Redux基本概念

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

安装

  • npm i redux react-redux @reduxjs/toolkit

 

实战项目—计算器

API——login

登录

https://app165.acapp.acwing.com.cn/calculator/login/

输入参数：username、password

输出参数：result

  • result = "success"：表示登录成功
  • result = "用户名或密码不正确"：表示错误信息

API——logout

退出

https://app165.acapp.acwing.com.cn/calculator/logout/

输入参数：无 输出参数：result result = "success“：表示退出成功

API——register

注册

https://app165.acapp.acwing.com.cn/calculator/register/

输入参数：username、password、password_confirm

输出参数：result

  • result = “success”：表示注册成功
  • result = “用户名和密码不能为空”：表示错误信息
  • result = “两个密码不一致”：表示错误信息
  • result = “用户名已存在”：表示错误信息

API——get_status

查询登录状态，如果已登录，则返回用户名

https://app165.acapp.acwing.com.cn/calculator/get_status/

输入参数：无 输出参数：result、username

  • result = "login"，此时有返回值useranme，表示已登录的用户名
  • result = "logout"，此时username不存在，表示未登录

 

Post Views: 2,708
赞赏

微信赞赏 支付宝赞赏

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注