React初始记录（六）

老马爱敲代码
109 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

React.lazy

React.lazy函数能像渲染常规组件一样处理动态引入的组件 例子：

const A = React.lazy(()=> import('./xxxx'))

这样就能在首次渲染组件时，自动导入包含xxx组件的包

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

然后应在Suspense组件中渲染lazy组件，如此就能在等待加载lazy组件时做优雅降级

import React, { Suspense } from 'react';

const A = React.lazy(() => import('./xxx'));

function MyComponent() { return (

<Suspense fallback={
Loading...
}>
); }

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。可以将 Suspense 组件置于懒加载组件之上的任何位置。甚至可以用一个 Suspense 组件包裹多个懒加载组件。

import React, { Suspense } from 'react';
const A = React.lazy(() => import('./xxx'));
const B = React.lazy(() => import('./xxx'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <A />
        <B />
      </Suspense>
    </div>
  );
}

异常捕获边界（Error boundaries）

如果模块加载失败（如网路问题），它会触发一个错误。可以通过异常捕获边界（Error boundaries）技术处理这些情况

import React, { Suspense } from 'react';
import Error from './xxxx';

const A = React.lazy(() => import('./xxxx'));
const B = React.lazy(() => import('./B'));

const MyComponent = () => (
  <div>
    <Error>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <A />
          <B />
        </section>
      </Suspense>
    </Error>
  </div>
);

Context

Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

avatar
文章
阅读
粉丝