【react】原理简介

一、setState() 的说明

1.1 更新数据

  • setState() 是异步更新数据的
  • 注意:使用该语法时,后面的 setState() 不要依赖于前面的 setState()
  • 可以多次调用 setState() ,只会触发一次重新渲染

【react】原理简介_第1张图片

1.2 推荐语法

  • 推荐:使用 setState((state, props) => {}) 语法
  • 参数state:表示最新的state
  • 参数props:表示最新的props

【react】原理简介_第2张图片

1.3 第二个参数

  • 场景:在状态更新(页面完成重新渲染)后立即执行某个操作
  • 语法: setState(updater[, callback])

【react】原理简介_第3张图片

二、JSX 语法的转化过程

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

【react】原理简介_第4张图片

三、组件更新机制

  • setState() 的两个作用: 1. 修改 state 2. 更新组件(UI)
  • 过程:父组件重新渲染时,也会重新渲染子组件。但只会渲染当前组件子树(当前组件及其所有子组件)

【react】原理简介_第5张图片

四、组件性能优化

4.1 减轻 state

  • 减轻 state:只存储跟组件渲染相关的数据(比如:count / 列表数据 / loading 等)
  • 注意:不用做渲染的数据不要放在 state 中,比如定时器 id等
  • 对于这种需要在多个方法中用到的数据,应该放在 this 中

【react】原理简介_第6张图片

4.2 避免不必要的重新渲染

  • 组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰
  • 问题:子组件没有任何变化时也会重新渲染
  • 如何避免不必要的重新渲染呢?
  • 解决方式:使用钩子函数 shouldComponentUpdate(nextProps, nextState)
  • 作用:通过返回值决定该组件是否重新渲染,返回 true 表示重新渲染,false 表示不重新渲染
  • 触发时机:更新阶段的钩子函数,组件重新渲染前执行 (shouldComponentUpdate  render)

【react】原理简介_第7张图片

  • 案例:随机数

【react】原理简介_第8张图片

4.3 纯组件

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

【react】原理简介_第9张图片

  • 说明:纯组件内部的对比是 shallow compare(浅层对比)
  • 对于值类型来说:比较两个值是否相同(直接赋值即可,没有坑)

【react】原理简介_第10张图片

  • 说明:纯组件内部的对比是 shallow compare(浅层对比)
  • 对于引用类型来说:只比较对象的引用(地址)是否相同

【react】原理简介_第11张图片

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

【react】原理简介_第12张图片

五、虚拟 DOM 和 Diff 算法

  • React 更新视图的思想是:只要 state 变化就重新渲染视图
  • 特点:思路非常清晰
  • 问题:组件中只有一个 DOM 元素需要更新时,也得把整个组件的内容重新渲染到页面中? 不是
  • 理想状态:部分更新,只更新变化的地方。
  • 问题:React 是如何做到部分更新的? 虚拟 DOM 配合 Diff 算法

虚拟 DOM:本质上就是一个 JS 对象,用来描述你希望在屏幕上看到的内容(UI)。

【react】原理简介_第13张图片

执行过程

  • 1. 初次渲染时,React 会根据初始state(Model),创建一个虚拟 DOM 对象(树)。
  • 2. 根据虚拟 DOM 生成真正的 DOM,渲染到页面中。
  • 3. 当数据变化后(setState()),重新根据新的数据,创建新的虚拟DOM对象(树)。
  • 4. 与上一次得到的虚拟 DOM 对象,使用 Diff 算法 对比(找不同),得到需要更新的内容。
  • 5. 最终,React 只将变化的内容更新(patch)到 DOM 中,重新渲染到页面。

【react】原理简介_第14张图片

代码演示

  • 组件 render() 调用后,根据 状态 和 JSX结构 生成虚拟DOM对象
  • 示例中,只更新 p 元素的文本节点内容

【react】原理简介_第15张图片

你可能感兴趣的:(react,前端,开发语言,javascript)