1.JSX仅仅是creatElement()的语法糖（简化语法）
image.png
2.组件更新机制
父组件重新渲染时，也会重新渲染子组件
3.减轻state
- 减轻state：只储存根组件渲染相关数据（比如：count/数据列表/loading等）
- 注意：不用做渲染的数据不要放在state中，比如定时器id等
- 对于这种需要在多个方法中用到的数据，应该放在this中
4.避免不必要的重新渲染
父组件更新会引起子组件更新
问题：子组件没有任何变化时也会重新渲染
如何避免不必要重新渲染呢？
解决：使用钩子函数shouldComponentUpdate（nextProps,nextState）
作用：通过返回值决该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染
触发时机：更新阶段钩子函数，组件重新渲染前执行（执行顺序shouldComponentUpdate->render）
// 钩子函数
shouldComponentUpdate(nextProps,nextState){
//返回false，阻止组件重新渲染
//return false
//最新状态：
console.log('最新的state',nextState)
//更新前的状态：
console.log('this.state',this.state)
//以上两个状态用来比较是否更新了，是否需要重新渲染
return true
}
4.纯组件
说明：纯组件内部的对比是shallow compare（浅层对比）
- 对于值类型来说：比较两个值是否相同（直接复制即可，没有坑）
- 但对于引用类型来说，只比较对象的引用（地址）是否相同
// 对象
// 正确做法，创建新数据
const newObj = { ...state.obj,number:2 }
setState({ obj:newObj })
// 数组
// 不要用数组的push / unShift 等直接修改当前数组的方法
// 而应该用concat 或 slice等这些返回数据的方法
// 或者用es6这种简洁的方法
this.setState({
list:[...this.state.list,{新数据}]
})
5.虚拟DOM和Diff算法
React部分更新的原理：虚拟DOM和Diff算法
虚拟DOM：本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容（UI）
image.png
虚拟DOM的真正价值从来都不是性能，虚拟DOM让React脱离了浏览器环境的束缚，只要能够运行js的地方，就能运行React，就能脱离浏览器运行，就能开发APP原生页面，VR虚拟现实等
6.React路由
- 1.安装： yarn add react-router-dom
- 2.导入路由的三个核心组件：
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
- 3.使用Router组件包裹整个应用（重要）
<Router>
...
</Router>
4.使用Link组件作为导航菜单（路由入口）
<Link to="/first">页面一</Link>
5.使用Route组件配置路由规则和要展示的组件（路由出口）
<Route path="/first" component="first"></Route>
6.常用组件说明
image.png
Link组件
Route组件
7.路由执行过程
路由执行过程
8.编程式导航
编程式导航
网友评论