React-小知识

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>
  );
}

ReactDOM.createPortal

将组件挂载在任意节点

ReactDOM.createPortal(child, container)