React原理揭秘--setState() 的说明，JSX 语法的转化过程，组件更新机制，组件性能优化，虚拟 DOM 和 Diff 算法

已于 2022-11-08 16:30:49 修改
阅读量750 收藏
点赞数
分类专栏： React学习 文章标签： react.js javascript 前端 ecmascript 前端框架
于 2022-11-08 16:30:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54088431/article/details/126745109
版权

1.setState() 的说明

1.更新数据

  1. setState() 是异步更新数据的
  2. 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()
  3. 可以多次调用 setState() ，只会触发一次重新渲染
this.state = { count: 1 }
this.setState({
  count: this.state.count + 1
})
console.log(this.state.count) // 1
还是更新前的数据，因为他是异步的，不会立即更新状态

2. 推荐语法

  1. 推荐：使用 回调函数 语法,也是异步更新state的。 
    setState((state, props) => {})
  2. 参数state：表示最新的state
  3. 参数props：表示最新的props
this.setState((state, props) => {
  return {
    count: state.count + 1
  }
})
console.log(this.state.count) // 1

调多次setState会执行多次

this.setState((state, props) => {
  return {
    count: state.count + 1       //1+1=2
  }
})
第二次调用：时拿到第一次调用的结果
this.setState((state, props) => {
console.log('第二次调用',state) //2
  return {
    count: state.count + 1      //2+1=3
  }
})

3. 第二个参数

  1. 场景：在状态更新（页面完成重新渲染）后,立即执行某个操作
  2. 语法： setState(updater[, callback])
this.setState(
  (state, props) => {},
  //状态更新后并且重新渲染后，立即执行
  () => {
    console.log('这个回调函数会在状态更新后立即执行',this.state.count) //2
    console.log(document.getElementById('title').innerText) //2更新后的DOM内容
    }
)

render(){
  return(
   <h1 id="title">计数器：{this.state.count}</h1>  //1更新前，2更新后
  )
}

this.setState(
  (state, props) => {},
  () => {
    document.title = '更新state后的标题：' + this.state.count //2
  } 
)

完整代码

class App extends React.Component {
  state = {
    count: 1
  }
  handleClick = () => {
    this.setState(
      (state, props) => {
        return {
          count: state.count + 1
        }
      },
      //状态更新后并且重新渲染后，立即执行
      () => {
        console.log('状态更新完成', this.state.count) //2
        console.log(document.getElementById('title').innerText) //2更新后的DOM内容
        // 更新标题
        document.title = '更新后的count为：' + this.state.count
      }
    )
    console.log(this.state.count)
  }
  render() {
    return (
      <div>
        <h1 id="title">计数器：{this.state.count}</h1>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

2.JSX 语法的转化过程

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

 

 3.组件更新机制

setState() 的两个作用：

1. 修改 state 2. 更新组件（UI）

过程：

父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）

4. 组件性能优化

1.减轻 state

  1. 减轻 state：只存储跟组件渲染相关的数据（比如：count / 列表数据 / loading 等）
  2. 注意：不用做渲染的数据不要放在 state 中，比如定时器 id等
  3. 对于这种需要在多个方法中用到的数据，应该放在 this 中
class Hello extends Component {
  componentDidMount() {
   // timerId存储到this中，而不是state中
   this.timerId = setInterval(() => {}, 2000)
}
  componentWillUnmount() {
    clearInterval(this.timerId) 
}
  render() { … }
}

2.避免不必要的重新渲染

  1. 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
  2. 问题：子组件没有任何变化时也会重新渲染
  3. 如何避免不必要的重新渲染呢？
  4. 解决方式：使用钩子函数 
    shouldComponentUpdate(nextProps, nextState)
  5. 作用：通过返回值决定该组件是否重新渲染，返回 true 表示重新渲染，false 表示不重新渲染(阻止组件重新渲染)
  6. 触发时机：更新阶段的钩子函数，组件重新渲染前执行 （shouldComponentUpdate -> render）
class Hello extends Component {
  shouldComponentUpdate() {
    // 根据条件，决定是否重新渲染组件
    return false
  }
  render() {…}
}

-nextState:最新的state

-this.state:更新前的状态

3.案例：随机数

通过state避免不必要的更新状态是组件的用state

class Hello extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.number !== this.state.number
  }
  render() {…}
}

1.基本代码

// 生成随机数
class App extends React.Component {

