阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

React 源码阅读-6_037

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1014/117662.html

React 源码阅读-6

lazy

React.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)

React.lazy 接受一个函数,这个函数需要动态调用 import()
它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut exportReact 组件

React.lazy并不适合SSR

jsimport"> type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';import warning from 'shared/warning';export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {  let lazyType = {    $$typeof: REACT_LAZY_TYPE,    _ctor: ctor,    // React uses these fields to store the result.    _status: -1,    _result: null,  };  if (__DEV__) {    // In production, this would just set it on the object.    let defaultProps;    let propTypes;    Object.defineProperties(lazyType, {      defaultProps: {        configurable: true,        get() {          return defaultProps;        },        set(newDefaultProps) {          warning(            false,            'React.lazy(...): It is not supported to assign `defaultProps` to ' +              'a lazy component import. Either specify them where the component ' +              'is defined, or create a wrapping component around it.',          );          defaultProps = newDefaultProps;          // Match production behavior more closely:          Object.defineProperty(lazyType, 'defaultProps', {            enumerable: true,          });        },      },      propTypes: {        configurable: true,        get() {          return propTypes;        },        set(newPropTypes) {          warning(            false,            'React.lazy(...): It is not supported to assign `propTypes` to ' +              'a lazy component import. Either specify them where the component ' +              'is defined, or create a wrapping component around it.',          );          propTypes = newPropTypes;          // Match production behavior more closely:          Object.defineProperty(lazyType, 'propTypes', {            enumerable: true,          });        },      },    });  }  return lazyType;}

使用前


jsximport OtherComponent from './OtherComponent';</code></pre><p>使用后</p><pre><code> code="" jsxconst="" othercomponent="React.lazy(()">在组件首次渲染时,自动导入包含 OtherComponent 组件的包

jsximport OtherComponent from './OtherComponent';</code></pre><p>使用后</p><pre><code> code="" jsxconst="" othercomponent="React.lazy(()">路由分割代码

jsximport OtherComponent from './OtherComponent';</code></pre><p>使用后</p><pre><code> code="" jsxconst="" othercomponent="React.lazy(()">jsximport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';import React, { Suspense, lazy } from 'react';const Home = lazy(() => import('./routes/Home'));const About = lazy(() => import('./routes/About'));const App = () => (  <Router>    <Suspense fallback={<div>Loading...</div>}>      <Switch>        <Route exact path=" component=""{Home}/">" <route="" path="/about" <="" switch>="" suspense>="" router>);
jsximport OtherComponent from './OtherComponent';</code></pre><p>使用后</p><pre><code> code="" jsxconst="" othercomponent="React.lazy(()">jsximport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';import React, { Suspense, lazy } from 'react';const Home = lazy(() => import('./routes/Home'));const About = lazy(() => import('./routes/About'));const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path=" component=""{Home}/">" <route="" path="/about" <="" switch>="" suspense>="" router>);https://juejin.im/post/5c7d4a...
https://zh-hans.reactjs.org/d...

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!