React 1-7天学习笔记

最新推荐文章于 2024-05-11 21:19:51 发布

菜鸡前端选手

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量76

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/weixin_45724850/article/details/131745462

版权

React Day01

React day01

react简介

React就是起源于facebook的一个javascript库， react只是v层，只是负责UI找层界面的显示，需要周边环境的而一些支持

react特点

基于虚拟dom开发，效率高
组件化开发思想：SPA，组件需求，JSX
社区完善，适合于大型的web应用开发
facebook团队维护，版本稳定，持续更新
开发适用于多个场景
虚拟DOM
DOM diff算法，jsx虚拟dom, js+xml ,你可以在js中写模板

React分了2分支： web(react-dom) 和 Mobile App(react-native) 混合式app

uniapp 和 react native是属于混合式app开发，

webApp就是使用html5 开发的app

ios和安卓开发就是原生

React开发web端的项目，需要引入 react核心包和 react-dom, 以前还有react-native之前，其实也只有一个react包，在v0.8版本后，出现手机app，才把react-dom 和 react-native分离出来

react核心包：包含了 web和手机公共的内容

react-dom：负责web端的dom渲染

react-native：负责移动端app的渲染

创建虚拟dom

虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示的内存中的抽象 DOM 结构，它是对真实 DOM 的一种轻量级的映射。

虚拟 DOM 的作用是在前端框架中提供高效的 DOM 操作和更新机制，以优化性能和提升用户体验。

Virtual DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

简单来说，可以把 Virtual DOM 理解为一个简单的 JavaScript 对象，并且最少包含标签名 tag、属性 attrs 和子元素对象 children 三个属性。不同的框架对这三个属性的命名会有点差别。

1. 通过React.createElement创建虚拟dom

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>
<script>
// 原生的Es5的方式创建真实的dom
// var dom = document.createElement('div');
// dom.id='app1';
// dom.className='add';
// dom.innerHTML = 'hello';
// document.body.append(dom)
// 虚拟dom
// React.createElement(type, props属性，内容)
// React 是来自react核心的api
let xDOM= React.createElement('div',{
className:'add',
style:{color:'red'}
},'hello world');
console.log(xDOM);
// ReactDOM 是来自 react-dom这个包
let root = ReactDOM.createRoot(document.getElementById('app'));
// 通过ReactDOM.createRoot创建一个根节点，通过根节点把虚拟dom渲染到页面
// 根节点会有一个render函数,把虚拟dom转化为真实dom
root.render(xDOM);
</script>

2.jsx创建虚拟dom

需要借助babel包，可以将es6的语法转换成es5的语法，可以让浏览器识别， babel也内置了对jsx的支持

JSX = javascript and XML(HTML)

jsx特点：

1.开发代码更简洁

2.性能也会更好

3.执行代码更快，对代码进行优化处理

需要引入babel

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="app"></div>
<script type="text/babel">
// jsx创建虚拟dom
var str1 = 'world';
var style1= {color:'red'}
var ulhtml = <ul>
<li>web前端</li>
<li>测试</li>
</ul>
// js + xml
var vDom = <div className="add" style={style1}>hello {str1} {ulhtml}</div>;
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(vDom)
</script>

注意点：需要在script标签上添加 type="text/babel"

需要引入babel的包
需要在script标签上添加 type="text/babel"
在jsx中使用{}渲染模板
样式style你看到有2个{}, 外层是react的模板渲染的语法，里面是样式对象
引入外部class， jsx环境要求使用驼峰式 className

3. jsx逻辑处理

逻辑运算，加，减，乘，除， & , ||

<script type="text/babel">
var str1 = '香蕉';
var isBool = false; //bool值
var vname = <span>alice</span>;
var num1 = 10;
var num2 = 2;
// 三目运算符， && 操作符
var vDOM= <div> {isBool?str1:'苹果'} { isBool && vname }
{isBool || 'aaa'}
---
{num1 * num2}
--
{num2/num1}
</div>;
var root = ReactDOM.createRoot(document.getElementById('app'));
root.render(vDOM);
</script>

类似原生js,可以在模板{}里写运算逻辑，

{isBool?str1:'苹果'}
{isBool && vname }
{isBool || 'aaa'}
{num1 * num2}

boolean值不能直接在模板渲染，如果你想打印boolean值来测试，可以使用{JSON.stringify(isBool) }

4.jsx数据动态渲染

实践需求：

var names = [‘苹果’,’香蕉’,’桃子’];

利用jsx的语法把数组names 解析成列表进行渲染

列表结构<ul><li>香蕉</li></ul>

注意点：

jsx模板中不能直接渲染对象，但是可以直接渲染数组, 如果你需要数组渲染成特定格式，可以通过map方法循环出你想要的数组结构，然后直接在模板里渲染数组

<div id="app"></div>
<script type="text/babel">
// 简单数据类型 + 复杂数据类型（对象+数组）
var str = 'aaa';
// var arr = ['香蕉','苹果','菠萝'];
var arr = [{
name:'香蕉',
price:10
},{
name:'苹果',
price:20
},{
name:'菠萝',
price:30
}];
var obj = {
name:'小狗'
}
var arrResult = arr.map((item,index)=>{
return <li key={index}>{item.name} -- {item.price} </li>
})
console.log(arrResult);
var ulDom = <ul>
{arrResult}
</ul>
// jsx中不支持对象的渲染，支持数组的渲染
var vDom = <div>{str}
{ulDom}
</div>
var root = ReactDOM.createRoot(document.getElementById('app'));
root.render(vDom);
</script>

总结:

React提供JSX进行动态遍历的时候,实际上就是通过map拼接成我们想要的数组形式
1. {list.map(item => {})}---->[<li></li>,<li></li>]
JSX模板是可以渲染数组,但是里面内容不能是对象
遍历过程中也需要加上key,必须唯一
数据渲染以后都是页面中进行遍历,这样数据一旦发生变化,页面自动更新

组件的概念

react就是组件式开发，组件式开发可以提高开发效率，提高组件的复用性，方便后期维护和扩展

react中定义组件有2种方式：

react 版本v16.8之前，基本我们都是使用类组件，类组件比较强大，有this, 目前引入hooks编程模式，函数组件使用越来越多

1.类组件 class

2.函数组件 function

1. 复习class类

1.类名首字母必须是大写

2.使用static定义类的静态属性和方法，直接通过类名.静态属性或者类名.静态方法访问

3.使用关键字extends实现类的继承

4.实现类的继承时， constructor必须有一个super来继承父类的属性，但是可以省略，使用简写的方式

class People {
static school = '蜗牛'
constructor(name,age){
this.name = name;
this.age = age;
}
static say(){
console.log('我在说话');
}
run(){
console.log(this.name + '跑步');
}
}
// 访问静态的方法和数据
// console.log(People.school);
// People.say();
//实例化一个对象
// var p1 = new People('xiaohong',20);
// p1.run();

继承父类

// Teacher 继承 People
class Teacher extends People {
// 构造器
// constructor(name,age, country){
// super(name,age); // 使用super,你才可以使用this
// this.country = country; // 自己组件的属性
// }
// 简写的形式
country = '中国'
// 定义自己的方法
walk(){
console.log(this.name + '走路,他是'+this.country+'人');
}
}
var t1 = new Teacher('李老师',30,'中国')
t1.run();
t1.walk();
// constructor是必须，但是你都可以省略，你之所以可以省略，是因为es6会帮你自动添加这个构造器

2.在类中定义普通函数和箭头函数的区别

1.类中定义的箭头函数，没有挂载在类组件的原型上，在类继承中，箭头函数也被继承，但是被不是被挂载在原型上

2.一般情况下类中的this指向实例，类中方法实例调用的话，类方法中this就指向实例对象

3.在JavaScript中，类中的普通方法被存储在类的原型对象中。当你将一个方法复制给一个变量后再执行，方法中的this可以改变。这是因为this在JavaScript中是动态绑定的，它的值取决于函数被调用的上下文。

3.但是把类中的方法，赋值给变量之后再调用就相当于自调用了，就不是实例调用了。赋值方法this就是指向window,但是类中的方法是自动开启局部严格模式了，所以赋值方法this最终是undefined

this会根据是否是严格模式而指向undefined或者全局环境。

注：ES6 的class内部默认为严格模式

4.类中的普通函数可以通过bind, call， apply改变函数的this指向，箭头函数不能通过bind, call,apply改变他的this指向，类中的箭头函数this 一直都是指向类的实例化对象的