  render() {
    return (
      <div>
        <h1>随机数：</h1>
        <button>重新生成</button>
      </div>
    )
  }
}

2.设置状态，把数值展示出来

 state = {
    number: 0
  }
  
   <h1>随机数：{this.state.number}</h1>

3.给按钮绑定事件处理程序

  onClick={this.handleClick}
  
  到程序后，放在上面，更新状态
  handleClick = () => {
    this.setState(state => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }

4.避免不必要的更新shouldComponentUpdate

// 因为两次生成的随机数可能相同，如果相同，则不需要重新渲染
  shouldComponentUpdate(nextProps, nextState) {
    // 比较前后两次的number
    console.log('最新状态：', nextState, '当前状态：', this.state)
    if (nextState.number === this.state.number) {
      return false
      // render不再执行
    }
    return true
    // render重新渲染最新的值
  }

5.优化代码

 shouldComponentUpdate(nextProps, nextState) {
    // 比较前后两次的number
    console.log('最新状态：', nextState, '当前状态：', this.state)

    return nextState.number !== this.state.number

  }

通过props避免不必要的更新状态不是组件的用props

class Hello extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.number !== this.props.number
  }
  render() {…}
}

1.创建NumberBox子组件

class NumberBox extends React.Component{
  render(){
    return (  <h1>随机数：{this.props.number}</h1>)
  }
}

2.父组件渲染子组件

<NumberBox number={this.state.number}></NumberBox>

3.注释掉父组件的，shouldComponentUpdate；在子组件中使用shouldComponentUpdate

 shouldComponentUpdate(nextProps) {
    console.log('最新状态：', nextProps, '当前状态：', this.props)

    return nextProps.number !== this.props.number
  }

3.纯组件

1.纯组件：PureComponent 与 React.Component 功能相似

2.区别：PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较

3.原理：纯组件内部通过分别 对比 前后两次 props 和 state 的值，来决定是否重新渲染组件

class Hello extends React.PureComponent {
  render() {
    return (
      <div>纯组件</div>
    ) 
  } 
}

4.说明：纯组件内部的对比是 shallow compare（浅层对比）

5.对于值类型来说：比较两个值是否相同（直接赋值即可，没有坑）

let number = 0
let newNumber = number
newNumber = 2
console.log(number === newNumber) // false

state = { number: 0 }
setState({
number: Math.floor(Math.random() * 3)
})
// PureComponent内部对比：
最新的state.number === 上一次的state.number // false，重新渲染组件

6.对于引用类型来说：只比较对象的引用（地址）是否相同

错误演示：直接修改原始对象中的属性的值

const obj = { number: 0 }
const newObj = obj
newObj.number = 2
console.log(newObj === obj) // true

state = { obj: { number: 0 } }
// 错误做法
state.obj.number = 2
setState({ obj: state.obj })
// PureComponent内部比较：
最新的state.obj === 上一次的state.obj // true，不重新渲染组件

7.注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据！

用两个数来进行比较，而不是自己跟自己比较。

// 正确！创建新数据
const newObj = {...state.obj, number: 2}
setState({ obj: newObj })
// 正确！创建新数据
// 不要用数组的push / unshift 等直接修改当前数组的的方法
// 而应该用 concat 或 slice 等这些返回新数组的方法
this.setState({
  list: [...this.state.list, {新数据}]
})

8.完整代码

  state = {
    obj: {
      number: 0
    }

  }
  handleClick = () => {
    // 正确做法：创建新对象
    const newobj = { ...this.state.obj, number: Math.floor(Math.random() * 3) }
    this.setState(() => {
      return {
        // 修改，把旧的修改成新的
        obj: newobj
      }
    })
  }

5. 虚拟 DOM 和 Diff 算法

 React 更新视图的思想是：只要 state 变化就重新渲染视图

1.特点：思路非常清晰

2.问题：组件中只有一个 DOM 元素需要更新时，也得把整个组件的内容重新渲染到页面中？

