React懒加载普通JS文件

使用函数的方式传给React组件, 执行函数后,  会得到一个promise, 通过then可以获取到js文件中的内容

 

parent.js

import React from 'react';
import Children from './children';

const App = () => (
    <Children samples={() => import('./samples')} />
);

export default App;

children.js

import React, { useEffect, useState } from 'react';

const Child = ({ samples }) => {
    const [value, setValue] = useState(null);

    useEffect(() => {
        samples().then(res => setValue(res.default));
    }, [samples]);

    return (
        <div>
            {
                value ? 'value' : 'Loading...'
            }
        </div>
    );
};

export default Child;

samples.js

const samples = [1, 2, 3];
export default samples;