3.严格模式

1.严格模式下不能使用保留字，如： class, export , extends , import , super 不能做变量名

2.严格模式下this指向的变化

在全局作用域函数中this 指向 window 对象，但是在严格模式下全局作用域中函数的 this 是 undefind。

//平常模式下
function fn(){
console.log(this); //打印结果为 window对象
}
fn()
//严格模式下
function fn(){
'use strict'
console.log(this); //打印结果为 undefined
}

3.严格模式与正常模式的语法与行为上的不同

//正常模式下
num = 10;
console.log(num); //正常显示 10
//严格模式下
'use strict'
// num = 10;
// console.log(num); //严格模式下未申明变量会报错
var num = 10;
console.log(num); //声明之后会正常显示 10
delete num //严格模式下删除已经申明的变量会报错

JavaScript严格模式_js关闭严格模式_Wxinin的博客-CSDN博客

4.类中计算器属性

通过get关键字定义

get fullname(){
return this.name + ' ' + this.lastname;
}

计算器属性会依赖你使用的这几个属性，一旦依赖的属性变化，计算器属性的值也会重新计算

React中定义类组件

react中定义类组件的一些约定：

1.类组件首字母大写

2.类组件必须要通过extends继承React.Component父类，继承了react组件的所有方法

3.类组件必须有一个render方法，这个方法并不需要手动调用，在使用组件的时候react会帮我们自动调用

4.render函数要有一个return 返回虚拟dom, 必须有一个根节点

6.constructor可以使用简写的方式

<div id="app"></div>
<script type="text/babel">
// Header就是react类组件
class Header extends React.Component {
// constructor(){
// super();
this.username = 'alice'
// }
// 简写
username='alice';
sayHello(){
console.log('heelo');
}
// 类组件中必须有一个render, render返回的本身就是虚拟dom
render(){
return <div>hello world</div>
}
}
// 类组件渲染在根节点app中
var root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<Header />)
</script>

定义类组件的内部数据

使用 this.state = 内部数据

constructor(){
super();
this.username = 'alice' //不要直接使用别的变量的方式
this.state = {
obj:{
name:'xiaodan'
},
from:'hubei'
}
}

在render函数中通过this.state.属性名访问，一般可以通过解构的方式，解构出state里的数据，然后渲染

render(){
const {obj,from} = this.state;
return <div>
hello world
{obj.name} -- {from}
</div>
}

修改类组件中内部数据

通过setState的语法修改数据

// 简写的方式定义组件内部数据
state = {
obj:{
name:'xiaodan'
},
from:'hubei'
}
修改内部数据
updateData=()=>{
// 使用箭头函数的目的，就是你不用再担心this指向了，永远都是指向类组件的实例化对象的
console.log('updateData');
this.setState({
from:'上海'
})
}

1.建议使用简写的方式定义组件内部数据,使用state

2.修改内部数据使用setState, 不要使用this.state.属性名 = 值的方式直接去修改

3.setState修改数据是异步，使用setState修改数据后，会重新调用render函数，再次渲染模板

// 方式一：
this.setState({
from:'上海'
})
方式二：
// setState可以接收2个参数，第一个是箭头函数，箭头函数的参数 prev就是state中所有的数据
// 异步修改后，可以在第二个参数里获取到最新修改的数据
this.setState((prev)=>{
// prev:就是state所有的数据
return {
from:'上海'
}
},()=>{
console.log(this.state.from);
// 可以获取到最新修改数据
})

事件绑定

1.事件绑定使用onClick的方式，onClick后必须跟的是一个函数

<button onClick={this.updateData}>修改数据</button>

2.建议使用箭头函数定义组件内部方法，可以一劳永逸的解决方法的this指向，指向类组件的实例化对象

updateData=()=>{
console.log('updateData');
}

事件绑定传参方式

1.使用data-变量传参，这个是h5原生的方式

<button data-age="20" onClick={this.updateData}>修改数据</button>
获取参数：
updateData=(ev)=>{
console.log(ev.target.dataset.age);
}

2.使用箭头函数传参

<button onClick={()=>this.updateData('20')} >修改数据</button>
获取参数：
updateData=(data)=>{
console.log(data);
}

建议大家使用箭头函数传参

类组件的props属性

组件传值的方式,直接在使用组件的时候，通过props传值，类似vue组件props传值

<Footer title="蜗牛" bg="red" height="50px" />

1.可以使用构造器constructor直接接收props

constructor(props){
super();
console.log(props);
}
模板中
{this.props.title}

2.简写，省略构造器constructor

直接在模板中获取props，然后渲染

3.样式style，以 - 连接的属性，比如 backgeound-color, font-size等都需要编程小驼峰式 backgroundColor ,fontSize

4.可以使用static defaultProps设置默认属性

static defaultProps = {
height:'100px',
bg:'blue'
}

设置了默认属性后，如果你传，就使用传的值，不传就使用默认值

5.外部数据props是只读，不能被直接修改，react也是单向数据流，但是如果属性是对象，可以修改对象中某个属性值

<script type="text/babel">
// height , backgeound-color, title
class Footer extends React.Component {
// constructor(props){
// super();
// console.log(props);
// }
render(){
const {title, bg,height} = this.props;
// backgeound-color - > backgroundColor
return <div style={{backgroundColor:bg,height:height}}>footer {title}</div>
}
}
var root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<Footer title="蜗牛" bg="red" height="50px" />)
</script>

搭建react环境

使用官方create-react-app

npx create-react-app 项目名称， node版本高于 v14

总结：

npx这个命令无需安装，node安装npx命令自动就有。
create-react-app脚手架名字，本地安装临时脚手架，项目创建完毕后，销毁

下载插件：

在实际开发过程中，由于这些组件和函数组件它的结构都是固定的，所以可以使用一些插件将其生成出来

使用rcc生成类组件，使用rfc生成函数组件

项目目录结构

src：存放开发的资源

—-components：代表组件

—-pages/views：代表页面（一般跟路由相关的页面）

—-utils：存放工具

—-http：封装异步请求

index.js:代表项目入口文件，启动项目首先加载这个文件

App.js这个文件代表项目根组件。默认在Index.js被加载

React中组件有两种后缀：以js结尾的文件，jsx结尾文件（推荐）

安装scss预处理

create-react-app安装的项目，已经内置了scss的配置，你不需要配置，只需要安装node-sass sass-loader

yarn add node-sass sass-loader -D //安装在开发包

表单组件

在react中实时获取表单组件 input , select, checkbox, radio 的值，不能像vue使用v-model，需要通过onChange监听数据的改变，通过setState

1.受控组件

表单value值交给react组件在管理，数据放在state, 通过this.setState来管理表单状态，就可以理解为是受控组件

1.通过onChange监听表单事件

2.通过setState修改表单数据

import React, { Component } from 'react'
export default class AboutUs extends Component {
state = {
username:'小波'
}
updateName=(ev)=>{
let curValue = ev.target.value; //获取当前input的value值
this.setState({
username:curValue
})
}
render() {
const {username} = this.state;
return (
<div>
AboutUs --- {username}
<input type="text" value={username} onChange={this.updateName} />
</div>
)
}
}

2.非受控组件

React 类组件Day02

2.非受控组件

表单的value交给dom来管理

2.1 使用React.createRef创建变量

1.定义ref变量

方式一；可以在构造器里定义
constructor(){
super();
this.ageRef = React.createRef();
}
方式二：或者通过简写的方式
ageRef = React.createRef(); //创建一个ref的变量
ageRef是自定义个一个变量

2.在表单上使用ref变量

<input type='text' id='age' ref={this.ageRef} />

3.获取表单的dom以及value

this.ageRef.current // 表单的dom
this.ageRef.current.value

2.2 通过箭头函数获取事件对象

在表单上添加ref ，接收一个箭头函数，把事件对象event赋值给类组件的某一个变量，变量名是自定义，这个我取了一个名字inputEl

<input type="text" ref={(ev)=> this.inputEl = ev} />

2.获取表单的dom以及value

this.inputEl // 表单的dom
this.inputEl.value //表单的value值

注意：初始的value 需要通过defaultValue 给，这个defaultValue 就相当于是value值，只是非受控组件的时候需要使用下

提交表单数据

1.使用受控组件的方式提交表单

