React原理

最新推荐文章于 2024-11-17 23:19:31 发布

理头崴特

最新推荐文章于 2024-11-17 23:19:31 发布

阅读量131

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/m0_60698858/article/details/120263171

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文探讨了React中的setState异步性及其推荐语法，解释了如何利用回调函数确保状态更新的顺序。此外，还介绍了JSX的本质以及组件性能优化方法，包括减轻state负担、避免不必要的重新渲染和使用纯组件。最后，阐述了虚拟DOM和Diff算法在实现部分更新中的关键作用。

摘要由CSDN通过智能技术生成

一、setState

（一）异步性

setState是异步更新数据的：

以下代码执行结构中log打印出来的数据是1，表示setState是在log后被执行的，是一个异步操作

state = {
    number: 1
  }
  add = () => {
    this.setState({
      number: this.state.number+1
    })
    console.log(this.state.number)  // 1
  }

这种异步性会导致如果一个方法中存在两个setState，后面的setState无法基于前面setState设置好的结果来进行相关操作，因此引出了推荐语法来解决这一问题：

（二）推荐语法

参数：

state：表示最新的state

props：表示最新的props

state = {
    number: 1
  }
  add = () => {
    this.setState((state, props) => {
      return {
        number: state.number+1
      }
    })
    this.setState((state, props) => {
      return {
        number: state.number+1
      }
    })
    console.log(this.state.number)  // 1
  }

1、log结果仍为1表示该方法也是异步的

2、使用这种方法执行过两次setState时，后面的setState通过回调函数中的参数state可以获取到最新的值，因此执行完毕number的值为3，也就是两次setState均有效。

（三）setState的回调函数

当需要在setState执行结束后进行一些操作时，可以调用setState方法提供的回调函数（参数形式）：

state = {
    number: 1
  }
  add = () => {
    this.setState(
       // 参数1：state
      (state, props) => {
        return {
          number: state.number+1
        }
      },
      // 参数2：callback
      // 状态更新并重新渲染后立即执行
      () => {
        console.log('callback:', this.state.number) // 2
      })
    console.log(this.state.number)  // 1
  }

二、JSX

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

三、组件性能优化

（一）减轻state

只存储跟组件渲染相关的数据，不用做渲染的数据不要放在state中，比如定时器id等，对于这种需要在多个方法中用到的数据，应该放在this中

（二）避免不必要的重新渲染

组件更新机制：父组件更新会引起子组件也被更新，但子组件没有任何变化时也会重新渲染，这就产生了不必要的渲染
解决方式：使用钩子函数shouldComponentUpadte(nextProps, nextState)
作用：通过返回值决定该组件是否重新渲染，返回true/false
触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpadte→render）

// 钩子函数
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    // 返回false，阻止组件重新渲染
    // return false
    
    // 最新的状态：
    console.log('最新的state：', nextState)
    // 更新前的状态：
    console.log('this.state：', this.state)
    
    return true
  }

（三）纯组件