zoukankan      html  css  js  c++  java
  • React优化

    使用动态import来分割代码

    使用动态import来“懒加载”代码,如果你没办法直接减少应用的体积,那么不妨尝试把应用从单个 bundle 拆分成单个 bundle + 多份动态代码的形式。

    方法一:使用动态import

    import("./math").then(math => {
      console.log(math.add(16, 26));
    });

    方法二:引用react的高阶组件react-loadable进行动态import

    import Loadable from 'react-loadable';
    import Loading from './loading-component';
    
    const LoadableComponent = Loadable({
      loader: () => import('./my-component'),
      loading: Loading,
    });
    
    export default class App extends React.Component {
      render() {
        return <LoadableComponent/>;
      }
    }

    shouldComponentUpdate避免重复渲染

    我们可以通过根据自己的业务特性,重载shouldComponentUpdate,只在确认真实DOM需要改变时,再返回true。一般的做法是比较组件的props和state是否真的发生变化,如果发生变化则返回true,否则返回false

    合理的使用key

    在组件发生增删改、排序等操作时,可以根据key值的位置直接调整DOM顺序,告诉React 避免不必要的渲染而避免性能的浪费

    合理的拆分和使用组件

    合理的拆分组件以提高组件的规范性和复用性。合理的使用类组件和函数组件

    合理的传递props

    props尽量只传需要的数据,避免多余的更新,尽量避免使用{...props},防止将不需要的属性传递给子组件

    在constructor中绑定this

    因为在constructor中对函数进行this的绑定只需要绑定一次。

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this); //构造函数中绑定
    }
    //然后可以
    <p onClick={this.handleClick}>

    若在使用时绑定则会每次调用时都要重新绑定

    <p onClick={this.handleClick.bind(this)}>

    对错误边界的处理

    错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

    如果一个 class 组件中定义了 static getDerivedStateFromError()componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。当抛出错误后,请使用 static getDerivedStateFromError() 渲染备用 UI ,使用 componentDidCatch() 打印错误信息。

    Fragment替代无意义的标签

    使用Fragment来替代掉无意义的标签。

  • 相关阅读:
    [转]数据库优化方法(三)
    [转]根据性能监视器,分析性能瓶颈
    sqlserver获取表名,字段名
    VBA SQLServer 基本操作
    oracle常见权限分配
    oracle 里面定时执行任务,比如存储过程内容等
    cisco 路由配置
    cisco LAN
    mongodb的启动参数--quiet
    mongodb的IO测试工具 mongoperf
  • 原文地址:https://www.cnblogs.com/suihang/p/13818874.html
Copyright © 2011-2022 走看看