一、setState()

更新数据

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

react usestate更新值后立马拿到_react.js

推荐语法

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

react usestate更新值后立马拿到_react.js_02

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6YHnyOa1-1634973037718)(htt

react usestate更新值后立马拿到_Diff_03

二、JSX 语法的转化过程

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

react usestate更新值后立马拿到_react.js_04

三、组件性能优化

组件更新机制

  • setState() 的两个作用
  • 修改state
  • 更新组件
  • 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件)
  • react usestate更新值后立马拿到_前端_05

减轻state

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

react usestate更新值后立马拿到_react.js_06

避免不必要的重新渲染

  • 组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰
  • 问题:子组件没有任何变化时也会重新渲染
  • 如果避免不必要的重新渲染?
  • 解决方式:使用钩子函数 shouldComponentUpdate(nextProps, nextState)
  • 在这个函数中,nextProps和nextState是最新的状态以及属性
  • 作用:这个函数有返回值,如果返回true,代表需要重新渲染,如果返回false,代表不需要重新渲染
  • 触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate => render)
随机数案例

需求:随机生成数字,显示在页面,如果生成的数字与当前显示的数字相同,那么就不需要更新UI,反之更新UI。

利用nextState参数来判断当前组件是否需要更新

react usestate更新值后立马拿到_react.js_07

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件,每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) {
         // 判断一下当前生成的 值是否与页面的值相等
         // if(nextState.number !== this.state.number){
         //     return true
         // }
         // return false
         return nextState.number !== this.state.number
    }
    render() {
        return (
            <div>
                随机数:{this.state.number} <br />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}

利用props参数来判断是否需要进行更新

react usestate更新值后立马拿到_随机数_08

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件,每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }

    render() {
        return (
            <div>
                <NumberBox number={this.state.number} />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}
class NumberBox extends React.Component {
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState) {
        // 判断一下当前生成的 值是否与页面的值相等
        // if (nextProps.number !== this.props.number) {
        //     return true
        // }
        // return false
        return nextProps.number !== this.props.number
    }
    render() {
        return (
            <h1>随机数:{this.props.number} </h1>
        )
    }
}

纯组件

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

react usestate更新值后立马拿到_reactjs_09

实现原理
  • 说明:纯组件内部的对比是 shallow compare(浅层对比)
  • 对于值类型来说:比较两个值是否相同
  • react usestate更新值后立马拿到_随机数_10

  • 引用类型:只比对对象的引用地址是否相同

react usestate更新值后立马拿到_react.js_11


react usestate更新值后立马拿到_前端_12

  • 注意:state 或 props 中属性值为引用类型时,应该创建新数据,不要直接修改原数据

react usestate更新值后立马拿到_react.js_13

四、虚拟DOM和Diff算法

  • React更新视图的思想是:只要state变化就重新渲染视图
  • 部分更新,只更新变化的地方
  • React运用的核心点就是 虚拟DOM 配合 Diff 算法

虚拟DOM

本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容

虚拟DOM最大的特点是 脱离了浏览器的束缚,也就是意味着只要是能支持js的地方都可以用到react,所以为什么说react是可以进行跨平台的开发

react usestate更新值后立马拿到_随机数_14

Diff算法

执行过程

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

react usestate更新值后立马拿到_前端_15

代码演示

  • 组件render()调用后,根据状态和JSX结构生成虚拟DOM对象(render()方法的调用并不意味着浏览器进行渲染,render方法调用时意味着Diff算法开始比对了)
  • 示例中,只更新p元素的文本节点内容
  • 初次渲染的DOM对象

react usestate更新值后立马拿到_Diff_16

  • 数据更新之后的虚拟DOM对象

react usestate更新值后立马拿到_Diff_17