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)

Profiler

测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  // Aggregate or log render timings...
}