2021版React技术全家桶
https://www.bilibili.com/video/BV1Ey4y1u7vi/?spm_id_from=trigger_reload
以后学new version
尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）
P1 1.react简介
React全家桶
React基础 React-router PubSub Redux Ant-Design
pubsub怕沙 redux绿大x ant-design按得赛
React
用于构建用户界面的JavaScript库
1.发送请求获取数据
2.处理数据（过滤、整理格式等）
3.操作DOM呈现页面
是一个将数据渲染为HTML视图的开源JavaScript库。
由Facebook开发，且开源。
P2 2.react的特点
1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3.原生JavaScript没有组件化编码方案，代码复用率低。
1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing 算法，尽量减少与真实DOM的交互。
P3 3.React中虚拟DOM的理解
判断this的指向
class（类）
ES6语法规范
npm包管理器
原型、
原型链
数组常用方法
模块化
P4 4.准备React代码环境
react.js：React 核心库。
react-dom.js：提供操作DOM 的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。
https://cdn.bootcdn.net/ajax/libs/react/16.14.0/umd/react.development.js
babel es6=>es5 jsx=>js
IIFE立即函数调用
babel.min.js prop-types.js react-development.js react-dom-development.js
vscode 帮助 开发者工具
js下载
https://github.com/tianyucoder/200922_react_basic
P5 5.hello react
id=test console.log(test)
<!-- react核心库 -->
<script src="./js/react.development.js"></script>
<!-- react-dom 支撑react操作Dom -->
<script src="./js/react-dom.development.js"></script>
<!-- babel jsx=>js -->
<script src="./js/babel.min.js"></script>
<script type="text/babel"> /*必须写成babel jsx*/
let VDOM=<h1>helloworld</h1>
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
P6 6.复习git相关知识
git init
git add . 到暂存起
git commit -m 'init'
vscode 版本控制 源代码管理
P7 7.虚拟DOM的两种创建方式
<script type="text/babel">
let VDOM=(
<h2>
<span>hello world</span>
</h2>
)
ReactDOM.render(VDOM,document.getElementById('app'))
</script>
let VDOM=React.createElement('h2',{id:'item'},React.createElement('span',null,'hello'))
第二种创建
<div id="app"></div>
<script type="text/javascript">
let VDOM=React.createElement('h2',{id:'item'},'hello')
ReactDOM.render(VDOM,document.getElementById('app'))
</script>
let VDOM=React.createElement('h2',{id:'item'},React.createElement('span',null,'hello'))
关于jsx，我们要知道的：
1.jsx的出现就是为了让程序员更加方便的创建虚拟DOM
2.jsx最终经过babel的编译，变成了最原始的js写法
P8 8.虚拟DOM与真实DOM
关于虚拟DOM和真实DOM
1，虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React在用的，无需真实DOM上那么多的属性。
2，虚拟DOM最终一定会转为真实DOM放入页面
P9 9.jsx的语法规则
ejs jsp
style {{}} 第一个{}变量 二个是对象
首字母大写 组件
jsx语法规则：
1，创建虚拟DOM时，不要写引号；
2.标签中要混入js表达式，要是用
3.标签中样式的类名要用className指定
4.标签中的内联样式要用style={{color:'white'}}，注意属性名转为小驼峰
5，只能有一个根标签
6.标签必须闭合
7，关于标签首字母
1，若首字母小写，那么React就会去寻找与之同名的html标签
若找见，直接转为html同名元素
若未找见，报错
2.若首字母大写，那么React就会去寻找与之同名的组件
若找见，那么就是用组件
若未找见，报错
注释 cli {/
>/}const VDOM=(
<div className="wrap">
<h1 style={{color:'green',fontSize:'60px'}}>hello world</h1>
<h1>{data}</h1>
{/*<hello>555</hello> */}
{/*<Hello>555</Hello> */}
<br/>
</div>
)
P10 10.jsx的定义
P11 11.jsx的小练习
表达式可以写 其他不可以写语句,代码 {}里面
<script type="text/babel">
let data=['Angular','Vue','React']
let VDOM=(
<div>
<h2>前端框架</h2>
<ul>
{
data.map((item,index)=><li key={index}>{item}</li>)
}
</ul>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
P12 1复习
P13 2.vscode代码片段
P14 3.对组件和模块的理解
P15 4.React开发者工具的安装
美团 斗鱼 react写
P16 5.函数式组件的使用
1.使用函数定义组件
2.使用类定义组件
hooks 厚s
执行了ReactDOM.render（<Demo/>.....后发生了什么？
1.React解析组件标签，寻找Demo组件的定义位置
2.React发现Demo组件是用函数定义的，随后React去直接调用Demo函数，将返回的虚拟DoM渲染到页面
<script type="text/babel">
function Demo(){
console.log(this)//此处的this是undefined，因为经过babel翻译，开启了严格模式 残缺this
return <h2>用于简单组件</h2>
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P17 6.回忆类相关知识
1.类中的构造器不是必须要写的，如果想给实例添加一些自己独有的属性，那么就要写构造器；
2.如果A类继承了B类，且A类中写了构造器，那么在A类的构造器中必须调用super
3.类中的方法是放在类的原型对象上的，供实例使用，如果是通过实例调用的方法，那么方法中的this就是实例对象。
P18 7类式组件的使用
执行了ReactDOM.render（<Demo/>....后发生了什么？
1.React解析组件标签，寻找Demo组件的定义位置
2.React发现Demo组件是用类定义的，React创建了一个Demo的实例对象——d
3.通过d去调用到了render方法
1.render方法是放在哪里的？-----Demo的原型对象上，供实例使用
2.render中的this是谁？-----Demo的实例对象
Demo类的实例对象 <=> Demo组件实例对象<=> Demo组件对象
<script type="text/babel">
class Demo extends React.Component{
render(){
return <h1>类式组件,用于复杂情况</h1>
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P19 8.初始化状态
复杂组件 类才有
组件三大核心属性1：state
组件三大核心属性2：props
组件三大核心属性3：refs与事件处理
let a=null 暗示存对象
<script type="text/babel">
class Demo extends React.Component{
constructor(props){
super(props)
this.state={isHot:false}
}
render(){
let {isHot}=this.state
return <h1>今天天气{isHot?'热':'凉'}</h1>
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P20 9.React中绑定事件监听
onclick==>onClick onblur=onBlur
写()直接调用了
P21 10.类中函数做回调使用时this指向的问题
类中方法默认开启严格模式
<script type="text/babel">
class Demo extends React.Component{
constructor(props){
super(props)
this.state={isHot:false}
}
render(){
let {isHot}=this.state
return <h1 onClick={this.changeHot}>今天天气{isHot?'热':'凉'}</h1>
// return <h1 onClick={this.changeHot()}>今天天气{isHot?'热':'凉'}</h1> 1
}
changeHot(){
console.log(this) //undefine
// console.log(this) 1 Demo实例
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P22 11.解决this指向问题
<script type="text/babel">
class Demo extends React.Component{
constructor(props){
super(props)
this.state={isHot:false}
this.changeHot=this.changeHot.bind(this)
}
render(){
let {isHot}=this.state
return <h1 onClick={this.changeHot}>今天天气{isHot?'热':'凉'}</h1>
}
changeHot(){
console.log(this)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P23 12.setState的使用
let arr=[2,4,6]
const [,,a]=arr //逗号占位
console.log(a)//6
<script type="text/babel">
class Demo extends React.Component{
constructor(props){
super(props)
this.state={isHot:false}
this.changeHot=this.changeHot.bind(this)
}
render(){
let {isHot}=this.state
return <h1 onClick={this.changeHot}>今天天气{isHot?'热':'凉'}</h1>
}
changeHot(){
let isHot=this.state.isHot
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P24 13.state的简写方式
组件类中程序员定义的事件回调，必须写成赋值语句+箭头函数，避免了this为undefined的问题
<script type="text/babel">
class Demo extends React.Component{
state={isHot:false}
render(){
let {isHot}=this.state
return <h1 onClick={this.changeHot}>今天天气{isHot?'热':'凉'}</h1>
}
changeHot=()=>{
let isHot=this.state.isHot
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
P25 14.props的基本使用
console.log(...obj) error 对象原型上没有迭代器
在jsx中可以使用展开语法展开一个对象，但是仅仅适用于传递标签属性
<script type="text/babel">
class Person extends React.Component{
render(){
let {name,sex,age}=this.props //1
return (
<div>
<li>{name}</li>
<li>{sex}</li>
<li>{age}</li>
</div>
)
}
}
let obj={
name:'liu',
sex:'man',
age:26
}
//...使用 前提obj的key和1相同
ReactDOM.render(<Person {...obj}/>,document.getElementById("test"))
</script>
P26 1复习
P27 2.对props进行限制
15.x Ract.PropTypes.String
16.x prop-types.js 分离出一个js
16.2 PropTypes.String
16.8 PropTypes.string
<script type="text/babel">
class Person extends React.Component{
static propTypes={
name:PropTypes.string.isRequired,
age:PropTypes.number,
sex:PropTypes.string
}
static defaultProps={
age:18
}
render(){
let {name,sex,age}=this.props
return (
<div>
<li>{name}</li>
<li>{sex}</li>
<li>{age}</li>
</div>
)
}
}
let obj={
name:'liu',
sex:'man',
age:26
}
ReactDOM.render(<Person {...obj}/>,document.getElementById("test"))
</script>
P28 3.函数式组件使用props
<script type="text/babel">
function Person(props){
let {name,sex,age}=props
return (
<ul>
<li>{name}</li>
<li>{sex}</li>
<li>{age}</li>
</ul>
)
}
Person.propTypes={
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number
}
Person.defaultProps={
age:18
}
let obj={
name:'liu',
sex:'man',
age:27
}
ReactDOM.render(<Person {...obj}/>,document.getElementById("test"))
</script>
P29 4字符串形式的ref
zhangtianyu5177@sina.com
<script type="text/babel">
class Demo extends React.Component{
render(){
return (
<div>
<input ref="input1" type="text"/>
<button onClick={this.show}>点击提示左边内容</button>
<input ref="input2" onBlur={this.blur} type="text" pleaceholder="失去焦点提示"/>
</div>
)
}
show=()=>{
let {input1}=this.refs
console.log(input1.value)
}
blur=()=>{
let {input2}=this.refs
alert(input2.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
P30 5.回调形式的ref
<script type="text/babel">
class Demo extends React.Component{
render(){
return (
<div>
<input ref={c=>this.input1=c} type="text"/>
<button onClick={this.show}>点击提示左边内容</button>
<input ref={c=>this.input2=c} onBlur={this.blur} type="text" pleaceholder="失去焦点提示"/>
</div>
)
}
show=()=>{
let {input1}=this
console.log(input1.value)
}
blur=()=>{
let {input2}=this
alert(input2.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
P31 6.createRef形式的ref
能不用就不用,存内存多 真实dom
<script type="text/babel">
class Demo extends React.Component{
container=React.createRef()
container2=React.createRef()
render(){
return (
<div>
<input ref={this.container} type="text"/>
<button onClick={this.show}>点击提示左边内容</button>
<input ref={this.container2} onBlur={this.blur} type="text" pleaceholder="失去焦点提示"/>
</div>
)
}
show=()=>{
console.log(this.container.current.value)
}
blur=()=>{
alert(this.container2.current.value)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
P32 7总结三大属性
P33 8关于类式组件中的构造器
1.类式组件中的构造器完全可以省略
2.若写了构造器，super必须调用，且需要在构造器中通过this.props取值，那么props要传给super
P34 9.React中的事件处理
const div=document.getElementById('div')
//创建一个haha事件
const haha=new Event('onClick')
div.addEventListener('haha',()=>{
console.log('你笑了')
})
setTimeout(()=>{
div.dispatchEvent(haha)
},2000)
react 至少ie9
event.target 事件源
event.stopPropagation()阻止冒泡
P35 10.非受控组件
event.preventDefault()阻止默认行为
非受控组件：表单中的数据，在需要的时候，“现用现取”（通过ref获得到节点，进而访问到value值）
P36 11.受控组件
受控组件：表单中输入类的DOM，随着用户的输入，将值收集到state中，那么就称为受控组件
event.xx 用才出现效果
onChange input
this.setState(username:event.target.value)
let {username}=this.state
P37 12.高阶函数-函数柯里化
onChange={this.a('password')}
a=(type)=>{//a()调用
return (event)=>this.setState({[type]:event.target.value})//onchange React调用
}
用闭包来搞定
高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map（）,bind()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
函数的柯里化
function sum(a){
return (b)=>{
return (c)=>{
return a+b+c
}
}
}
sum(1)(2)(3)
P38 13不用高阶和柯里化实现
P39 14引出React生命周期
componentDidMount 组件完成挂载 只运行一次
constructor componentWillMount render componentDidMount componentWillUnmount
P40 15完成切换案例
卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
<script type="text/babel">
class Demo extends React.Component{
state={
opacity:1
}
render(){
let {opacity}=this.state
return (
<div>
<h2 style={{opacity}}>开心笑了</h2>
<button onClick={this.death}>点击</button>
</div>
)
}
death=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById("test"))
}
componentDidMount(){
this.timer=setInterval(()=>{
let {opacity}=this.state
opacity-=0.1
if(opacity<=0){
opacity=1
}
this.setState({opacity})
},200)
}
componentWillUnmount(){
clearTimeout(this.timer)
}
}
ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
P41 1复习
csdn
componentDidMount 坑破疼底忙提
P42 2.验证生命周期钩子_旧
componentWillReceiveProps
shouldComponentUpdate 控制组件是否更新（该子可以进行组件的优化）
componentWillUpdate
render
componentDidUpdate
componentWillUnmount
P43 3.验证生命周期钩子_旧_父组件render
祖孙 祖后(代组件)
componentWillReceiveProps 在子组件里写 接受到props
第二次更新才显示 改变
P44 4总结生命周期（旧）
componentDidMount 一般做一些初始化的事情:开启定时器,发送ajax请求,订阅消息等等
componentWillUnmount 一般做一些收尾的事情:关闭定时器,取消订阅消息等等
新版砍掉了3个 加了2个
componentWillMount
componentWillReceiveProps
componentWillUpdate
P45 5.对比新旧钩子
getDerivedStateFromProps
getSnapshotBeforeUpdate
官网说少用 新增俩个
生命周期图 新旧
P46 6.getDerivedStateFromProps
static getDerivedStateFromProps(props,state)从props中获取派生的状态
当组件中的state完全取决于：外部传来的props时，就要用该钩子
static getDerivedStateFromProps(props,state){
return {count:props.a} //必须返回state状态对象 or null
}
P47 7.getSnapshotBeforeUpdate
getSnapshotBeforeUpdate gets呐嗖before鸭date
getSnapshotBeforeUpdate 必须和componentDidUpdate一块用
getSnapshotBeforeUpdate 必须返回null or 什么值都是快照值
getSnapshotBeforeUpdate(){
return '嘻嘻嘻' //return 传给你componentDidUpdate snapshotValue
}
componentDidUpdate(prevProps,prevState,snapshotValue){
console.log(snapshotValue)//嘻嘻嘻
}
P48 8.getSnapShotBeforeUpdate举例
atguigu.com
list.scrollHeight
list.scrollTop
this.setState({newsArr:[n,...newsArr]})
componentDidUpdate(_,__,snapShotValue)//_ __占位
getSnapShotBeforeUpdate还有点用
面试 网页实时聊天的场景用
有什么不同 干掉三个 新增2个
浏览器机制 缩放问题
P49 9.验证Diffing算法
diffing 第fing
最小力度是标签
P50 10.Diffing算法的原理
经典面试题：
1）.react/vue中的key有什么作用？（key的内部原理是什么？）
2）.为什么遍历列表时，key最好不要用index？
1.虚拟DOM中key的作用：
1）.简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。
2）.详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
a.旧虚拟DOM中找到了与新虚拟DOM相同的key：
（1）.若虚拟DOM中内容没变，直接使用之前的真实DOM
（2），若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
b.旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实DOM.随后演染到到页面
2.用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
2.如果结构中还包含输入类的DOM：
会产生错误DOM更新==>界面有问题。
3.注意！如果不存在对数据的逆序添加、逆序删除等破环顺序操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的。
3.开发中如何选择key？：
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据，用index也是可以的。
没返回唯一标识 及时沟通
P51 11.初始化React脚手架
脚手架：
靠自己依赖webpack搭建一套能编译react代码的环境
facebook
create-react-app
npm i -g create-react-app
create-react-app demo
P52 1.复习
3年问的少 45年问得多算法
高效 方便
P53 2.分析脚手架src文件夹
新疆更卡...
2.react脚手架：https://github.com/tianyucoder/200922_react_staging.git
yarn和react同一个爹的
readme项目说明文档
bootstap 放public最好
index.css 程序员自己写的公共样式放这
reportWebVitals专门分析网络性能的
<React.StrictMode>读组件的属性 用createRef 严格模式
P54 3.分析脚手架public文件夹
utf-8万国码
jpg png bmp gif 位图
svg矢量图
manifest.json 加壳
IOS、Android：
1.原生开发（OC、Java）
2.经过翻译生成原生应用（ReactNative，uniapp）
3.加売
rebots.txt爬虫协议文件 后端配置的 什么可以爬什么不可以爬
react-dom@17.0.1
按下 Shift 时点击刷新按钮。
P55 4.脚手架编写一个Weather组件
App.jsx===App.js
vscode search es7
js jsx只有俩种可以省略后缀 .css不能省略
import React,{Component} from 'react' 分别暴露
CJX模块化 引入可以结构赋值
vscode 安装了react插件 rcc快捷键 快速创建组件
P56 5.TodoList案例分析
按功能点 位置命名
ReactDOM.render(<App/>,document.getElementById('root'))
or
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
P57 6.TodoList案例_静态组件
P58 7.TodoList案例_初始化数据
ABC组件都用,放在共同父上 叫状态提升
P59 8.TodoList案例_添加todo
defaultChecked
UUID 全球唯一标识
yarn add uuid
id位数值有限 用字符串多 uuid多
P60 9.TodoList案例_删除一个todo
（2）.状态在哪里，操作状态的方法就在哪里
react confirm直接用error 要加上window
P61 10.TodoList案例_勾选一个todo
defaultChecked只运行一次 目前搞定了新版 只是展示 不需要改变那种
新版同 checked
P62 11.TodoList案例_Footer底部展示
arr.reduce((preValue,current,index,arr)=>{},initialValue)
P63 1.复习
pwa 加壳 飞行模式 白屏 问题解决 缓存好的给你
P64 2.TodoList案例_Footer底部勾选
状态启动着页面改变
（5）.关于checked和defaultChecked：
1·什么时候用checked？-不仅仅展示勾选的状态，后期还需要响应勾选的动作
注意：用了checked，就必须用onChange
2.什么时候用defaultChecked？——仅仅展示勾选的状态
注意：defaultChecked只管第一次渲染
3.value和defaultValue也是同理的
P65 3.TodoList案例_完成
P66 4.React脚手架中配置代理的第一种方式
from 可以 跨域
ajax xhr 跨域
免费的api接口
跨域 能发送数据 ,但是不能接受
package.json添加 改配置一定要重启 仅仅能配置代理一台
"proxy":"http://localhost:5000"
还有代码记得改 同devServer端口
P67 5.React脚手架中配置代理的第二种方式
http://create-react-app.dev/docs/proxying-api-requests-in-development
src目录下创建setupProxy.js文件
const createProxyMiddleware = require('http-proxy-middleware')
module.exports=function(app){
app.use(
'/api',//只有/api开头的请求，才转发给后端服务器
createProxyMiddleware({
target:'http://localhost:5000',//转发给谁
changeOrigin:true,//控制服务器接收到的请求头中host字段的值 欺骗服务器是自己访问
pathRewrite:{'^/api':''} //必加 把路径重写 重写路径（目的是：干掉前缀）
})
)
}
多个这样写
const proxy = require('http-proxy-middleware')
module.exports=function(app){
app.use(
proxy(
'/api',//只有/api开头的请求，才转发给后端服务器
{
target:'http://localhost:5000',//转发给谁
changeOrigin:true,
pathRewrite:{'^/api':''} //必加 重写路径（目的是：干掉前缀）
}
),
proxy(
'/api2',//只有/api开头的请求，才转发给后端服务器
{
target:'http://localhost:5000',//转发给谁
changeOrigin:true,
pathRewrite:{'^/api2':''} //必加 重写路径（目的是：干掉前缀）
}
),
)
}
segmentfault.com 国内overflow
P68 6.github搜索案例_静态组件
P69 7.github搜索案例_分析返回的数据
受控组件onChange
cros 后端配置跨域7个
react18
P70 8.github搜索案例-展示列表
最外层加key 遍历
发网络请求
1.welcome
2.loading
3.users
4.error
isFirst 是否init
isLoading
error
P71 9.github搜索案例_完成
三元表达式 连起来写
P72 10.github搜索案例_pubsub
消息订阅与发布技术
挂载后 马上订阅 componentDiaMount
Pubsub 拍b沙b
import PubSub from 'pubsub-js'
import PubSub from 'pubsub-js'
发布
Pubsub.publish('peiqi',{name:'koo'})
订阅 挂载后 马上订阅 componentDiaMount
this.msgid=Pubsub.subscribe('peiqi',(_,data)=>{
console.log(data)//{name:'koo'}
})
componentWillUnmount(){
PubSub.unsubscribe(this.msgid)//取消订阅 底层是监听 耗内存
}
P73 1.antd的基本使用
妹子ui jquery用的
P74 2.antd样式的按需引入
3.x 找https://3x.ant.design/docs/react/use-with-create-react-app-cn
P75 3.antd的自定义主题
lessOption什么包裹下
P76 4.antd-mobile的按需引入+自定义主题
http://mobile.ant.design/index-cn
https://antd-mobile-v2.surge.sh/index-cn 旧版
P77 20210106_164143
使用less
P78 01.antd的基本使用
P79 02.antd样式的按需引入
P80 03.antd的自定义主题
P81 04.antd-mobile的按需引入+自定义主题
P82 05.react脚手架中的适配
P83 06复习
P84 07.搭建路由
yarn add react-router-dom
index.js
import {BrowserRouter}from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
App.jsx
import React, { Component } from 'react'
import { Switch,Route } from 'react-router-dom'
import Login from './pages/Login'
import User from './pages/User'
export default class App extends Component {
render() {
return (
<div>
<Switch>
<Route path='/login' component={Login}/>
<Route path='/user' component={User}/>
</Switch>
</div>
)
}
}
react router dom v6 已经抛弃了 Switch（组件），改用 Routes（组件），写组件路由需要注意
import React, { Component } from 'react'
import { Switch,Route, Redirect } from 'react-router-dom'
import routes from './config/routes'
export default class App extends Component {
render() {
return (
<div>
<Switch>
{
routes.map((routeObj)=>{
return <Route {...routeObj}/>
})
}
<Redirect to={'/login'}/>
</Switch>
</div>
)
}
}
导航区
P85 08.登录组件_静态
eslint 临时关闭
/*eslint-disable-next-line*/
P86 09.登录组件-登录按钮的校验
onTouchEnd={this.login} 移动端事件
ref非受控组件 onChange受控组件
手机号都是string存的
不能this.setState({})初始化 必须state什么init
router比别人多3个组件 router没学
pc实时valid校验 移动端失去焦点时校验(上下行) 统一校验
return xx
P87 10.登录组件-获取验证码按钮的校验
onTouchEnd不能禁用touch disable.
this.setState(()=>{})
P88 11.登录组件-完善登录校验
P89 12.短信验证码的原理
容联云通讯
P90 13.启动案例服务器
作者:QQ974121718
Studio 3T 连接数据库 MongoDB
apidocs 库 写api文档
P91 14.postman的基本使用
http八大请求
postman 可以http tcp udp 协议
P92 15.请求方式_参数总结
1.HTTP有8大请求
2.请求方式：
常用的是4个：
GET（查）
POST（增）
PUT（改）
DELETE（删）
3·请求参数：
常用的有三种：
query（查询字符串参数）
params
body（请求体参数）
备注：
形如：key=value&key=value的结构，叫做urlencoded编码 query参数
axios 此处写的是params，但携带的是query参数
url:'http://localhost：8080/test3/老刘/18/女' params参数
从理论上说，一次请求的3个参数，可以通过3中形式携带，但一般不这么做有请求体的请求（POST PUT DELETE），一般都通过请求携带数据
yarn add cors
P93 16.完成获取验证码
P94 1.redux的简介
react绿哎 redux绿大x
1.英文文档：https://redux.js.org/
2.中文文档：http://www.redux.org.cn/
3.Github：https://github.com/reactjs/redux
7.1.2.redux 是什么
1.redux是一个专门用于做状态管理的JS库（不是 react 插件库）。
2.它可以用在 react，angular，vue 等项目中，但基本与 react 配合使用。
3，作用：集中式管理react应用中多个组件共享的状态。
react自己没有 angular自带 vue自带vuex
7.1.3.什么情况下需要使用reduxe
1.某个组件的状态，需要让其他组件可以随时拿到（共享）。
2.一个组件需要改变另一个组件的状态（通信）。t
3.总体原则：能不用就不用，如果不用比较吃力才考虑使用。
P95 2.求和案例_纯react版
P96 3.redux工作原理图
P97 4.求和案例_redux迷你版_初始化状态
yarn add redux
src/redux目录
reducer可以：初始化状态、加工状态 一开始就执行一次
P98 5求和案例_redux迷你版_更新状态
redux 和 react不是同一个爹
P99 6.求和案例_redux完整版
src/redux目录 完整版
constant.js
count_action.js
count_reducer.js
store.js
P100 7.求和案例_异步action版
yarn add redux-thunk
count_action 异步 必须返回一个函数
P101 8求和案例_容器与UI的嵌套
yarn add react-redux
P102 9.复习
Redux 和react-redux一块用的
P103 10求和案例_react-redux版
shift + 刷新按钮 =强制刷新
不对着打 金山打字通 靠想着打
P104 11.求和案例_优化1_简写容器的mapDispatchToProps
找不到的到作者 github搜索
https://github.com/tianyucoder/200922_redux.git
P105 12.求和案例_优化2_使用Provider
Provider批量传 订阅自带了 store.subscribe免写了
P106 13.求和案例_优化3_整合容器与UI组件
P107 14多组共享状态_Person组件静态
P108 15使用combineReducer合并多个reducer
返回对象-同步action 返回函数-异步action
P109 16.完成数据共享
P110 17.开发者工具的使用
redux devtools 2.17.0
yarn add redux-devtools-extension
还需要写代码来 才能显示
P111 18.最终版
P112 19.纯函数
7.8.1.纯函数
1，一类特别的函数：只要是同样的输入（实参），必定得到同样的输出（返回）
2.必须遵守以下一些约束
1）不得改写参数数据
2）不会产生任何副作用，例如网络请求，输入和输出设备
3）不能调用Date.now0或者 Math.random（）等不纯的方法
3.redux的reducer函数必须是一个纯函数
P113 1.setState更新状态异步还是同步
1.react基础：https://github.com/tianyucoder/200922_react_basic.git
2.react脚手架：https://github.com/tianyucoder/200922_react-staging.git
3.redux: https://github.com/tianyucoder/200922_redux.git
4·移动端：https://github.com/tianyucoder/200922_mobile.git
5.react扩展：https://github.com/tianyucoder/200922_react_extension.git
setState的更新是异步的
setState本身就是一个同步的函数，由程序员亲自调用，JS引擎在主线程执行
但setstate引发的后续更新状态的“动作”是异步的
一、setState（）更新状态的动作是异步还是同步的？----要看setState的执行位置
（1）.在由react所控制的回调中更新的动作是【异步】的：生命周期勾子、react事件监听回调
（2），在非react控制的异步回调中更新的动作是【同步】的：定时器回调、原生事件回调,Promise的回调
P114 2.setState的两种写法
二、setState的两种写法
（1）.对象式写法：setState（stateChange，[callback]）
1.stateChange为状态改变对象（该对象可以体现出状态的更改）
2.callback是可选的回调函数，它在状态更新完毕、界面也更新后（render调用后）才被调用百结.
（2）.函数式写法：setState（updater，[callback]）
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props
4.callback是可选的回调函数，它在状态更新、界面也更新后（render调用后）才被调用。
总结：
1.对象式的setState是函数式的setState的简写方式（语法糖）
2.使用原则：
（1）.如果新状态不依赖于原状态=>使用对象方式
（2）.如果新状态依赖于原状态=>使用函数方式
（3）.如果需要在setState（）执行后获取最新的状态数据，要在第二个callback函数中读取。
P115 3.路由组件的懒加载
lazy Suspense
P116 4.useState的使用
Hooks高频面试
1.Hooks是什么？
（1）.Hook是React 16.8.0版本增加的新特性/新语法
（2）.可以让你在函数组件中使用 state 以及其他的 React特性
快捷键rfc
React.useState(0)
底层做了缓存
hooks hook 1.useState
P117 5.useEffect的使用
//React.useEffect 相当俩个钩子 componentDidMount和componentDidUpdate
React.useEffect(()=>{
},[sum])
[sum]监测sum
不传第二参数 都监测
[] 空数组 谁都不监测
React.useEffect(()=>{
const time=setInterval(()=>{},1000)
return ()=>{
//这里面相当componentWillUnmount
clearInterval(time)
}
},[])
P118 6.useRef的使用
在函数组件,除了字符串ref不行 回调和createRef都行
useRef和createRef 底层 指向同一个东西
P119 7.Fragment的使用
Fragment占位标签 避免深层次的嵌套
<Fragment></Fragment> 可以传key 但是不能瞎传a="1"
<Fragment key="item.id"></Fragment>
<></> 不能写key
P120 8.context的使用
redux 消息订阅 context
Provider Consumer
Consumer 函数组件 类组件都可以用
一种组件间通信方式，常用于【祖组件】与【后代组件】间通信
import React, { Component } from 'react'
let MyContext=React.createContext()
let {Provider,Consumer}=MyContext
export default class A extends Component {
state={
name:'koo',
age:18
}
render() {
let {name,age}=this.state
return (
<div>
<h4>我是A组件</h4>
<Provider value={{name,age}}>
<B></B>
</Provider>
</div>
)
}
}
class B extends Component {
render() {
return (
<div>
<h4>我是B组件</h4>
<C></C>
</div>
)
}
}
// class C extends Component {
// static contextType=MyContext
// render() {
// console.log(this)
// return (
// <div>
// <h4>我是C组件</h4>
// <div>收到的是:{this.context.name}</div>
// </div>
// )
// }
// }
function C() {
return (
<div>
<h4>我是C组件</h4>
<Consumer>
{
({name})=>{
return <div>收到的是:{name}</div>
}
}
</Consumer>
</div>
)
}
P121 9.组件间通信方式的总结
6.组件通信方式总结
组件间的关系：
父子组件
兄弟组件（非嵌套组件）
祖孙组件（跨级组件）
其他关系
几种通信方式：
1.props：
最简单的方式
2.消息订阅-发布：
pubs-sub、event等等
3.集中式管理：
redux、dva等等
4.conText：
生产者-消费者模式
比较好的搭配方式：
父子组件：props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件（跨级组件）：消息订阅-发布、集中式管理、conText（开发用的少，封装插件用的多）
其他：消息订阅-发布、集中式管理
P122 1.屏幕大小
P123 2.屏幕分辨率
iphone6标准机型 7501*1334
P124 3.屏幕密度
大于80ppi 眼睛才 分得了清晰
P125 4复习 总复习redux
yarn add redux redux-thunk react-redux redux-devtools-extension
2016年的前端 大规模
P126 5.物理像素
P127 6.css像素
2010设备独立像素
P128 7.设备独立像素
看设备独立像素 厂商决定
P129 8.像素比
http://uiiiuiii.com/screen/index.htm
pc浏览器控制台手机版 那个是设备独立像素dip dp
P130 9.位图与矢量图
P131 10.图片的高清显示
dpr 2<=时显示
@media screen and (-webkit-min-device-pixel-ratio:2){
#demo{
background:red;
}
}
<img src="./img/logo.png" class="logo"/>
@media screen and (-webkit-min-device-pixel-ratio:2){
.logo{
content:url(../imgs/logo@3x.png);//改img里面的src路径
}
}
P132 11.pc端视口
P133 12.移动端_布局视口
布局视口大多数都是980px
P134 13.移动端_布局视口再次说明
P135 14.移动端_视觉视口
P136 15.移动端_理想视口
P137 16·理想视口的优点
1·想当年，没有980，横向滚动条
2.浏览器联盟，推出了980的布局视口，解决了横向滚定条，内容小到难以观察
3.meta标签开启理想视口，手机有多宽，布局视口就有多宽，不会小到难以观察。
3.1 元素显示不成比例 ==> 适配
3.2 pc页面无法承接=>算了吧，不接了，直接写一个移动端的页面
P138 17.pc端的缩放
在pc端，onresize监测的是视口的变化（初始包含块）
window.onresize=()=>{}
P139 18.移动端的缩放
console.log（'布局视口为：'，document.documentElement.clientWidth）
console.log（'视觉视口为：'，window.innerWidth）
定时器 移动端 查看
P140 19.viewport标签说明
微信内核浏览器 和safari不同
P141 1复习
P142 2.为什么要做适配
P143 3.viewport适配
1px边框 什么机型都是1px 或者 跟着变大小 问设计师
P144 4.rem适配_方案一
开启后,设备独立像素宽度==布局视口P145 5.rem适配_方案二
搜狐 唯品会
P146 6.rem适配+less
vscode Easy LESS
css 覆盖 写错了
P147 7.非标准设计稿如何适配
记得公式 俩个
P148 8.vw适配
vw适配 长宽都是以 vw为标准
P149 9.1物理像素边框
不参与适配才 1物理像素边框
@media screen and (-webkit-min-device-pixel-ratio:2){
#demo{
border:0.5px solid black;
}
//或者
#demo::after{
transform:scaleY(0.5);
}
}
现在少弄边框这东西 移动端
P150 10.移动端事件
事件类型
移动端事件列表
touchstart 元素上触摸开始时触发
touchmove 元素上触摸移动时触发
touchend 手指从元素上离开时触发
touchcancel 触摸被打断时触发
这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。
touchmove 离开显示面还继续
touchmove 事件触发后，即使手指离开了元素，touchmove 事件也会持续触发触发
touchmove 与touchend 事件，一定要先触发 touchstart
事件的作用在于实现移动端的界面交互
P151 11.touch与click
touch先执行 移动端
touchstart click
click反应慢点
P152 12移动端点击穿透问题
css 加pointer-event 元素不响应事件
#baidu{
pointer-events:none;//auto
}
300ms 50ms
P153 13.移动端真机调试
uTools 查内网穿透 net
ctrl+D
浙公网安备 33010602011771号