import React, { Component } from 'react'
export default class NewsList extends Component {
state = {
formData:{}
}
getFormValue=(ev)=>{
console.log(ev.target.value); //当前dom的value
var keyname = ev.target.name; //当前dom的name
let values = this.state.formData;
let newdata = {...values,[keyname]:ev.target.value };
console.log(newdata);
this.setState({
formData:newdata
})
}
// 提交form表单
sendData= (e)=>{
console.log(this.state.formData);
e.preventDefault(); //阻止默认行为
}
render() {
return (
<>
{/* <ul>
<li>新闻1</li>
<li>新闻1</li>
</ul> */}
<form >
<ul>
<li>
<span>姓名：</span> <input type="text" name="username" onChange={this.getFormValue} />
</li>
<li>
<span>密码：</span> <input type="text" name="password" onChange={this.getFormValue} />
</li>
<li>
<span>手机号：</span> <input type="text" name="mobile" onChange={this.getFormValue} />
</li>
<li>
<span>性别：</span>
<label htmlFor="g1"> <input type="radio" name="gender" id='g1' value='1' onChange={this.getFormValue} /> 男</label>
<label htmlFor="g2"> <input type="radio" name="gender" id='g2' value='2' onChange={this.getFormValue} />女</label>
</li>
<li>
<span>城市</span>
<select name='city' onChange={this.getFormValue}>
<option value='1'>北京</option>
<option value='2'>上海</option>
</select>
</li>
</ul>
<button type='button' onClick={this.sendData}>提交</button>
</form>
</>
)
}
}

2.使用非受控组件提交表单

import React, { Component } from 'react'
export default class FormList extends Component {
formData={};
uernameRef = React.createRef();
passwordRef = React.createRef();
submitForm = (ev)=>{
// 通过ref获取input 的值
let username = this.uernameRef.current.value,
password = this.passwordRef.current.value;
let datas = {
name:username,
password:password
}
console.log(datas);
ev.preventDefault(); //阻止默认行为,不让刷新页面
}
render() {
return (
<form onSubmit={this.submitForm}>
<ul>
<li>
<span>姓名：</span><input type="text" name="username" ref={this.uernameRef} />
</li>
<li>
<span>密码：</span><input type="text" name="password" ref={this.passwordRef} />
</li>
<button type='submit' >提交</button>
</form>
)
}
}

todolist作业讲解

给state中数组添加数据

<input type="text" ref={(ev)=>this.nameEl=ev} />
<button onClick={this.addTask}>添加</button>

js代码

addTask = ()=>{
let taskvalue = this.nameEl.value;
let newtask = {
id:+new Date(),
name:taskvalue,
isFinished:false
};
//方式一：
// 如果你直接修改state里的数据，不会重新渲染模板，需要通过setState
this.state.todolist.push(newtask);
this.setState({
todolist:this.state.todolist
},()=>{
this.nameEl.value = '';
})
//方式二：通过箭头函数的方式
// this.setState((prev)=>{
// // 获取todolist原来的数据，与新加的解构合并
// let newdata = [...prev.todolist, newtask]
// return {...prev,todolist:newdata}
// },()=>{
// // 可以获取到最新的数据
// this.nameEl.value = '';
// })
}

父子组建传值

父传子

父传子通过属性props传值

父组件

<TaskList todolist={todolist} ></TaskList>

子组件接收数据

this.props.todolist //todolist是自定义一个属性，通过父组件的属性传递

子传父

思路：在父组件里定义一个方法，然后在使用子组件的时候，传递一个函数类型的属性给子组件，然后z在子组件通过调用这个方法进行传递

父组件

delete: 自定义的一个函数类型属性
<TaskList todolist={todolist} delete={this.deleteTask} ></TaskList>
//删除任务
deleteTask = (index)=>{
this.state.todolist.splice(index,1); //splice删除某一项
this.setState({
todolist:this.state.todolist
})
}

子组件里：

delete = (index)=>{
// 把index给父组件
this.props.delete(index); // 子传父组件，相当于调用父组件deleteTask方法
}

React Day03

React Router路由

路由的2种方式 hash, history模式

hash：路由上会带有一个# 号，localhost:8081/#/home, 通过监听hash和hashChange来改变路由的

history：没有#号，看起来更好看点，localhost:8081/home, 通过j监听pushState和popState来改变路由

react router的最新版本 v6

react-router-dom: 浏览器 web环境路由，包含了react-router

react-router-native: 混合react-native的路由包含了react-router

所以我们在开发web端系统的时候，因为react-router-dom包含了react-router，只需要安装react-router-dom

安装路由：

yarn add react-router-dom // npm install react-router-dom

配置路由：

hash: HashRouter

history: BrowserRouter

import {HashRouter,BrowserRouter} from 'react-router-dom';
import Home from './pages/Home';
import News from './pages/News';
import Login from './pages/Login';
function App() {
return (
// 路由器
<HashRouter>
<Routes>
<Route path='/home' element={<Home></Home>}></Route>
<Route path='/news' element={<News></News>}></Route>
<Route path='/login' element={<Login></Login>}></Route>
<Route path='/' element={<Login></Login>}></Route>
</Routes>
</HashRouter>
);
}

1.路由最外层一定需要有一个路由器 HashRouter 、BrowserRouter

2.HashRouter 或者BrowserRouter 必须要包裹住Routes

3.v6版本是通过Routes 来管理route

4.路由配置必须是在根组件app.js文件

路由的重定向

通过Navigate实现路由的重定向

import {HashRouter,BrowserRouter,Routes,Route,Navigate} from 'react-router-dom';
<Routes>
...
<Route path='/' element={<Navigate to='/home'></Navigate>}></Route>
..
</Routes>

404路由

当路由表里匹配不到你访问的路由，可以使用404 组件提示用户, 可以新建 404页面，导入然后使用

<Route path='*' element={<div>404页面，找不到了</div>}></Route>

路由的嵌套

Route可以嵌套Route 配置二级路由, 二级路由Route的配置和第一级完全一样

第二级路由的path, 不写/

<Routes>
<Route path='/home' element={<Home></Home>}>
<Route path='' element={<Navigate to='role'></Navigate>}></Route>
<Route path='role' element={<Role></Role>}></Route>
<Route path='user' element={<User></User>}></Route>
</Route>
</Routes>

第二级路由的path, 写/

<Routes>
<Route path='/home' element={<Home></Home>}>
{/* /home/role */}
<Route path='/home' element={<Role></Role>}></Route>
<Route path='/home/role' element={<Role></Role>}></Route>
<Route path='/home/user' element={<User></User>}></Route>
</Route>
</Routes>

第二级路由的path, 可以写/, 也可以不写;

不写/的时候，访问二级路由的实际地址：父路由path+/+子路由path

如果写/形式，必须是父路由path+/+子路由path

注意：配置二级路由的时候，需要在父路由的模板里添加 Outlet

import {Outlet} from 'react-router-dom'
{/* Outlet类似vue里的view-router.作为路由容器，渲染子路由模板 */}
<Outlet></Outlet>

Link导航组件

类似a标签，点击Link标签来导航到另一个页面进行渲染

import {Link} from 'react-router-dom';
<div className='menu'>
<Link to='/news'>新闻</Link>
<Link to='/home'>首页</Link>
<Link to='/login'>登录</Link>
</div>

NavLink导航组件

NavLink是Link导航组件的升级版本,会添加一个当前激活的className

import {NavLink} from 'react-router-dom';
<div className='menu'>
<NavLink to='/news' >新闻</NavLink>
<NavLink to='/home'>首页</NavLink>
<NavLink to='/login'>登录</NavLink>
</div>

react路由和vue路由有什么不同， vue路由属于配置式路由， react属于编程式路由

路由的封装

1.先配置路由表

import React from 'react'
import Home from '../pages/Home';
import News from '../pages/News';
import Login from '../pages/Login';
import User from '../pages/manage/User';
import Role from '../pages/manage/Role';
// 配置式
let routeOption = [
{
path: '/home',
element: Home,
children: [{
path: 'role',
element: Role
}, {
path: 'user',
element: User
}]
},
{
path: '/news',
element: News
}
, {
path: '/login',
element: Login
}]
export default routeOption;

2.在组件中拼接成Routes管理Route，导出这个路由组件

import React, { Component } from 'react'
import {Routes,Route,Navigate} from 'react-router-dom';
import routeOption from './routes';
export default class RouterIndex extends Component {
render() {
return (
<Routes>
{routeOption.map((option,index)=>{
return <Route key={index} path={option.path} element={<option.element></option.element>}>
{option.children && option.children.map((item)=>{
return <Route path={item.path} element={<item.element></item.element>}></Route>
})}
</Route>
})}
</Routes>
)
}
}