不是

3. 理想状态：部分更新，只更新变化的地方。

4. 问题：React 是如何做到部分更新的？ 虚拟 DOM 配合 Diff 算法

1.虚拟 DOM：本质上就是一个 JS 对象，用来描述你希望在屏幕上看到的内容（UI）。

 2.执行过程

1.初次渲染时，React 会根据初始state（Model），创建一个虚拟 DOM 对象（树）（js对象）。

2.根据虚拟 DOM 生成真正的 DOM，渲染到页面中。

 

3.当数据变化后（setState()），重新根据新的数据，创建新的虚拟DOM对象（树）。

4.与上一次得到的虚拟 DOM 对象，使用 Diff 算法 对比（找不同），得到需要更新的内容。

5.最终，React 只将变化的内容更新（patch）到 DOM 中，重新渲染到页面。

代码演示

  1. 组件 render() 调用后，根据 状态 和 JSX结构 生成虚拟DOM对象

    render方法的调用，并不意味着浏览器中的重现渲染，render调用仅仅说明要进行diff，对比的过程，对比后，把要更新的内容一次性更新到浏览器中

  2. 示例中，只更新 p 元素的文本节点内容

{
 type: 'div',
 props: {
   children: [
      { type: 'h1', props: {children: '随机数'} },
      { type: 'p', props: {children: 0} }
   ] 
  } 
}

  只要 0 更新成 2，其他不更新
{ type: 'p', props: {children: 2} }

总结

  1. 工作角度：应用第一，原理第二。
  2. 原理有助于更好地理解 React 的自身运行机制。
  3. setState()异步更新数据。
  4. 父组件更新导致子组件更新，纯组件提升性能。
  5. 思路清晰简单为前提，虚拟 DOM 和 Diff 保效率。
  6. 虚拟 DOM -> state + JSX。
  7. 虚拟 DOM 的真正价值从来都不是性能。
