JSX基本使用&React（2）

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组件包裹整个应用（重要）

  ...

4.使用Link组件作为导航菜单（路由入口）

页面一

5.使用Route组件配置路由规则和要展示的组件（路由出口）

6.常用组件说明

image.png

Link组件

Route组件

7.路由执行过程

路由执行过程

8.编程式导航

编程式导航