react usestate更新值后立马拿到

转载

代码匠人之心 2024-10-14 09:55:50

文章标签 react.js 前端 reactjs 随机数 Diff 文章分类 架构后端开发

一、setState()

更新数据

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

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

二、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>
        )
    }
}