格鲁的斯图尔特
关注
专栏目录
React常见面试题目9w字|-7|虚拟dom,React diff 算法的原理，key,组件命名，全局的dialog,数据持久化，react和vue的区别，设计思路，
VAN
04-22 74
从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。
React项目开发过程中需要注意避免re-render——React性能优化方案
winne雪
04-01 1980
1、PureComponent和shouldComponentUpdate 2、多挖掘能使用useRef的地方 3、正确使用useEffect的第二个参数 4、使用React.memo来控制整个函数组件的渲染时机 5、使用 useMemo() 进行细粒度性能优化 6、useCallback 7、避免更改你正用于 props 或 state 的值 8、合理拆分组件 9、其他非re-render的性能优化点
React的基本使用&JSX的基本使用&React组件&事件处理State&setState&事件绑定this指向
fengzitaba的博客
08-05 1101
React的基本使用 React的安装 安装命令:npm i react react-dom react包是核心,提供创建元素,组件等功能 react-dom 提供DOM相关功能 React的使用 1.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/rea
【React】组件化、JSX、JSX和vdom、setState
TwInkle
05-23 310
总结的内容： 对组件化的理解 JSX的本质 JSX和vdom的关系 react中何时patch? 自定义组件的解析 setState的过程 用react实现todolist demo,用demo来说明以上问题。 ★对组件化的理解 组件的封装 组件的复用 组件的封装： 组件的封装包括视图封装、数据封装、变化逻辑封装（数据驱动视图），组件里的视图、数据和变化逻辑外界都不需要知道，只需要导入对应...
React 核心概念：JSX，虚拟 DOM，Diff 算法，setState，state 和 props 梳理
LeviDing的博客
06-28 711
本文主要梳理一下我对 React 框架基础内容的认识，之后也会总结一些深度内容的认识。当然，笔者水平也有限，如果你发现不妥之处，望斧正！为什么要用 React 等前端框架因为可以进行组件...
【前端55_React】快速上手：新建项目、JSX 语法、VSCode 插件、组件、关于 setState、生命周期
Lovely Ruby 的手账
11-28 831
文章目录React 入门介绍新建并启动项目create-react-app 项目结构React 和 ReactCreateJSX语法基本使⽤函数jsx 对象条件表达数组属性src 属性元素类名行内 Style模块化 React 入门 介绍 官方介绍 来源于 facebook 新建并启动项目 在命令行里输入如下命令 npx create-react-app hello-react 什么是 npx 呢? 可以看一下阮一峰的教程 主要点： Node 自带 npm 模块，所以可以直接使用 npx 命令。万
React原理解密
liuyuhua666的博客
07-19 957
1. setState() 的说明 1.1 更新数据 setState() 是异步更新数据的 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState() 可以多次调用 setState() ，只会触发一次重新渲染 this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) co...
React进阶-虚拟 DOM 和 Diff 算法
m0_62118859的博客
05-03 1538
1.虚拟 DOM 虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容. 为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的 DOM 对象 和 HTML 元素之间是一一对应的关系 const element = { type: 'h1', props: { clas.
virtual-dom：关于Vue，React，Preact和Omi等框架源码的解读
02-06
所有这四个框架都提供了批量更新机制，例如React的`setState()`回调、Vue的`nextTick`或Promise链，以及Preact和Omi的相应API。这样可以在一个事件处理函数内多次改变状态，而只会触发一次DOM更新，进一步提高了性能...
react-simplereact一个极简的React框架用于说明React实现原理
08-14
`simple-react`会展示如何创建和比较虚拟DOM树，以及如何利用`diff`算法来最小化实际DOM的变更。 2. **组件化**：React中的所有东西都是组件。`simple-react`将演示如何定义组件，包括属性(props)的传递和状态...
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
简单解读react的setState
老司机的后备箱
11-07 320
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
React JSX语法学习（state状态，事件处理，组件生命周期，状态提升）
kebi99的博客
04-28 596
</h1>
React解密：React中setState的运行原理是什么
lee前端技术站
08-26 1213
我们知道react中更新state的时候，会调用setState方法。那么调用setState方法为什么就能更新组件的state呢，其原理又是什么呢？下面我们就来讲讲setState的原理： setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。 setState(stateChange | updater [, callback]) .
学习react基础(3)_setState、state、jsx、使用ref的几种形式
见贤思齐焉，见不贤内自省
10-12 926
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、this.setState和this.state的区别？二、react核心1.核心库2.jsx3.class和function组件4.事件5.ref总结 前言 学习react 一、this.setState和this.state的区别？ 常常将this.setState称为状态机，因为它在控制着我们类组件的状态，并且可以更改状态，改完之后还可以是页面中的数据也发生变化。而使用this.state对属性赋值只会改变数据并不
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
努力的鋜
08-15 1907
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops。react中使用shouldComponentUpdate生命周期函数调用setState引起的
react数据管理之setState与Props
xxx
10-09 496
React 不会直接修改当前状态对象，而是创建一个新的状态对象，以确保不直接修改状态，从而遵循 React 的不可变性原则。父组件通过属性（props）将数据传递给子组件，子组件不可以直接修改这些数据，它们是只读的。：React 会将新生成的虚拟 DOM 树与之前的虚拟 DOM 树进行比较，找出两者之间的差异（所谓的变更集合）。：当父组件的 props 发生变化时，会触发子组件的重新渲染，子组件会接收新的 props。：当组件的状态（state）发生变化时，会触发组件的重新渲染，从而更新界面。
setState异步——拿到state的值
x1037490413的博客
03-01 405
setState的第二个参数是一个回调函数，在函数里可以取到当前state的值 放大这段代码，在三个地方都打印state里的isShow的值，看到控制台的执行顺序 可以看到setState是异步函数，我们要实时拿到state的值要在setState的第二个参数的函数里拿 ...
【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架
最新发布
川峰的博客
01-02 1453
一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期； React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能； 生命周期和生命周期函数的关系： 生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段； 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程； 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程； 比如卸载过程（Unmount），组件从DOM树中被移除的过程；
React-Native学习笔记：组件与JSX语法解析
与Web开发中的React类似，React-Native也使用虚拟DOM来优化性能。当组件状态改变时，虚拟DOM会计算最小的变更集，然后应用到实际的原生视图上。 **4. 调试工具** React-Native提供了丰富的调试工具，如Chrome开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值