3.根组件中引入，引入的是一个组件，可以当成标签使用

import RouteIndex from './router/RouterIndex'
...
<RouteIndex></RouteIndex>

4.在组件中一定要有一个根标签

空标签，不会生成标签

<></> 类似 vue里的 <template></template>

路由的懒加载

相当于把路由打包文件进行拆分，减小整体打包的体积，属于按需加载

第一步：

导入路由懒加载的组件

import React,{lazy,Suspense} from 'react';

第二步：

Suspense包裹住路由器

<React.Suspense fallback={<div>loading</div>}>
<HashRouter>
....
</HashRouter>
</React.Suspense>

第三步：

使用懒加载组件lazy

const Home = React.lazy(()=>import('./pages/Home'));
const News = React.lazy(()=>import('./pages/News'));
<React.Suspense fallback={<div>loading</div>}>
<HashRouter>
....
<Route path='/home' element={<Home></Home>}></Route>
<Route path='/news' element={<News></News>}></Route>
</HashRouter>
</React.Suspense>

注意：

组件名第一个字母必须大写
如果不使用封装的方式配置，注释掉 import RouteIndex from './router/RouterIndex'

props属性

用来接收父组件给子组件传的属性，支持各种数据类型，字符串string，number, boolean,函数等

属性的默认值

export default class Loading extends Component {
// props默认属性
static defaultProps = {
color:'green',
size:'small'
}
}

属性的校验

react老版本中需要安装prop-types插件，新版本的react v18已经内置了 prop-types,所以在新版本中不需要安装，直接使用

先引入

import propTypes from 'prop-types'

在组件里使用

export default class Loading extends Component {
// props属性校验
static propTypes = {
color:propTypes.string,
size:propTypes.string
}
}

相当于color，size接收的是字符串类型的属性

可以校验的属性包括string, number, object,bool，array等

loading组件的封装

import React, { Component } from 'react'
import propTypes from 'prop-types'
import './load.scss';
var obj = {
min:0.5,
small:1,
big:2
}
export default class Loading extends Component {
// props默认属性
static defaultProps = {
color:'green',
size:'small'
}
// props属性校验
static propTypes = {
color:propTypes.string,
size:propTypes.string
}
constructor(props){
super();
this.styleObj = {
'--color':props.color,
transform:'scale('+obj[props.size]+')'
}
}
render() {
return (
<div className="loading" style={this.styleObj}>
<div className="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div className="box2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
)
}
}
// Loading.defaultProps = {
// color:'green',
// size:'small'
// }

全局事件总线events

使用全局事件总线events，解决兄弟组件传值

安装

yarn add events //或者 npm install events

属于发布订阅模式

先导出EventEmitter对象,为了数据针对同一个event对象进行发布和订阅的

新建util/event.js

import {EventEmitter} from 'events'
let eventObj = new EventEmitter();
export default eventObj;

在页面中使用

父组件使用了A1，和A2组件

import A1Com from '../../components/A1Com'
import A2Com from '../../components/A2Com'
export default class Role extends Component {
render() {
return (
<div>Role
<A1Com></A1Com>
<A2Com></A2Com>
</div>
)
}
}

A1组件订阅，

import eventObj from '../utils/event'
// 订阅某一个数据 senddata
// 类似vue里的mounted函数
componentDidMount(){
// addListener订阅自定义事件
eventObj.addListener('senddata',(data)=>{
console.log(data,'获取到a2组件发送的数据');
})
}

A2组件发布

import React, { Component } from 'react'
import eventObj from '../utils/event'
export default class A2Com extends Component {
// 针对订阅的 senddata 进行发布
sendFun = ()=>{
eventObj.emit('senddata',{
username:'alice',
age:20
})
}
render() {
return (
<div>
A2Com
<button onClick={this.sendFun}>发送数据</button>
</div>
)
}
}

组件生命周期

React 18 废弃了三个生命周期：

componentWillMount,componentWillReceiveProps,componentWillUpdate

新增了两个生命周期：static getDerivedStateFromProps(nextProps, prevState)，getSnapshotBeforeUpdate(prevProps, prevState)

1.挂载阶段：constructor构造器的初始化数据，以及组件的渲染 constructor - > render -> componentDidMount

2.运行，更新阶段：修改内部数据state, 或者外部数据props修改，都会引起render的重新渲染及重新

shouldComponentUpdate 我需要更新组件吗？默认是true,更新，一般性能优化

当你的state,props改变后, componentDidUpdate基本不用

shouldComponentUpdate - > render -> componentDidUpdate

3.卸载阶段：可以在componentWillUnmount里进行定时器的清除工作等

组件的生命周期流程图

componentDidMount: 类似vue里mounted,组件渲染完毕，一般在这里调接口，调函数，设置定时器等，或者获取模板中的某个dom, 只会执行一次

componentDidUpdate：类似vue里updated, 组件更新完成后，一般不会用到

componentWillUnmount：类似vue里的destroyed,组件销毁

getDerivedStateFromProps：静态方法，用来做父子组建传值的时候，监听props的改变

// 用来监听props属性的更新的
static getDerivedStateFromProps(props,state){
// 如果需要更新模板，返回一个对象，你可以返回null
return {
newName:props.username
}
}

一般返回一个对象，如果不需要更新可以返回null

生命周期演示文件

import React, { Component } from 'react'
export default class News extends Component {
constructor(){
super();
this.state = {
count:10
}
console.log('1.constructor');
}
updateCount = ()=>{
let oldcount = this.state.count;
// 改变了组件内部数据，引发组件更新阶段
this.setState({
count:oldcount+1
})
}
shouldComponentUpdate(props,state){
console.log('我需要更新组件吗');
return true
}
componentDidUpdate(){
console.log('组件修改后，已经渲染完毕');
}
componentDidMount(){
console.log('3.componentDidMount,数据渲染完毕了');
// 1. 调接口
// 2. 获取模板中的dom
// 3. 设置定时器
this.timer = setInterval(()=>{
console.log('打印数据');
},2000)
}
componentWillUnmount(){
console.log('组件被销毁');
clearInterval(this.timer);
}
render() {
console.log('2. render函数');
return (
<div>
<button onClick={this.updateCount}>修改数据</button>
</div>
)
}
}

父子组建传值 getDerivedStateFromProps监听演示

父组件：

import React, { Component } from 'react'
import A1Com from '../../components/A1Com'
export default class Role extends Component {
state = {
username:'alice'
}
updateName = ()=>{
this.setState({
username: '小刚'
})
}
render() {
return (
<div>Role
<button onClick={this.updateName}>改变username</button>
<A1Com username = {this.state.username}></A1Com>
</div>
)
}
}

子组件：

import React, { Component } from 'react'
import eventObj from '../utils/event'
console.log(eventObj);
export default class A1Com extends Component {
constructor(props){
super();
this.state = {
newName:props.username
}
}
// 用来监听props属性的更新的
static getDerivedStateFromProps(props,state){
// 如果需要更新模板，返回一个对象，不需要更新就返回null
return {
newName:props.username
}
}
render() {
return (
<div>
{this.props.username}
<p>--------</p>
{this.state.newName}
</div>
)
}
}

React Day4

路由跳转

react 18版本，以前类组件的时候， props上有location可以让跳转，但是目前react官方极力的推荐hooks开发，所以取消原来的api

在类组件中暂时用原生location 方式跳转

window.location.href = '/home' ;

mockJS使用步骤

基本使用

第一步：安装

yarn add mockjs

第二步：新建mockjs/index.js

import mockjs from "mockjs";
mockjs.mock('/api/login','post',{
code:1,
msg:'成功',
data:{
username:'alice',
token:'123456'
}
})

mockjs.mock(接口路径，接口方法，接口数据)

第三步：在入口文件index.js中引入

import './mockjs/index.js'

如果有多个mock文件，可以在mockjs新建多个， user,role, index

user.js, 默认导出一个函数

import mockjs from "mockjs";
export default ()=>{
mockjs.mock('/api/user','get',{
code:1,
msg:'成功',
data:{
username:'alice',
token:'123456'
}
})
mockjs.mock('/api/login','post',{
code:1,
msg:'成功',
data:{
username:'alice',
token:'123456'
}
})
}

role.js,默认导出一个函数

import mockjs from "mockjs";
export default ()=>{
mockjs.mock('/api/role','get',{
code:1,
msg:'成功',
data:{
username:'alice',
token:'123456'
}
})
}

