最佳实践React性能优化

1: React.lazy和React.Suspense封装dynamic函数动态引入组件

1：基本使用

//使用方法
import React, {Component} from 'react';
import {dynamic} from './utils';

const LoadingHome = dynamic(() => import('./components/Home'));
const LoadingUser = dynamic(() => import('./components/User'));

class App extends Component {
    state = {
        showHome: false,
        showUser: false
    }
    toggle = (key) => {
        this.setState({
            [key]: !this.state[key]
        })
    }
    render() {
        let {showHome, showUser} = this.state
        return (
            <div>
                {showHome && <LoadingHome/>}
                {showUser && <LoadingUser/>}
                <button onClick={() => this.toggle('showHome')}>showHome</button>
                <button onClick={() => this.toggle('showUser')}>showUser</button>
            </div>
        );
    }
}
export default App;
复制代码

//封装dynamic函数
import React from 'react';
const Loading = () => <div>Loading</div>;

export function d