React简介--尚硅谷react全家桶笔记总结

学习使我快乐 🤣

React简介

官网

英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

介绍描述

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

React的特点

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

React的基本使用

效果

在这里插入图片描述

创建虚拟DOM的两种方式

在这里插入图片描述

纯JS方式(一般不用)
JSX方式

虚拟DOM与真实DOM

React提供了一些API来创建一种 “特别” 的一般js对象

const  VDOM = React.createElement('xx',{id:'xx'},'xx')

上面创建的就是一个简单的虚拟DOM对象

虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

React JSX

效果

在这里插入图片描述

JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是

**React.createElement(component, props, ...children)**方法的语法糖
作用: 用来简化创建虚拟DOM

写法：var ele =
Hello JSX!
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明

参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX练习

需求: 动态展示如下列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >/* 一定注意区分：【js语句(代码)】与【js表达式】1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式：(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.语句(代码)：下面这些都是语句(代码)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

模块与组件、模块化与组件化的理解

模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

在这里插入图片描述

React面向组件编程

2.1. 基本理解和使用

2.1.1. 使用React开发者工具调试

在这里插入图片描述

2.1.2. 效果

函数式组件：

在这里插入图片描述

类式组件：
在这里插入图片描述

2.1.3. 注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

2.1.4. 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

2.2. 组件三大核心属性1: state

2.2.1. 效果

需求*😗 定义一个展示天气信息的组件

1. 默认展示天气炎热或凉爽

2. 点击文字切换天气

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_回调ref中回调执行次数的问题</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{state = {isHot:false}showInfo = ()=>{const {input1} = thisalert(input1.value)}changeWeather = ()=>{//获取原来的状态const {isHot} = this.state//更新状态this.setState({isHot:!isHot})}saveInput = (c)=>{this.input1 = c;console.log('@',c);}render(){const {isHot} = this.statereturn(<div><h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}<input ref={this.saveInput} type="text"/><br/><br/><button onClick={this.showInfo}>点我提示输入的数据</button><button onClick={this.changeWeather}>点我切换天气</button></div>)}}//渲染组件到页面ReactDOM.render(<Demo/>,document.getElementById('test'))</script>
</body>
</html>

2.2.2. 理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.3. 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数

状态数据，不能直接修改或更新

2.3. 组件三大核心属性2: props

2.3.1. 效果

需求*😗 自定义用来显示一个人员信息的组件

1. 姓名必须指定，且为字符串类型；

2. 性别为字符串类型，如果性别没有指定，默认为男

3. 年龄为字符串类型，且为数字类型，默认值为1**8

在这里插入图片描述

2.3.2. 理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

2.3.3. 作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

2.3.4. 编码操作

内部读取某个属性值

this.props.name

对props中的属性值进行类型限制和必要性限制

Person.propTypes = {name: React.PropTypes.string.isRequired,age: React.PropTypes.number}

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {name: PropTypes.string.isRequired,age: PropTypes.number. 
}

扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

默认属性值：

Person.defaultProps = {age: 18,sex:'男'
}

组件类的构造函数

  constructor(props){super(props)console.log(props)//打印所有属性
}

2.4. 组件三大核心属性3: refs与事件处理

2.4.1. 效果

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值

2. 当第2个输入框失去焦点时, 提示这个输入框中的值

2.4.2.理解

组件内的标签可以定义ref属性来标识自己

2.4.3. 编码

字符串形式的ref

<input ref="input1"/>

回调形式的ref

<input ref={(c)=>{this.input1 = c}}

createRef创建ref容器·

myRef = React.createRef() 
<input ref={this.myRef}/>

2.4.4. 事件处理

通过onXxx属性指定事件处理函数(注意大小写)

React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

通过event.target得到发生事件的DOM元素对象

2.5. 收集表单数据

2.5.1. 效果

*需求: 定义一个包含表单的组件

输入用户名密码后, 点击登录提示输入信息

2.5.2. 理解

包含表单的组件分类

受控组件
非受控组件

2.6. 组件的生命周期

2.6.1. 效果

需求*😗定义组件实现以下功能：

1. 让指定的文本做显示 / 隐藏的渐变动画

2. 从完全可见，到彻底消失，耗时**2S

3. 点击“不活了”按钮从界面中卸载组件

2.6.2. 理解

组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2.6.3. 生命周期流程图(旧)

在这里插入图片描述

生命周期的三个阶段（旧）

1. 初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
componentWillMount()

3.render()

4.componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

shouldComponentUpdate()

2.componentWillUpdate()

render()
componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

2.6.4. 生命周期流程图(新)

在这里插入图片描述

生命周期的三个阶段（新）

1.初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
getDerivedStateFromProps
render()
componentDidMount()

2. 更新阶段**😗* 由组件内部this.setSate()或父组件重新render触发

1.getDerivedStateFromProps
2.shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()

3. 卸载组件**😗* 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

2.6.5. 重要的勾子

render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器

2.6.6. 即将废弃的勾子

componentWillMount
componentWillReceiveProps
componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

2.7.虚拟DOM与DOM Diffing算法

2.7.1. 效果

需求：验证虚拟DOM Diffing算法的存在

2.7.2. 基本原理图

在这里插入图片描述

React应用(基于React脚手架)

3.1. 使用create-react-app创建react应用

3.1.1. react脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖
可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.1.2. 创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：npm start

3.1.3. react脚手架项目结构

public ---- 静态资源文件夹

favicon.icon ------ 网站页签图标

index.html -------- 主页面

logo192.png ------- logo图

logo512.png ------- logo图

manifest.json ----- 应用加壳的配置文件

robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

App.css -------- App组件的样式

App.js --------- App组件

App.test.js ---- 用于给App做测试

index.css ------ 样式

index.js -****------ 入口文件

logo.svg ------- logo图

reportWebVitals.js

— 页面性能分析文件(需要web-vitals库的支持)

setupTests.js

---- 组件单元测试的文件(需要jest-dom库的支持)

3.1.4. 功能界面的组件化编码流程（通用）

拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件

3.1 动态显示初始化数据

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个组件?

3.2 交互(从绑定事件监听开始)

3.2. 组件的组合使用-TodoList

功能*😗 组件化实现此功能

1. 显示所有todo列表

2.输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

todoList案例相关知识点

1.拆分组件、实现静态组件，注意：className、style的写法

2.动态初始化列表，如何确定将数据放在哪个组件的state中？

——某个组件使用：放在其自身的state中

——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）

3.关于父子之间通信：

1.【父组件】给【子组件】传递数据：通过props传递

2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数

4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value

5.状态在哪里，操作状态的方法就在哪里
```

React ajax

4.1. 理解

4.1.1. 前置说明

React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装)

4.1.2. 常用的ajax请求库

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用

封装XmlHttpRequest对象的ajax
promise风格
可以用在浏览器端和node服务器端

4.2. axios

4.2.1. 文档

https://github.com/axios/axios

4.2.2. 相关API

GET请求

axios.get('/user?ID=12345') .then(function (response) {   console.log(response.data);  
})  .catch(function (error) { console.log(error);
}); axios.get('/user', {    params: {      ID: 12345    }  }).then(function (response) {   console.log(response);  
})  .catch(function (error) { console.log(error);  
});

POST请求

axios.post('/user', {  firstName: 'Fred',  lastName: 'Flintstone'}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});

4.3. 案例—github用户搜索

4.3.1. 效果

请求地址: https://api.github.com/search/users?q=xxxxxx

github搜索案例相关知识点

```

1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。

2.ES6小知识点：解构赋值+重命名

let obj = {a:{b:1}}

const {a} = obj; //传统解构赋值

const {a:{b}} = obj; //连续解构赋值

const {a:{b:value}} = obj; //连续解构赋值+重命名

3.消息订阅与发布机制

1.先订阅，再发布（理解：有一种隔空对话的感觉）

2.适用于任意组件间通信

3.要在组件的componentWillUnmount中取消订阅

4.fetch发送请求（关注分离的设计思想）

try {

const response= await fetch(/api1/search/users2?q=${keyWord})

const data = await response.json()

console.log(data);

} catch (error) {

console.log(‘请求出错’,error);

}
```

4.4. 消息订阅-发布机制

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:

import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(data){ }); //订阅

3)PubSub.publish('delete', data)//发布消息

4.5. 扩展：Fetch

4.5.1. 文档

https://github.github.io/fetch/
https://segmentfault.com/a/1190000003810652

4.5.2. 特点

fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
老版本浏览器可能不支持

4.5.3. 相关API

GET请求

fetch(url).then(function(response) { return response.json() 
}).then(function(data) {   console.log(data) 
}).catch(function(e) {  console.log(e) 
});

POST请求

  fetch(url, {   method: "POST", body: JSON.stringify(data),}).then(function(data) { console.log(data) }).catch(function(e) { console.log(e)})

React路由

5.1. 相关理解

5.1.1. SPA的理解

单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。

5.1.2. 路由的理解

1. 什么是路由?

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

2. 路由分类

后端路由：

理解： value是function, 用来处理客户端提交的请求。
注册路由： router.get(path, function(req, res))
工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

浏览器端路由，value是component，用于展示页面内容。
注册路由:
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

5.1.3. react-router-dom的理解

react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。

5.2. react-router-dom相关API

5.2.1. 内置组件

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

5.2.2. 其它

history对象
match对象
withRouter函数

5.3. 基本路由使用

5.3.1. 效果

在这里插入图片描述

5.3.2. 准备

下载react-router-dom: npm install --save react-router-dom
引入bootstrap.css:

5.4. 嵌套路由使用

效果

在这里插入图片描述

5.5. 向路由组件传递参数数据

效果

在这里插入图片描述

5.6. 多种路由跳转方式

效果

在这里插入图片描述

路由总结：

路由的基本使用1.明确好界面中的导航区、展示区2.导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link>3.展示区写Route标签进行路径的匹配<Route path='/xxxx' component={Demo}/>4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

路由组件与一般组件1.写法不同：一般组件：<Demo/>路由组件：<Route path="/demo" component={Demo}/>2.存放位置不同：一般组件：components路由组件：pages3.接收到的props不同：一般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)location:pathname: "/about"search: ""state: undefinedmatch:params: {}path: "/about"url: "/about"

React UI组件库

6.1.流行的开源React UI组件库

6.1.1. material-ui(国外)

官网: http://www.material-ui.com/#/
github: https://github.com/callemall/material-ui

6.1.2. ant-design(国内蚂蚁金服)

官网: https://ant.design/index-cn
Github: https://github.com/ant-design/ant-design/

redux

7.1. redux理解

7.1.1. 学习文档

英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux

7.1.2. redux是什么

redux是一个专门用于做状态管理的JS库(不是react插件库)。
它可以用在react, angular, vue等项目中, 但基本与react配合使用。
作用: 集中式管理react应用中多个组件共享的状态。

7.1.3. 什么情况下需要使用redux

某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

7.1.4. redux工作流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LPRmjhT8-1616072078674)(file:///C: Users ADMINI~1 AppData Local Temp ksohtml11248 wps71.jpg)]

7.2. redux的三个核心概念

7.2.1. action

动作的对象
包含2个属性

l type：标识属性, 值为字符串, 唯一, 必要属性

l data：数据属性, 值类型任意, 可选属性

例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

7.2.2. reducer

用于初始化状态、加工状态。
加工时，根据旧的state和action，产生新的state的纯函数。

7.2.3. store

将state、action、reducer联系在一起的对象
如何得到此对象?

1) import {createStore} from 'redux'2) import reducer from './reducers'3) const store = createStore(reducer)

此对象的功能?

getState(): 得到state
dispatch(action): 分发action, 触发reducer调用, 产生新的state
subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

7.3. redux的核心API

7.3.1. createstore()

作用：创建包含指定reducer的store对象

7.3.2. store对象

作用: redux库最核心的管理对象
它内部维护着:
```
1) state2) reducer
```
核心方法:

1) getState()2) dispatch(action)3) subscribe(listener)

具体编码:

1) store.getState()2) store.dispatch({type:'INCREMENT', number})3) store.subscribe(render)

7.3.3. applyMiddleware()

作用：应用上基于redux的中间件(插件库)

7.3.4. combineReducers()

作用：合并多个reducer函数

7.4. 使用redux编写应用

**效果**

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jM1a2Nft-1616072078675)(file:///C: Users ADMINI~1 AppData Local Temp ksohtml11248 wps72.png)]

7.5. redux异步编程

7.5.1理解：

redux默认是不能进行异步处理的,
某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

7.5.2. 使用异步中间件

npm install --save redux-thunk

7.6. react-redux

7.6.1. 理解

一个react插件库
专门用来简化react应用中使用redux

7.6.2. react-Redux将所有组件分成两大类

UI组件

只负责 UI 的呈现，不带有任何业务逻辑
通过props接收数据(一般数据和函数)
不使用任何 Redux 的 API
一般保存在components文件夹下

容器组件

负责管理数据和业务逻辑，不负责UI的呈现
使用 Redux 的 API
一般保存在containers文件夹下

7.6.3. 相关API

Provider：让所有组件都可以得到state数据

<Provider store={store}><App />
</Provider>

connect：用于包装 UI 组件生成容器组件

import { connect } from 'react-redux'connect(mapStateToprops,mapDispatchToProps)(Counter)

mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

const mapStateToprops = function (state) {return {value: state}
}

mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

7.7. 使用上redux调试工具

7.7.1. 安装chrome浏览器插件

在这里插入图片描述

7.7.2. 下载工具依赖包

npm install --save-dev redux-devtools-extension

7.8. 纯函数和高阶函数

7.8.1. 纯函数

一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)
必须遵守以下一些约束

不得改写参数数据
不会产生任何副作用，例如网络请求，输入和输出设备
不能调用Date.now()或者Math.random()等不纯的方法

redux的reducer函数必须是一个纯函数

7.8.2. 高阶函数

理解: 一类特别的函数

情况1: 参数是函数
情况2: 返回是函数

常见的高阶函数:

定时器设置函数
数组的forEach()/map()/filter()/reduce()/find()/bind()
promise
react-redux中的connect函数

作用: 能实现更加动态, 更加可扩展的功能

总结

## 一、todoList案例相关知识点1.拆分组件、实现静态组件，注意：className、style的写法2.动态初始化列表，如何确定将数据放在哪个组件的state中？——某个组件使用：放在其自身的state中——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）3.关于父子之间通信：1.【父组件】给【子组件】传递数据：通过props传递2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value5.状态在哪里，操作状态的方法就在哪里## 二、github搜索案例相关知识点1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。2.ES6小知识点：解构赋值+重命名let obj = {a:{b:1}}const {a} = obj; //传统解构赋值const {a:{b}} = obj; //连续解构赋值const {a:{b:value}} = obj; //连续解构赋值+重命名3.消息订阅与发布机制1.先订阅，再发布（理解：有一种隔空对话的感觉）2.适用于任意组件间通信3.要在组件的componentWillUnmount中取消订阅4.fetch发送请求（关注分离的设计思想）try {const response= await fetch(`/api1/search/users2?q=${keyWord}`)const data = await response.json()console.log(data);} catch (error) {console.log('请求出错',error);}## 三、路由的基本使用1.明确好界面中的导航区、展示区2.导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link>3.展示区写Route标签进行路径的匹配<Route path='/xxxx' component={Demo}/>4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>## 四、路由组件与一般组件1.写法不同：一般组件：<Demo/>路由组件：<Route path="/demo" component={Demo}/>2.存放位置不同：一般组件：components路由组件：pages3.接收到的props不同：一般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)location:pathname: "/about"search: ""state: undefinedmatch:params: {}path: "/about"url: "/about"## 五、NavLink与封装NavLink1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名## 六、Switch的使用1.通常情况下，path和component是一一对应的关系。2.Switch可以提高路由匹配效率(单一匹配)。## 七、解决多级路径刷新页面样式丢失的问题1.public/index.html 中 引入样式时不写 ./ 写 / （常用）2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）3.使用HashRouter## 八、路由的严格匹配与模糊匹配1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）2.开启严格匹配：<Route exact={true} path="/about" component={About}/>3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由## 九、Redirect的使用	1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由2.具体编码：<Switch><Route path="/about" component={About}/><Route path="/home" component={Home}/><Redirect to="/about"/></Switch>## 十、嵌套路由1.注册子路由时要写上父路由的path值2.路由的匹配是按照注册路由的顺序进行的## 十一、向路由组件传递参数1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>接收参数：this.props.location.search备注：获取到的search是urlencoded编码字符串，需要借助querystring解析3.state参数路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>接收参数：this.props.location.state备注：刷新也可以保留住参数## 十二、编程式路由导航借助this.prosp.history对象上的API对操作路由跳转、前进、后退-this.prosp.history.push()-this.prosp.history.replace()-this.prosp.history.goBack()-this.prosp.history.goForward()-this.prosp.history.go()## 十三、BrowserRouter与HashRouter的区别1.底层原理不一样：BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如：localhost:3000/demo/testHashRouter的路径包含#,例如：localhost:3000/#/demo/test3.刷新后对路由state参数的影响(1).BrowserRouter没有任何影响，因为state保存在history对象中。(2).HashRouter刷新后会导致路由state参数的丢失！！！4.备注：HashRouter可以用于解决一些路径错误相关的问题。## 十四、antd的按需引入+自定主题1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json...."scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},....3.根目录下创建config-overrides.js//配置具体的修改规则const { override, fixBabelImports,addLessLoader} = require('customize-cra');module.exports = override(fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: true,}),addLessLoader({lessOptions:{javascriptEnabled: true,modifyVars: { '@primary-color': 'green' },}}),);4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉

s.prosp.history.go()

十三、BrowserRouter与HashRouter的区别

		1.底层原理不一样：BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如：localhost:3000/demo/testHashRouter的路径包含#,例如：localhost:3000/#/demo/test3.刷新后对路由state参数的影响(1).BrowserRouter没有任何影响，因为state保存在history对象中。(2).HashRouter刷新后会导致路由state参数的丢失！！！4.备注：HashRouter可以用于解决一些路径错误相关的问题。

十四、antd的按需引入+自定主题

		1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json...."scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},....3.根目录下创建config-overrides.js//配置具体的修改规则const { override, fixBabelImports,addLessLoader} = require('customize-cra');module.exports = override(fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: true,}),addLessLoader({lessOptions:{javascriptEnabled: true,modifyVars: { '@primary-color': 'green' },}}),);4.备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css'应该删掉

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

react+ react Hooks学习笔记
起步安装官方脚手架： npm install -g create-react-app创建项目： create-react-app react-study启动项目： npm start 文件结构文件结构一览 ├── README.md 文档 ├── public 静态资源│ ├── favicon…...
2024/4/20 20:14:41
react
REACT 介绍一款javascript前端框架，把用户界面抽象成一个个的组件，按需组合成页面，官网，与其他框架的共同点是，都采用虚拟dom，和数据驱动 angularJsreactJsvueJsangularTs控制器√--弱化过滤器√-√√指…...
2024/4/20 20:14:40
又一个框架来了！被称为要取代 React , vue ，Aangular ！
点击上方“开发者技术前线”，选择“星标”13：21 在看真爱作者 | Mark Volkmann译者 | 王强编辑 | 张之栋、王文婧近年来，Web 框架层出不穷，作为主流 Web 框架之一的 Svelte，有着独特的优势。它不仅可以构建完整的 W…...
2024/4/20 20:14:39
angular1.0初识
Angular是一款来自谷歌的开源的web前端框架，Angular基于typescript，相比于其他两个框架，Angular更适合中大型企业级项目。安装angular-cli脚手架： npm install -g angular/cli 或者 cnpm install -g angular/cli可以在已知目…...
2024/5/3 3:52:38
Angular开发Tips
1、在使用$routeProvider的时候，需要让模块依赖ngRoute，否则会提示找不到服务，示例： angular.module(module1, [ngRoute]) .config([$routeProvider, function($routeProvider){//do something... }]);2、在页面中需要绑定有风险的…...
2024/5/3 3:34:56
第三章 angular是怎么工作的
注：学习使用，禁止转载在这章中,我们会去讨论angular2中的高级概念,我们需要退一步,这样我们才能看清楚所有这些片段是怎么组装起来的. :fa-info-circle: 如果你使用angular1,你会发现angular2使用了不一样的基础模型,别慌,angular2的基础模型更加直接和…...
2024/4/21 2:59:53
angular4实战--简单的投票系统
项目地址：https://github.com/xu1260114313/angular.git 完成后：1.通过node及npm安装angular-cli:npm install -g angular/cli 2.检测angular-cli是否安装成功：如果出现以上情况，则证明angular-cli创建成功！ 3.通过ang…...
2024/4/21 2:59:45
Angular实现 js 的 sort 方法
sort() 方法用于对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。语法&am…...
2024/4/21 2:59:44
Angular知识梳理
Tomato Angular做一些问题记录目录文章目录接口访问angular环境搭建及其常用语法常用备注Radio循环绑定值组件出入值路径跳转分页单选全选上传附件日期控件fromEvent监听事件angular树结构angular生成二维码angular引用js接口访问接口路径调用修改proxy.conf.json 注意配…...
2024/4/26 22:15:01
Angular service 详解
Angular为什么需要service组件应该是专注于展示层，所以需要service来获取数据和保存数据。组件之间的通信需要service来协助完成。众所周知，angular中service采用的是依赖注入，那什么是依赖注入呢？依赖注入（DI&#xf…...
2024/4/21 2:59:42
angular学习之路12-响应式表单
1,添加单个表单控件： 步骤 1 - 注册 ReactiveFormsModule 要使用响应式表单，就要从 angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。 import { ReactiveFormsModule } from angular/forms; NgModule({ …...
2024/4/21 2:59:41
Angular 问题解决 —— 实现切换 tab 时，保持 url 参数不变；ionic 阻止click事件冒泡和捕获，获取执行当前点击事件的元素：event.srcElement.tagName；
目录问题一：实现切换 tab 时，保持 url 参数不变场景再现问题解决问题二：ionic 阻止 click事件冒泡和捕获问题一：实现切换 tab 时，保持 url 参数不变场景再现使用 Angular Ionic5 创建包含 tabs 的页面&#x…...
2024/4/21 2:59:41
angular.js ui-href 子元素和父元素的跳转互不影响——阻止冒泡
遇到一个问题，在angular.js中，父元素的div有ui-href 的链接，子元素的button也有ui-href的链接，点击子元素的ui-href 跳转的却是父元素的链接，通过阻止冒泡解决这个问题，添加一个ng-click"$event.stopP…...
2024/4/21 2:59:39
angular ngClick 阻止冒泡和默认行为
这其实是一个很简单的问题，如果你认真查看过Angular官方的API文档，本来不想记录的。但是这个问题不止一次的被人问起，所以今天在记录在这里。在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick...中加入了一个变量叫做$…...
2024/4/21 2:59:39
AngularJs禁止冒泡事件
$event.stopPropagation(); 今天看见一个比较恶心的需求，就是点击表格的 <tr> 第一格的 <input type"checkbox"> 选中，问题来了， 不知情的情况下去点击<input type"checkbox">会发现无法选中。 <…...
2024/4/21 2:59:37
关于事件冒泡和键盘事件以及与Angular的区别
一、事件冒泡方法一、使用event.cancelBubble true来组织冒泡<div click"show2()"><input type"button" value"按钮" click"show1($event)"></div>methods:{show1:function(ev){console.log(ev);alert(1);ev.cance…...
2024/4/21 2:59:36
angular 禁止事件冒泡和默认行为
事件冒泡和事件捕捉一直以来都是被讨论的话题，也许大家平时在工作中没有遇到过需要解决事件冒泡的情况举个例子： <body ng-click"fun1()"><div ng-click"fun2()"><img ng-click"fun3()" src"xxx.png…...
2024/4/21 2:59:35
ES6和React笔试题
1、var、let、const之间的区别 var声明变量可以重复声明，而let不可以重复声明var是不受限于块级的，而let是受限于块级var会与window相映射（会挂一个属性），而let不与window相映射var可以在声明的上面访问变量&#xff0…...
2024/4/21 2:59:35
React状态管理
状态管理传统MVC框架的缺陷什么是MVC？ [外链图片转存失败(img-5UKs5YTH-1563154546022)(./images/mvc-base.png)] MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种…...
2024/4/20 9:08:27
React初探
关于React，最近想花时间去了解学习，所以记录一些自己的学习内容。所有的内容只是自己的一些想法，不对的地方希望给与指正。 1. React关注于视图层因为之前学习过Angular，所以习惯Angualr的MVC的模式。Controller作为Model和Vie…...
2024/4/21 2:59:33

React简介--尚硅谷react全家桶笔记总结

React简介

官网

介绍描述

React的特点

React高效的原因

React的基本使用

效果

相关js库

创建虚拟DOM的两种方式

虚拟DOM与真实DOM

React JSX

效果

JSX

Hello JSX!

渲染虚拟DOM(元素)

JSX练习

模块与组件、模块化与组件化的理解

模块

组件

模块化

组件化

React面向组件编程

2.1. 基本理解和使用

2.1.1. 使用React开发者工具调试

2.1.2. 效果

2.1.3. 注意

2.1.4. 渲染类组件标签的基本流程

2.2. 组件三大核心属性1: state

2.2.1. 效果

2.2.2. 理解

2.2.3. 强烈注意

2.3. 组件三大核心属性2: props

2.3.1. 效果

2.3.2. 理解

2.3.3. 作用

2.3.4. 编码操作

2.4. 组件三大核心属性3: refs与事件处理

2.4.1. 效果

2.4.2.理解

2.4.3. 编码

2.4.4. 事件处理

2.5. 收集表单数据

2.5.1. 效果

2.5.2. 理解

2.6. 组件的生命周期

2.6.1. 效果

2.6.2. 理解

2.6.3. 生命周期流程图(旧)

2.6.4. 生命周期流程图**(新)**

2.6.5. 重要的勾子

2.6.6. 即将废弃的勾子

**2.7.**虚拟DOM与DOM Diffing算法

2.7.1. 效果

2.7.2. 基本原理图

React应用(基于React脚手架)

3.1. 使用create-react-app创建react应用

3.1.1. react脚手架

3.1.2. 创建项目并启动

3.1.3. react脚手架项目结构

3.1.4. 功能界面的组件化编码流程（通用）

3.2. 组件的组合使用-TodoList

React ajax

4.1. 理解

4.1.1. 前置说明

4.1.2. 常用的ajax请求库

4.2. axios

4.2.1. 文档

4.2.2. 相关API

4.3. 案例—github用户搜索

4.3.1. 效果

4.4. 消息订阅-发布机制

4.5. 扩展：Fetch

4.5.1. 文档

4.5.2. 特点

4.5.3. 相关API

React路由

5.1. 相关理解

5.1.1. SPA的理解

5.1.2. 路由的理解

2.6.4. 生命周期流程图(新)

2.7.虚拟DOM与DOM Diffing算法