React 小知识

React.StrictMode

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

示例：

import React from 'react';

function ExampleApplication() {
  return (
    

      

      
        

          
          
        
      
      

    
  );
}

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  until OtherComponent loads
    }>
      

        
      
    
  );
}

ReactDOM.createPortal

将组件挂载在任意节点

ReactDOM.createPortal(child, container)

Profiler

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

render(
  
    
      
    
    

  
);

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...
}