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 dynamicallyconst SomeComponent = React.lazy(() => import('./SomeComponent'));

React.Suspense

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

// This component is loaded dynamicallyconst 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)