在index.js中导入user.js和role.js

import role from './role.js'
import user from './user.js'
role();
user();

在项目入口文件

import './mockjs/index.js'

拦截配置baseURL

说明：如果项目开发过程中，本来你已经有了baseURL, 你可以使用一个自定义的标签mocktag进行判断是否使用mock

axiosEL({
method:'post',
url:'/api/login',
data:this.state.formData,
mocktag:true // mocktag 是自定义的
}).then((res)=>{
})

在axiosEL实例封装的时候，使用请求拦截，当mocktag是true, 使用mock接口，修改baseURL

import axios from "axios";
let axiosEL= axios.create({
baseURL:'http://www.test.com',
timeout:5000
});
axiosEL.interceptors.request.use((config)=>{
//mocktag 自定义标签，来判断是否使用mockjs
if(config.mocktag) {
config.baseURL = '/';
}
return config
})
// 相应拦截
axiosEL.interceptors.response.use((res)=>{
return res.data;
})
export default axiosEL;

在定义接口的时候，也不需要使用域名直接写

mockjs.mock('/api/user','get',{
code:1,
msg:'成功',
data:{
username:'alice',
token:'123456'
}
})

message弹框封装

1. 使用工具函数封装的方式

// message: '恭喜你，这是一条成功消息',
// type: 'success'
// duration: 3000
// showClose :是否显示关闭按钮
// onClose: 被关闭时的回调函数
function showMessage(obj){
let body = document.querySelector('body');
const {message, type='default',duration="3000",showClose=false,onClose} = obj;
const clsNname = {
success:'success',
error:'error',
warning:'warning',
default:'default'
}
var msgbox = document.createElement('div');
// 判断有没有message
var boxs = document.querySelectorAll('.message-box');
var boxHeight = 0,
boxLen = boxs.length;
if(boxLen>0) {
Array.from(boxs).forEach((item)=>{
boxHeight = boxHeight + item.clientHeight;
})
}
msgbox.className=`message-box ${clsNname[type]}`;
msgbox.style = `position:absolute; width:300px; border:1px solid #ccc;
border-radius:5px; left:50%; font-size:13px; padding:10px; background:#fff; top:${10 * boxLen +boxHeight}px; transform:translateX(-50%)`;
msgbox.style.zIndex = 1000;
msgbox.innerHTML = message;
if(showClose) {
var close = document.createElement('div');
close.innerText = 'X';
close.style = `position:absolute; right:20px; top:10px; cursor:pointer;`;
msgbox.appendChild(close);
close.addEventListener('click',()=>{
body.removeChild(msgbox);
onClose && onClose(); // 关闭后执行代码
})
}
body.appendChild(msgbox);
setTimeout(()=>{
msgbox && body.removeChild(msgbox);
onClose && onClose(); // 关闭后执行代码
},duration)
}
export default showMessage

页面中使用

import message from '../utils/message'
message({
// type:'success',
// duration:3000,
showClose:true,
message: '恭喜你，这是一条成功消息',
// onClose:function(){
// console.log('ooooo');
// }
})

2.使用组件的形式封装message

import React, { Component } from 'react'
import './msg.scss'
export default class MsgTip extends Component {
closeMsg = ()=>{
this.props.send(); // 相当于调用父组件getMsgData
}
// componentDidUpdate(){
// // 你也不能在这里使用setState
// }
// 你不能在componentDidUpdate和 render使用setState
render() {
const {visible,content} = this.props;
if(visible) {
setTimeout(()=>{
this.closeMsg();
},3000)
}
return (
<>
{visible && <div className='msg-box'>
<span onClick={this.closeMsg} className='close'>X</span>
{content}
</div>}
</>
)
}
}

使用message组件

import MsgTip from '../components/messgeinfo/MsgTip'
.....
// 是用来接收子组件给我的数据
getMsgData = (data)=>{
console.log(data);
this.setState({
visible:false
})
}
....
<MsgTip visible={this.state.visible} send={this.getMsgData} content={this.state.content}></MsgTip>

点击某一个按钮触发message的显示和隐藏

this.setState({
visible:true,
content:'成功了'
})

在项目中导入图片的2种方式

使用es6的方式

import Testimg from '../../images/1.jpg'
<img src={Testim}></img>

使用commonJS的方式

let imgp = require("../../images/5.jpg")
<img src={imgp}></img>

弹框组件封装

父组件使用

<ModalBox visible={visible} title={title} send={this.getFromData}>
form表单
<div>aa</div>
</ModalBox>

子组件

import React, { Component } from 'react'
import './model.scss';
export default class ModalBox extends Component {
// 关闭弹框
closePop = ()=>{
this.props.send(); //相当于调用父组件getFromData方法
}
render() {
const {visible, title,children} = this.props;
// this.props.children //获取组件内部自定义的内容
return (
<>
{visible && <div className='modal-box'>
<div className='title'> {title}
<span className='close' onClick={this.closePop}>X</span> </div>
<div className='content'>
{children}
</div>
</div>}
</>
)
}
}

插槽

通过this.props.children渲染父组件自定的内容

如果不使用插槽，直接在弹框里面修改数据，我们需要注意父组件给子组件的数据不能直接修改，需要把当前的数据赋值给组件内部定义的数据

//如何监听父组件给我的数据
static getDerivedStateFromProps(props,state) {
return {
currentData:props.current
}
}

然后在修改input 的时候

updateProduct = (ev)=>{
this.state.currentData[ev.target.name] = ev.target.value; // 先赋值，再通过setState修改
this.setState({
currentData: this.state.currentData
})
}

Warning: A component is changing an uncontrolled input of type text to be controlled 报错分析_Michael18811380328的博客-CSDN博客

React Day05

时间格式转化

把时间格式 2022-12-04T02:00 转化为 2022-12-4 02:00:00的方式

方式一：

endTime = endTime.replace(/T/, ' ');

方式二：

