React-小知识

70次阅读

共计 744 个字符，预计需要花费 2 分钟才能阅读完成。

`React.StrictMode`

识别具有不安全生命周期的组件
有关旧式字符串 ref 用法的警告
关于已弃用的 findDOMNode 用法的警告
检测意外的副作用
检测遗留 context API

示例：

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

`React.Lazy`

允许我们定义动态加载的组件
示例：

// This component is loaded dynamically
const SomeComponent = React.lazy(() => import('./SomeComponent'));

`React.Suspense`

延迟加载组件，当组件未准备好时，显示 loading

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}