React原理

setState()

1, 更新数据

• setState()更新数据是异步的
• 注意：使用该语法，后面的setState不要依赖前面setState的值
• 多次调用setState，只会触发一次render

2. 推荐语法 包含两个函数

• 参数state： 表示最新的state
• 参数props： 表示最新的props

在状态更新(页面完成重新渲染)后立即执行某个操作

this.setState(
   (state,props) => {},
   () => { console.log('这个回调函数会在状态更新后立即执行')}
}

JSX语法的转化过程 （★★★）

• JSX仅仅是createElement() 方法的语法糖(简化语法)
• JSX语法被 @babel/preset-react 插件编译为createElement() 方法
• React 元素： 是一个对象，用来描述你希望在屏幕上看到的内容

组件更新机制

setState() 的两个作用

• 修改state
• 更新组件

减轻state

• 减轻state：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading等）
• 注意：不用做渲染的数据不要放在state中

避免不必要的重新渲染

使用钩子函数 shouldComponentUpdate(nextProps, nextState)

  shouldComponentUpdate(nextProps, nextState,) {   
        return nextState.count !== this.state.count
       // return nextProps.count !== this.prop.count
             
    }

纯组件

• 纯组件： PureComponent 与 React.Component 功能相似
• 区别： PureComponent 内部自动实现了 shouldComponentUpdate钩子，不需要手动比较
• 原理：纯组件内部通过分别比对前后两次 props和state的值，来决定是否重新渲染组件

实现原理

• 说明：纯组件内部的对比是 shallow compare（浅层对比）
• 对于值类型来说：比较两个值是否相同
• 引用类型：只比对对象的引用地址是否相同
• 注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据

用扩展运算符

虚拟DOM和Diff算法

• React更新视图的思想是：只要state变化就重新渲染视图
• 特点：思路非常清晰
• 问题：组件中只有一个DOM元素需要更新时，也得把整个组件的内容重新渲染吗？ 不是这样的
• 理想状态：部分更新，只更新变化的地方
• React运用的核心点就是 虚拟DOM 配合 Diff 算法