endTime = new Date(endTime).toLocaleString().replace(/\//g,'-');

判断某个时间是否在当前时间之前或之后

传入一个时间格式为 2022-12-23 00:00:00 或者 2022/12/23 00:00:00 ,然后转化为毫秒比较

compareTime(time2){
// time2 = 2022-12-23 00:00:00
var time1 = new Date(); // 今天当前的时间
var time2 = new Date(time2); // 活动结束时间
// time2 大于 time1 ，正在进行中，小于是已经结束
if(time2.getTime() > time1.getTime()){
return true;
} else {
return false;
}
}

计算2个时间相差多少天

// time1, time2 ,计算2个时间之间相差多少天
var calcTime = (time1,time2)=>{
var t1 = new Date(time1);
var t2 = new Date(time2);
let total = Math.abs(t1.getTime() - t2.getTime()) ;
// total/1000/60/60 //小时
// total/1000/60/60/24 天
return total/1000/60/60/24;
}

分页组件

样式文件 page.scss

.page-number {
display: flex;
padding: 20px;
margin-bottom: 20px;
.num {
margin-left: 20px;
margin-right: 20px;
}
.pageing {
span { margin-right: 20px; border: 1px solid #ccc; width:20px; height:20px; display: inline-block;}
}
}

分页组件PageNumber.jsx

import React, { Component } from 'react'
import './page.scss';
export default class PageNumber extends Component {
static defaultProps = {
pageSize:10,
pageIndex:1
}
// this.props.total , 当前页码pageIndex ,每页显示的条数 pageSize
get totalPage(){
// 总条数除以每页显示的条数 1.2
return Math.ceil(this.props.total / this.props.pageSize)
}
pagebar = ()=>{
let arr = [];
for(let i=1;i<=this.totalPage;i++) {
arr.push(<span key={i} onClick={()=>this.updatePage('pageIndex',i)}>{i}</span>)
}
return arr
}
// 修改pageIndex, pageSize
updatePage = (kind,num)=>{
// let num = typeof ev == 'number' ? ev : ev.target.value;
this.props.paging({
[kind]: Number(num)
})
}
render() {
const {pageIndex,pageSize} = this.props;
return (
<div className="page-number">
<span>你当前在{pageIndex}页 </span>
<span>总共有{this.totalPage}页</span>
<span className="num">每页显示：
<select name="" id="" onChange={(ev)=>this.updatePage('pageSize',ev.target.value)} defaultValue={pageSize}>
<option value="5" >5</option>
<option value="10">10</option>
<option value="20" >20</option>
</select>
</span>
<div className="pageing">
{this.pagebar()}
</div>
</div>
)
}
}

页面中使用

import PageNumber from '../../components/paging/PageNumber';
state = {
...
pageObj:{
total:0, //数据总共有多少条
pageIndex:1, // 当前在哪个页面
pageSize:10 //每页显示多少条
}
...
}
// 用来接收分页组件给我的数据
getPageData = (data)=>{
// console.log(data,'得到数据');
// 更新 pageIndex ，或者 pageSize
this.setState({
pageObj:{...this.state.pageObj, ...data}
},()=>{
// 调接口
})
}
// 获取列表
getShopList = async ()=>{
// 调接口获取到实时的 pageIndex， pageSize
const {pageIndex,pageSize} = this.state.pageObj;
console.log({pageIndex,pageSize}, '最新的分页数据');
let resData = await axiosEL({
url:'/ticket/list',
method:'get',
params:{
index:pageIndex,
size:pageSize
},
mocktag:true
})
this.setState({
shopList:resData.tempList,
pageObj:{...this.state.pageObj, total:resData.total}
})
}
{/* 数据总共有多少条 total,
当前在哪个页面 pageIndex
每页显示多少条 pageSize */}
<PageNumber total={pageObj.total} pageIndex={pageObj.pageIndex} pageSize={pageObj.pageSize} paging={this.getPageData}></PageNumber>

分页思路：通过传总共的数据条数 total, 当前在显示的页码数 pageIndex，每页显示多少条 pageSize传给子组件，然后通过total计算出分页页码，在点击页码和修改每页显示条数的时候，需要给子组件回传相应的参数 pageIndex， pageSize，通过给子组件传一个类型为函数的属性paging, 在子组件中调用 this.props.paging() 来给父组件传值，父组件获取到数据后更新当前的 pageIndex ， pageSize，然后再调用接口

线性进度条

样式：

.outer {
width: var(--width);
height:var(--height,10px);
background: var(--bg);
border-radius: 10px;
position: relative;
.inner {
height: 100%;
position: absolute;
left: 0;
top: 0;
background: var(--color);
border-radius: 10px;
animation: run 2s linear forwards;
}
}
@keyframes run {
0% {
width: 0%;
}
100% {
width: var(--percent);
}
}

forwards: 代表动画执行完停留在结束的状态

backwards：代表动画执行完回到最初的状态，默认值

进度条组件：

import React, { Component } from 'react'
import './main.scss';
export default class ProgressBar extends Component {
// bg="#000" color="red" height="20px" percent="20%"
static defaultProps = {
bg:'#ccc',
color:'#ff6600',
height:'10px',
width:'100%',
percent:'0%'
}
render() {
const {bg,color,height,percent,width} = this.props;
return (
<div className='outer' style={{'--bg':bg,
'--color':color,
'--height':height,
'--width':width,
'--percent':percent}}>
<div className='inner'></div>
</div>
)
}
}

页面中使用：

{/* 底色背景，百分比颜色color, height 进度条的百分比 percent */}
<ProgressBar percent="10%" ></ProgressBar>

form表单补充

form表单数据比较多，可以使用受控组件，value 与onChange配合一起使用监听input 的改变，使用setState管理表单数据，

数据比较少的时候，可以使用非受控ref

另外可以使用原生的方式

通过 new FormData(表单的dom) 可以获取到表单所有的数据，是formdata ,Iterator类型数据,可以通过for of循环

formObj={};
submitForm = (ev)=>{
// 拿到form 对象
let formDom = ev.target;
let bgdata = new FormData(formDom);
// Iterator类型数据，可以使用for of循环
for(let [key,value] of bgdata) {
console.log(key);
console.log(value);
this.formObj[key] = value;
}
console.log(this.formObj, '表单数据');
//调接口
ev.preventDefault(); //阻止默认行为,不让刷新页面
}

圆环进度条

arc 用法

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。

方法有六个参数：

x,y 为绘制圆弧所在圆上的圆心坐标。

radius 为半径。

startAngle 以及 endAngle 参数用弧度定义了开始以及结束的弧度。

这些都是以 x 轴为基准。

参数 anticlockwise 为一个布尔值。

为 true 时，是逆时针方向，否则顺时针方向。

注意：arc()函数中表示角的单位是弧度，不是角度。

角度与弧度的 js 表达式:

弧度=(Math.PI/180)*角度

圆环组件代码：

import React, { Component } from 'react'
// 自定义的属性：
// 百分比，颜色，线的宽度底色，画布的大小
export default class ProgressCircle extends Component {
drawCircle = ()=>{
let canvasDom = document.getElementById('mycanvas');
let ctx = canvasDom.getContext('2d'); // 2d的笔触
// 把原始坐标点移到 100 100
const {color,bg,percent} = this.props;
// 获取画布大小
let canvasWid = canvasDom.width,
canvasHeight = canvasDom.height;
// 那就在canvas translate前save，后再restore
// translate移动坐标点之前，保存现场
ctx.save();
ctx.translate(canvasWid/2,canvasHeight/2);
// 底色圆环
// 弧度=(Math.PI/180)*角度。
ctx.beginPath(); // 开始绘制路径
// (Math.PI / 180) * 360 = 2 * Math.PI
ctx.arc(0,0,canvasWid/2 - 10,0,2 * Math.PI); // 绘制一个圆
ctx.lineWidth = 10;
ctx.strokeStyle = bg;
ctx.stroke(); // 绘制路径
ctx.closePath(); // 结束前面的路径
// 百分比的圆环
var innerCircle = ()=>{
ctx.beginPath(); // 开始绘制新的路径
// (Math.PI / 180) * 360 * percent = 2 * Math.PI * percent
ctx.arc(0,0,canvasWid/2-10,0,2 * Math.PI* percent,false); // 绘制一个圆，默认是顺时针false , true逆时针
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.strokeStyle = color;
ctx.stroke(); // 绘制路径
}
innerCircle();
ctx.restore(); //恢复到 translate之前的状态
}
componentDidMount(){
this.drawCircle();
}
render() {
return (
<canvas id='mycanvas' width={this.props.width} height={this.props.height} style={{border:'1px solid #ccc'}}></canvas>
)
}
}

页面中使用组件

{/* <ProgressBar percent="10%" ></ProgressBar> */}
<ProgressCircle bg="#ccc" color="blue"
width="200px" height="200px" percent={0.4}></ProgressCircle>

React Day6

vite创建项目

vite是vue团队开发的一个打包工具，他的对手是webpack

官网地址：

搭建第一个 Vite 项目

1.创建项目

yarn create vite

2.输入项目的名称

3.选择你创建的项目，vue/ react

3.cd进入到你创建的项目目录，安装依赖

yarn

启动项目
1. yarn dev // npm run dev

在项目cmd控制台，按h可以查看快捷键

r: 重启服务

u:显示服务地址

o:从浏览器打开网页

c:清空控制台的信息

q：退出系统

安装css预处理Less环境

antd是react的ui框架，底层是less开发的，所以我们直接安装less的环境

yarn add less

路由的搭建

和之前类组件创建路由的方式一样

import {BrowserRouter,Routes,Route,Navigate} from 'react-router-dom'
<BrowserRouter>
<h1>Vite + React</h1>
<div className='content'>
<Routes>
<Route path='/home' element={<Home></Home>}></Route>
<Route path='/about' element={<About></About>}></Route>
<Route path='/login' element={<Login></Login>}></Route>
<Route path='/' element={<Navigate to='/login'></Navigate>}></Route>
</Routes>
</div>
</BrowserRouter>

函数组件和类组件的区别

类组件特点：

1.类组件是基于面向对象class开发，有this，有状态

2.类组件里有完整的内部数据，通过setState来管理数据

3.render函数返回一个虚拟dom

函数组件特点：

1.基于函数式编程，内部没有this,没有状态

2.函数组件没有内部状态，我们依赖其他的方案（hooks）

3.react自动开启了严格模式，函数内部的this指向 undefined, 内部的变量必须要先定义再使用

4.return 返回一个虚拟dom

函数组件hooks编程

react 16.8版本以后，官方推荐使用函数组件编程，引入hooks函数，按需引入

useState的使用

import React,{useState} from 'react'
export default function Login() {
const [username,setUserName] = useState('alice')
const updateUsername = function(data){
console.log(data);
setUserName(data);
}
return (
<div>Login {username}
<button onClick={()=>updateUsername('xiaowang')}>修改</button>
</div>
)
}

1.hooks函数先引入再使用

2.useState定义内部变量

const [username,setUserName] = useState('alice')
变量是自定义，修改变量的函数的名字，约定 set + 变量，方便维护管理代码，
变量的初始值，可以在使用 useState添加初始的value

3.定义的这个set函数也是异步，修改数据后，不能马上打印修改的数据，类似类组件中的setState

4.定义内部数据的时候，可以定义字符串，数字，boolean,对象，数组等类型

5.使用useState定义变量的时候，你的初始值是什么类型，然后使用set函数的时候，也要保持类型的一致

const [num,setNum] = useState(1);
方式一：
<button onClick={()=>setNum(num+1)}>更新数字</button>
方式二：
<button onClick={()=>setNum((oldnum)=>oldnum+1)}>更新数字</button>

注意：你通过useState定义的变量是不可以变，不能直接修改，如果需要修改，你可以进行一个拷贝再追加数据

const addData = ()=>{
let data1 = {name:'小刚',age:30};
// 给数组添加新的数据，定义的内部数据是不可变
let newdata = [...studentArr,data1];
setStudentArr(newdata);
}

因为set函数式异步，不能马上获取到修改的数据，需要借助其他的hooks函数监听

useEffect的使用

函数组件里没有生命周期函数，可以借助useEffect模拟生命周期

类组件中生命周期函数

componentDidMount 组件渲染完毕，只调一次
componentDidUpdate 组件更新完毕，每车次数组更新都会
componentWillUnmount 组件卸载
shouldcomponentUpdate 性能调试，我需要更新组件吗？

模拟 componentDidMount

import React, { useEffect,useState } from 'react'
....
useEffect(()=>{
// componentDidMount,
console.log('只会执行一次，在这里获取dom, 调接口，定时器等');
},[])

useEffect接收2个参数，第一个是箭头函数，第二个是空的数组

模拟componentDidUpdate

useEffect(()=>{
console.log('0000');
})

当useEffect的第二参数不写，监听所有内部数据的更新

如果你想监听某个变量的更新，类似vue里的watch,第二个参数以中括号形式，写入你要监听的变量

useEffect(()=>{
console.log(username,'我获取新的值了 username');
console.log(num,'我获取新的值了num ');
},[username,num])

模拟componentWillUnmount

useEffect(()=>{
// componentDidMount, 只会执行一次，在这里获取dom, 调接口，定时器等
timer = setInterval(()=>{
console.log('我是定时器');
},1000)
return ()=>{
clearInterval(timer)
}
},[])

useRef的使用

1.获取dom对象

2.保存数据，当成普通的变量存取数据

类组件使用是React.createRef , 一般函数组件中使用 useRef来创建 ref变量

React.createRef() 和 useRef区别：

1.createRef每次渲染的时候，会返回一个新的引用，而useRef每次返回的是相同的引用

在函数组件中，你可以使用 React.createRef 和 useRef，但是建议使用 useRef

1.获取dom对象

import React, { useEffect, useRef } from 'react'
export default function About() {
const userRef = useRef(null); // 定义某一个ref变量
useEffect(()=>{
// componentDidMount, 只会执行一次
// 可以获取模板中的dom
let userDom = userRef.current;
console.log(userDom);
},[])
return (
<div ref={userRef}>
About
</div>
)
}

引入useRef ,import { useRef } from 'react'
定义一个ref变量 const userRef = useRef(null);
在模板上某个标签上使用ref变量 <div ref={userRef}>
获取ref变量, let userDom = userRef.current;

注意： react中属于严格，不能使用关键字作为你的变量名；

2.保存数据，当成普通的变量存取数据

useRef用来保存数据的时候，他数据的改变不会影响模板的重新，类似普通变量；

但是通过useState定义的变量，一旦修改，模板会重新渲染

import React, { useEffect, useRef } from 'react'
export default function About() {
const testRef = useRef({username:'alice'});// 变量，保存数据
useEffect(()=>{
testRef.current = {username:'xiaohong '};
},[])
return (
<div>
About
</div>
)
}

父子组件传值

父传子props属性传值

父组件

import React from 'react'
import LoadingBar from '../components/loading/LoadingBar'
export default function News() {
const getData = (data)=>{
console.log(data,'接收子组件的数据');
}
return (
<div>News
<LoadingBar color='red' bg="#ccc" send={getData}></LoadingBar>
</div>
)
}

子组件：

import React from 'react'
export default function LoadingBar(props) {
console.log(props);
const sendData = ()=>{
props.send({from:'loading'})
}
return (
<div>
LoadingBar
<button onClick={sendData}>发送</button>
</div>
)
}

子组件接收父组件的值，通过props, 然后子组件给父组件传，就是通过父组件在使用子组件的时候，通过传一个类型为函数的属性，然后在子组件调用

默认属性defaultProps

子组件里定义

LoadingBar.defaultProps = {
color:'#000'
}

LoadingBar是你自定义的函数名，写在函数组件的外面

类型检验

import propTypeO from 'prop-types'; // prop-types是新版react中内置的，不需要安装
LoadingBar.propTypes = {
color:propTypeO.string
}

loading加载动画函数组件完整js代码

import React from 'react'
import propTypes from 'prop-types'
import './load.less'
var obj = {
min:0.5,
small:1,
big:2
}
// props默认属性
Loading.defaultProps = {
color:'green',
size:'small'
}
// props属性校验
Loading.propTypes = {
color:propTypes.string,
size:propTypes.string
}
export default function Loading(props) {
const styleObj = {
'--color':props.color,
transform:'scale('+obj[props.size]+')'
}
return (
<div className="loading" style={styleObj}>
<div className="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div className="box2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
)
}

样式文件：

.loading {
margin: 50px;
position: relative;
width: 60px;
height: 60px;
}
.loading .box1,.loading .box2 {
position: absolute;
width: 100%;
height: 100%;
}
.loading .box1 div,.loading .box2 div {
position: absolute;
width: 10px;
height: 10px;
// background: blue;
background: var(--color,blue);
border-radius: 50%;
animation: loadingRun 1.5s linear infinite;
}
.loading .box2 { transform: rotate(45deg)}
.loading .box1 div:nth-child(1) { left: 0; top: 0; animation-delay: 0; }
.loading .box2 div:nth-child(1) { left: 0; top: 0; animation-delay: -0.2s; }
.loading .box1 div:nth-child(2) { right: 0; top: 0; animation-delay: -0.4s;}
.loading .box2 div:nth-child(2) { right: 0; top: 0; animation-delay: -0.6s;}
.loading .box1 div:nth-child(3) { right: 0; bottom: 0; animation-delay: -0.8s;}
.loading .box2 div:nth-child(3) { right: 0; bottom: 0; animation-delay: -1s;}
.loading .box1 div:nth-child(4) { left: 0; bottom: 0; animation-delay: -1.2s;}
.loading .box2 div:nth-child(4) { left: 0; bottom: 0; animation-delay: -1.4s;}
@keyframes loadingRun {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}

文件中使用

import Loading from '../components/loading/Loading'
...
<Loading color={'red'} size="big"></Loading>
...

进度环组件封装

组件ProgressCircle.jsx代码：

import React, { useEffect } from 'react'
ProgressCircle.defaultProps = {
color:'#ff6600',
bg:'#000',
percent:0.4,
width:'200px',
height:'200px'
}
export default function ProgressCircle(props) {
let timer = null;
const drawCircle = ()=>{
let canvasDom = document.getElementById('mycanvas');
let ctx = canvasDom.getContext('2d'); // 2d的笔触
const {color,bg,percent} = props;
// 获取画布大小
let canvasWid = canvasDom.width,
canvasHeight = canvasDom.height;
let x1 = canvasWid/2,
y1 = canvasHeight/2;
// 底色圆环
// 弧度=(Math.PI/180)*角度。
ctx.beginPath(); // 开始绘制路径
// (Math.PI / 180) * 360 = 2 * Math.PI
ctx.arc(x1,y1,canvasWid/2 - 10,0,2 * Math.PI); // 绘制一个圆
ctx.lineWidth = 10;
ctx.strokeStyle = bg;
ctx.stroke(); // 绘制路径
ctx.closePath(); // 结束前面的路径
// 百分比的圆环
var innerCircle = (range)=>{
ctx.beginPath(); // 开始绘制新的路径
// 度数转化为弧度公式：
// 弧度 = (Math.PI / 180) * 角度
ctx.arc(x1,y1,canvasWid/2-10,0, (Math.PI / 180) * range ,false); // 绘制一个圆，默认是顺时针false , true逆时针
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.strokeStyle = color;
ctx.stroke(); // 绘制路径
}
// 思路：添加一个定时器，每隔一段时间重复绘制，形成动画
var beginRate = 0;
timer = setInterval(()=>{
beginRate+=5; // 度为单位
// 360 * percent ，传度数进去
if(beginRate<=360 * percent) {
innerCircle(beginRate);
} else {
clearInterval(timer);
}
},16)
innerCircle();
}
useEffect(()=>{
drawCircle();
},[])
return (
<canvas id='mycanvas' width={props.width} height={props.height} style={{border:'1px solid #ccc'}}></canvas>
)
}

角度转成弧度的公式如下：

弧度 = (Math.PI / 180) * 角度

页面中使用组件：

import ProgressCircle from '../components/progress/ProgressCircle';
...
<ProgressCircle bg="#ccc" color="red" percent={0.5}></ProgressCircle>
...

React Day7

约束性和非约束性组件

菜单封装

路由useRoutes

useMemo计算器属性

memo 用来缓存组件

useCallBack缓存函数

antd布局

约束性和非约束性组件

约束性（受控组件）

变量的value交给函数组件useState来管理，使用 set函数修改数据

import {useState } from 'react'
const [username,setUserName] = useState('alice');
const updateUsername = function(data){
setUserName(data);
}
....
<input type="text" value={username} onChange={(ev)=>updateUsername(ev.target.value)} />

非约束性（非受控组件）

表单中变量的value值交给dom管理

想获取非受控组件里的value值，通过ref变量

import { useRef } from 'react'
const inputRef = useRef(); //用来管理dom
const getInput = ()=>{
let inputDom = inputRef.current;
console.log(inputDom.value);
}
<p>非受控组件</p>
<input type="text" defaultValue={username} ref={inputRef} />
<button onClick={getInput}>获取ref变量的值</button>

注意：1.所有的hooks函数，都需要先引入再使用

2.hooks函数只能在函数组件中使用，不能在类组件中使用

3.defaultValue默认值不能被修改，

map与flatMap，flat

flat()扁平化数组

flat用来扁平化数组

如果参数为空，默认是1

用法
var newArray = arr.flat(depth); // depth是number或者 Infinity

1.扁平化嵌套数组

var arr = [1,2,3,[6,7,8,['aa','bb','cc']]];
arr.flat(1);
arr.flat(2);

2.Infinity扁平化任意深度

var arr = [1,2,3,[6,7,8,['aa','bb','cc']]];
arr.flat(Infinity); //无限极扁平，直到是一维数组

3.扁平化空数组[]

如果数组中有空的[], 可以通过过滤或者for循环处理，也可以通过flat扁平化处理，但是不能扁平化undefined

var arr2 = ['t1','t2',[]];
经过flat扁平化后
arr2.flat() // ['t1','t2'];

特别注意：不能扁平化undefined

map与flatMap的用法

需求：把数组中的每一项都乘以2
const obj1 = [1, 2, 3, 4, 5];

第一种方式：使用map

let newarr1 = obj1.map((value)=>{
return value * 2
})
console.log(newarr1);

第二种：使用flatMap

let newarr1 = obj1.flatMap((value)=>{
return [value * 2]
})
console.log(newarr1);

使用flatMap与map不同的地方是需要用[]括起来

扁平化实际运用,准备数据

const arr1 = [{
name:'alice',
age:20
},{
name:'laney',
age:10
},{
name:'song',
age:5
}]

需求：过滤出年龄age大于5的数据，然后对过滤后的数据重新组装，比如年龄乘以 2

方式一：使用map处理数据

let arr = personList.map((item)=>{
if(item.age>5){
item.from = 'china';
item.age = item.age *2;
return item
} else {
return []
}
})
console.log(arr.flat());

1.对不符合条件的项，必须要返回空的数组[],为了方便使用 flat扁平化

2.对过滤的数据使用flat arr.flat()

方式一：使用flatMap处理数据

let arr = personList.flatMap((item)=>{
if(item.age>5){
item.from = 'china';
item.age = item.age *2;
return item
} else {
return [] // 不符合的条件，这里一定要返回一个空的数组
}
})
console.log(arr);

1.flatMap和map的使用方式一样，只是flatMap帮我们做了扁平化，我们得到的数据不需要再次使用flat过滤空项了，但是一样需要对不符合条件的项要返回一个[]

React中通过递归实现菜单的渲染

menus.js代码如下：

var menudata = [
{
name:'菜单一',
child:[
{name:'a1',child:[{name:'a1-1'},{name:'a1-2'}]},
{name:'a2'},
{name:'a3',child:[{name:'a3-1'},{name:'a3-2',child:[{name:'a3-2-1'},{name:'a3-2-2'}]}]}
]
},
{
name:'菜单二',
child:[{name:'b1'},{name:'b2'},{name:'b3'}]
},
{
name:'菜单三',
child:[{name:'c1'}]
},
{
name:'',
child:[{name:'d1'}]
},
{
name:'菜单四'
}
];
export default menudata;

方式一：map遍历+flat扁平化数组

const [menuArr,setMenuarr] = useState([]);
//map方式 , 递归 + []
const menuFormat = (menus)=>{
let menuToal = menus.map((item,index)=>{
if(item.name) {
return <li key={index}><span>{item.name}</span>
{item.child && <ul> {menuFormat(item.child)} </ul>}</li>
} else {
return [] //返回一个空的数组，是为了使用flat拍平
}
})
return menuToal;
}
useEffect(()=>{
let menuAll = menuFormat(menudata).flat();
setMenuarr(menuAll)
},[])

方式二：flatMap

flatMap使用方式基本和map一样, 不一样的地方时flatMap已经处理了数据扁平化的工作，不需要再次使用flat处理

const menuFormat = (menus)=>{
let menuToal = menus.flatMap((item,index)=>{
if(item.name) {
return <li key={index}><span>{item.name}</span>{item.child && <ul> {menuFormat(item.child)} </ul>}</li>
} else {
return [] //返回一个空的数组，flatMap会自动扁平化
}
})
return menuToal;
}
useEffect(()=>{
let menuAll = menuFormat(menudata);
setMenuarr(menuAll)
},[])

方式三：filter过滤+map循环递归

先通过filter把符合条件的数据过滤出来，然后再对过滤好的数据进行map循环遍历，以及递归拼接虚拟dao的菜单格式

const menuFormat = (menus)=>{
let menuA = menus.filter((option)=>{
return option.name
})
let menuTotal = menuA.map((item,index)=>{
return <li key={index}><span>{item.name}</span> {item.child && <ul>{menuFormat(item.child)}</ul> } </li>
})
return menuTotal;
}
useEffect(()=>{
let menuAll = menuFormat(menudata);
setMenuarr(menuAll)
},[])

路由useRoutes

useRoutes可以帮我们简化路由的配置，可以类似vue里的配置式路由，处理好会生成Routes + Route的配置结构

在src目录新建router/RouterIndex.jsx

第一步：导入useRoutes

import {useRoutes} from 'react-router-dom'

第二步：配置路由表

let routes = [{
path:'/about',
element:<About></About>
},{
path:'/login',
element:<Login></Login>
},
{
path:'/layout',
element:<Layout></Layout>,
children: [
{
path: '',
element: <Navigate to='home'></Navigate>
},
{
path: 'home', // 第二级
name:'首页',
element: <Home></Home>
},
{
path: 'users', // 第二级
name:'用户',
element: <User></User>
}]
}
]

第三步：在函数组件中使用useRoutes

export default function RouterIndex() {
let routerList = useRoutes(routes)
return routerList;
}

第四步：在根组件app.jsx中导入路由组件

import RouterIndex from "./router/RouterIndex"
...
<BrowserRouter>
<RouterIndex></RouterIndex>
</BrowserRouter>
...

注意： RouterIndex必须放在路由容器BrowserRouter 或者 HashRouter里面

菜鸡前端选手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 1-7天学习笔记

React就是起源于facebook的一个javascript库， react只是v层，只是负责UI找层界面的显示，需要周边环境的而一些支持1.类中定义的箭头函数，没有挂载在类组件的原型上，在类继承中，箭头函数也被继承，但是被不是被挂载在原型上2.一般情况下类中的this指向实例，类中方法实例调用的话，类方法中this就指向实例对象3.在JavaScript中，类中的普通方法被存储在类的原型对象中。当你将一个方法复制给一个变量后再执行，方法中的this可以改变。这是因为this。
复制链接

扫一扫