Для реактивной разработки популярным пакетом считается react+webpack.Что касается других пакетов или роллапов или других фреймворков построения, то я ими не пользовался внимательно и не знаком с ними.Я слышал, что существуют десятки тысяч посылки на гитхабе за короткий промежуток времени Звезда, очень читерская выборка, но это не тема нашей статьи, ха-ха. В этой статье основное внимание уделяется асинхронной загрузке модулей, я не буду здесь говорить о других вещах, а расскажу только об оптимизации загрузки по требованию. При использовании веб-пакета для сборки мы помещаем общие ресурсы в файл поставщика, чтобы уменьшить наши бизнес-файлы, но у нашего бизнеса может быть большое количество подбизнесов, и некоторые бизнесы могут быть никогда не доступны для некоторых пользователей. , если мы загрузим весь бизнес-код за один раз, не слишком ли это расточительно и экстравагантно, к счастью, сам webpack предоставляет функцию require.ensure(), но этот метод оптимизации не для нас В рамках данного обсуждения этот время мы представим компонент асинхронной загрузки реакции, который, на мой взгляд, относительно высок. Даже если вам это не нравится, это отличная вещь, чтобы учиться. Давайте посмотрим на следующий код. Если асинхронная загрузка модуля не используется, страница 1 и страница 2 будут объединены в один бизнес-файл. Если я никогда не вхожу в маршрут /buy, это не пустая трата загрузки, тогда страницу 2 лучше всего превратить в асинхронный компонент Ну и что конкретно нужно сделать?
<Route path="/" component={App}>
<IndexRoute component={page1}/>
<Route path="/buy" component={page2}/>
</Route>
Ладно, разве это не просто асинхронный компонент, разве это не очень просто, не так ли, как в следующем примере:
let page2 = ()=>{
let page2Comp = import('lazyComp');
return {
<div>
<page2Comp />
</div>
}
}
Ой, этот IQ слишком высок, я думал, что обманываю, я понял асинхронный компонент буквально в нескольких строках, наивно! К сожалению, это было неправильно. Не знаю, почему? Давайте посмотрим, что возвращает функция import().Это объект-обещание, по крайней мере, сначала вам нужно с ним разобраться. Это похоже на то, как если вы приглашаете кого-то на званый обед к себе домой, вам, по крайней мере, нужно сначала организовать место, взять стул, чтобы проделать дырку, и подождать, пока кто-нибудь не придет, прежде чем вы не забудете передвинуть табуретку. развернуться и уйти.. Итак, как получить дырку? На самом деле, это очень просто, и каждый должен с ним ознакомиться.Пожалуйста, смотрите небольшой каштан ниже.
class MyComp extends React.Component{
constructor(){
return {
isLoaded:false
}
}
render(){
let { isLoaded, data } = this.state;
if(!isLoaded){
return null;
}
return <Wrapper data={data} />
}
componentDidMount(){
http.getData({}).then((results)=>{
this.setState({
data:results.data,
isLoaded:true
})
})
}
}
Этот код знаком всем, перед возвратом данных не выполняется никакого конкретного рендеринга, и рендеринг не запускается до тех пор, пока данные не будут возвращены. Просто разница между асинхронными компонентами в том, что полученные данные — это сам компонент, что нужно сделать до того, как компонент будет получен? Это просто, можно использовать пустой элемент, чтобы немного его занять. Далее давайте посмотримофициальный сайт вебпакаПриведен пример асинхронного компонента:
class LazilyLoad extends React.Component {
constructor() {
super(...arguments);
this.state = {
isLoaded: false,
};
}
componentDidMount() {
this._isMounted = true;
this.load();
}
componentDidUpdate(previous) {
if (this.props.modules === previous.modules) return null;
this.load();
}
componentWillUnmount() {
this._isMounted = false;
}
load() {
this.setState({
isLoaded: false,
});
const { modules } = this.props;
const keys = Object.keys(modules);
Promise.all(keys.map((key) => modules[key]()))
.then((values) => (keys.reduce((agg, key, index) => {
agg[key] = values[index];
return agg;
}, {})))
.then((result) => {
if (!this._isMounted) return null;
this.setState({ modules: result, isLoaded: true });
});
}
render() {
if (!this.state.isLoaded) return <div className="toast toast-show">
<Loading/>
</div>;
console.log("modules:",this.state.modules);
return React.Children.only(this.props.children(this.state.modules));
}
}
Вы чувствуете, что это очень связано с каштаном, который асинхронно загружает данные выше? Далее давайте подробно рассмотрим этот код, про другие места много говорить не буду, возможно, некоторые студенты могут не понять код в функции рендеринга.return React.Children.only(this.props.children(this.state.modules));Этот код, этот метод рендеринга называется рендерингом с обратным вызовом. Чтобы дать вам небольшой анализ, давайте взглянем на пример кода для вызова вышеуказанных компонентов:
const LazilyLoadFactory = (Component, modules) => {
console.log("LazilyLoadFactory");
return (props) => (
<LazilyLoad modules={modules}>
{(mods) => <Component {...mods} {...props} />}
</LazilyLoad>
);
};
Если вы все еще не понимаете, сначала поставьте вышеreturn React.Children.only(this.props.children(this.state.modules));Давайте разберем несколько элементов в этом коде:
- this.props.children: каждый должен знать, что это означает. Это относится к дочернему элементу вызывающего компонента. В приведенном выше примере это не относится к
(mods) => <Component {...mods} {...props} />эта функция - this.state.modules: это переменная модуля входящих реквизитов в компоненте LazilyLoad, который обрабатывается в переменной состояния.
- React.Children.only: Излишне говорить, что они должны быть знакомы
После небольшого разбора таким образом, это очень ясно? Давайте вернемся к нашему компоненту без состояния LazilyLoadFactory, который визуализирует компонент LazilyLoad. Метод использования обратного рендеринга фактически использует модули параметров в качестве входного параметра props для компонента параметра Component. Рендеринг, очевидно, параметр компонента Component является стендом этого асинхронного компонента, давайте посмотрим на конкретный код этого компонента, переданный в качестве параметра:
class WrapLazyComp extends React.Component{
render(){
const Comp = this.props.Comp;
return <div>
<Comp />
</div>;
}
}
Итак, следующий наш общий абонент
LazilyLoadFactory(WrapLazyComp,{
Comp: () => import('实际业务模块')
});
На данный момент наши асинхронные компоненты завершены, в основном используется import() для достижения асинхронной загрузки модулей.Некоторые студенты могут быть немного неясны в отношении рендеринга обратного вызова, а тем, кто не знаком, может потребоваться немного понять. Лично я предпочитаю этот метод для загрузки асинхронных модулей.Конечно, есть такие методы, как require.ensure и т. д. Конкретный метод оптимизации зависит от личных предпочтений и конкретной ситуации проекта и не может быть обобщен. Ну спасибо, если есть ошибки, подскажите.