React进阶学习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
兄弟组件
状态提升

Context
跨组件传递数据

const {Provider,Consumer}=React.createContext()

{data => {}}

1
2
3
4
5
6
7
8
6、组件的生命周期
只有类组件才有生命周期
不能在render钩子函数中调用setState函数
在componentDidUpdate钩子函数中调用setState函数，要比较更新前后的状态是否相同
常用钩子函数：

旧版钩子函数：

新版钩子函数：

7、render props模式
实现状态逻辑复用，状态指的是state，逻辑指的是setState。

class Mouse extends React.Component{
render(){
return this.props.render(this.state)
}
}

鼠标当前位置{mouse.x},{mouse.y}

class Mouse extends React.Component{
render(){
return this.props.children(this.state)
}
}

{(mouse)=>

鼠标当前位置{mouse.x},{mouse.y}

import PropTypes from 'prop-types'

Mouse.propTypes = {
children: PropTypes.func.isRequired
}
1
2
3
4
5
8、高阶组件
高阶组件之于组件相当于手机壳之于手机。

目的：实现状态逻辑复用
装饰模式
HOC，实际上是一个函数
const EnhancedComponent = withHOC(WrappedComponent)
1
function withMouse(WrappedComponent){
class Mouse extends React.Component{
return
}
return Mouse
}

const MousePosition = withMouse(Position)

1
2
3
4
5
6
7
8
9
10
问题1
得到两个组件名称相同

解决1
设置displayName能在调试时区分不同组件

Mouse.displayName = WithMouse${getDisplayName(WrappedComponent)}

function getDisplayName(WrappedComponent){
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
1
2
3
4
5
问题2
props丢失

解决2

1
二、React原理
1、setState函数
作用：修改state；更新组件
注意：
异步更新数据；
多次调用setState函数只触发一次重新渲染；
setState(updater[,callback])，第二个参数在状态更新且页面完成渲染后立即执行某个操作；

// 经典写法
this.setState({
count: this.state.count+1
})

// 推荐写法，多次调用setState函数的顺序更符合人类的思维顺序
this.setState((state,props)=>{
return {
count: state.count+1
}
})
1
2
3
4
5
6
7
8
9
10
11
2、JSX语法的转化过程
JSX是createElement函数的简化语法。
JSX语法被@babel/preset-react插件编译为creatElement函数。
React元素：描述看到的内容。

JSX和JSX预处理后的代码：

3、组件更新机制

4、组件性能优化
减轻state
只存储与渲染相关的数据

避免不必要的渲染
使用钩子函数shouldComponentUpdate(nextProps, nextState)

纯组件
自动实现了shouldComponentUpdate钩子函数；
使用浅层对比，对于引用类型，只比较对象的地址；

const newObj = {...state.obj, number: 2}
setState({obj: newObj})

this.setState({
list: [...this.state.list, {新数据}]
})
1
2
3
4
5
6
5、React的部分更新
实现：虚拟DOM配合Diff算法
虚拟DOM：React元素，本质是JS对象，描述UI。用JS对象表示DOM信息和结构，当状态变更的时候，重新渲染这个JS的对象结构

const element={
type: 'h1',
props: {
className: 'greeting',
children: 'Hello JSX'
}
}
1
2
3
4
5
6
7
'
运行运行
Diff过程：

三、React路由
功能：从一个视图导航到另一个视图
使用：配置路由和组件
常用组件：
Router组件，推荐用HistoryRouter
Link组件
Route组件，能够指定路由组件的位置
路由的执行过程：

编程式导航
通过JS代码实现页面跳转
push(path)
go(n)
匹配模式
模糊匹配
默认匹配模式，pathname以path开头就匹配成功，pathname是Link组件的to，path是Route组件的path
精确匹配
添加exact属性

1
四、租房移动Web实践
核心业务
在线找房、用户登陆、房源发布

技术栈
React核心库：react、react-dom、react-router-dom
脚手架：create-react-app
数据请求：axios
UI组件库：antd-mobile
其他组件库：react-virtualized、formik+yup、react-spring
百度地图API

node-sass依赖
注意node-sass依赖的问题，多次yarn操作后可以成功安装，但默认情况下node-sass的版本与node的版本不一致。（着实纳闷）

condition:

node -v v14.17.3
node-gyp -v v3.8.0
1
2
target:

yarn add node-sass@4.12.0
1
problem:

gyp verb which failed Error: not found: python2
1
solution:

yarn add global production windows-build-tools
1
H5的地理位置API
获取的地理位置与GPS、IP地址、WIFI和蓝牙的MAC地址、GSM/CDMS的ID有关。手机优先使用GPS定位，笔记本最准确的定位是WIFI。
只能获得经纬度信息。
navigator.geolocation.getCurrentPosition(position => {
console.log('当前位置信息：', position)
})
1
2
3
百度地图API
使用步骤：

引入百度地图API的JS文件，替换自己的密钥
在index.css设置全局样式
创建Map组件，配置路由。在Map组件中，创建地图容器元素，并设置样式
创建地图实例
设置中心点坐标
初始化地图，并设置展示级别
地图找房
百度地图标注
文本覆盖物label
缩放级别
缩放事件
组件间样式覆盖问题
solution
手动处理，定义不同类名
CSS IN JS
CSS Modules，React脚手架已集成
说明：对CSS类名重命名，保证每个类名的唯一性。所有类名都有局部作用域。
实现：webpack的css-loader
命名：BEM规范（Block块、Element元素、Modifier）
React脚手架中的命名：文件名、类名、hash
styled-components
案例