React组件性能优化

简介: React组件性能优化

jsx语法的转化过程

jsx仅仅是createElement()方法的语法糖
jsx语法会被 @balel/preset-react插件编译为createElement()方法

组件的更新机制

setState的两个作用
1.修改state
2.更新组件ui
父组件在重新渲染的时候
子组件也会重新渲染
但是只会渲染当前组件的子树

组件性能优化---减轻state

1.state只存储跟组件渲染相关的数据
不用做渲染相关的数据不要放在state中,比如定时器id
对于需要在放多个方法中用到的数据,应该放在this中
class Father extends React.Component{
  componentDidMount() {
    // 放在this上
    this.timeId = setInterval(() => { 
      console.log('开始执行')
    },500)
  }
  componentWillUnmount() { 
    clearInterval(this.timeId)
  }
  render() { 
    return (
      <div>
        <p>显示的值</p>
      </div>
    )
  }
}

组件性能优化--避免不必要的重新渲染

组件的更新机制:父组件的更新会引起子组件也会被更新
如果子组件没有任何变化时也需要重新渲染的话
怎么避免不必要的更新渲染呢?
可以使用钩子函数 shouldComponentUpdate(nextProps,nextState)
该函数会返回一个值决定组件时候重新渲染
返回true表示需要重新渲染;
false表示不需要重新渲染
下面的伪代码
class Hello extends React.Component{
  shouldComponentUpdate(){
    return false //这个组件不需要重新渲染
  }
  render() { 
    return (
      <div>
        <p>显示的值</p>
      </div>
    )
  }
}
该函数的触发时机:它是更新阶段的钩子函数
组件重新渲染前执行shouldComponentUpdate(){}
下一个钩子函数是render.
如果shouldComponentUpdate返回的是false
render这个钩子函数就不会被执行了。

shouldComponentUpdate返回false

class Father extends React.Component{
  state = {
    num:25
  }
  shouldComponentUpdate(nextProps, nextState) { 
    // 为false,组件是不会更新的,render函数不会被触发
    // 当我们点击按钮的时候,render没有触发,视图就没有更新
    // 当然第一次的时候,render函数的时候肯定是会被触发的。
    return false
  }
  // 新增
  addhandler = () => { 
    this.setState({
      num: this.state.num + 1
    })
  }
  render() { 
    console.log('render函数会被触发')
    return (
      <div>
        <button onClick={this.addhandler}>增加</button>
        <p>显示的值{this.state.num }</p>
      </div>
    )
  }
}

shouldComponentUpdate返回true

class Father extends React.Component{
  state = {
    num:25
  }
  shouldComponentUpdate(nextProps, nextState) { 
    // 为false,组件是不会更新的,render函数不会被触发
    // 当我们点击按钮的时候,render没有触发,视图就没有更新
    // 当然第一次的时候,render函数的时候肯定是会被触发的。
    // 通过this.state.num获取更新前的值 
    console.log('更新前的值', this.state.num)
    console.log('最新的值', nextState)
    return true
  }
  // 新增
  addhandler = () => { 
    this.setState({
      num: this.state.num + 1
    })
  }
  render() { 
    console.log('render函数会被触发')
    return (
      <div>
        <button onClick={this.addhandler}>增加</button>
        <p>显示的值{this.state.num }</p>
      </div>
    )
  }
}

什么时候跟新了

可以通过最新的值和上一次的值 是否一样。一样的话就不进行更新了
shouldComponentUpdate(nextProps, nextState){
    <!-- 最新的值和上一次的值一样 不需要更 -->
    if(nextState.num == this.state.num){
        return false
    }else{
        render teue
    }
    <!-- 可以将上面的代码优化一下 下面的代码更加的好 -->
    return nextState.num!==this.state.num
}

基本数据类型

子组件
import React from "react";
class ListCom extends React.Component{
    shouldComponentUpdate(nextProps) { 
        console.log('是否跟新', nextProps.num !== this.props.num)
        return nextProps.num !== this.props.num
    }
    render() { 
        return (
            <ul>
                <li>{this.props.num }</li>
            </ul>
        )
    }
}
export default ListCom
父页面
class Father extends React.Component{
  state = {
    num:20,
  }
  // 新增
  changehandler = () => { 
    let newValue=30
    this.setState({
      num: newValue
    })
  }
  //不改变
  hander = () => { 
    let valueCont = 20
    this.setState({
      num: valueCont
    })
  }
  render() { 
    return (
      <div>
        <button onClick={this.changehandler}>跟新数据</button>
        <button onClick={this.hander}>原来的值</button>
        <ListCom num={this.state.num}></ListCom>
      </div>
    )
  }
}

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
76 0
|
2月前
|
前端开发 API 开发者
你可能没有关注过的 React 性能优化,帮你突破瓶颈
你可能没有关注过的 React 性能优化,帮你突破瓶颈
|
2月前
|
前端开发 数据可视化 UED
React的代码分割:使用React.lazy和Suspense进行性能优化
【4月更文挑战第25天】使用React的`React.lazy`和`Suspense`进行代码分割可优化性能,按需加载组件以提升应用启动速度和用户体验。`React.lazy`接收返回Promise的组件动态导入,而`Suspense`提供加载指示器,保证加载过程中的用户体验。适用于大型组件或路由应用,但需注意服务器配置、避免过度拆分和确保关键代码即时加载。合理运用能显著改善应用性能。
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
31 1
|
2月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
91 1
|
2月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
2月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
31 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
2月前
|
资源调度 前端开发 JavaScript
React组件
React组件
49 0