react2-portal、key、严格模式StrictMode

Portal

可以改变子级内容的显示区域，如不在<div class='root'></div>中显示，而是在<body></body>中显示

由于在main.jsx中创建了一个id为root的元素，组件均挂载在该元素上，因此所有内容会被渲染在<div id='root'></div>中

wechat_2025-08-26_093656_834


如果想将内容渲染在body或者其他地方，可以通过createPortal

步骤：

  1. 在组件中导入createPortal

  2. 在index.html中创建id为xx-xx的父级容器

  3. 在组件中使用return createPortal (<></> , document.querySelector('#xx-xx'))

import { createPortal } from "react-dom"

const CopyShow = ({copied}) => {
  return createPortal(
    <section>
      {
        copied && (
            <div>
                <h1>Copied from clipboard</h1>
            </div>
        )
      }
    </section>
  , document.querySelector('#copy-show'))
}

export default CopyShow


<!--index.html-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="copy-show"></div> <!--增加-->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

企业微信截图_20250826100521


key

  • 当 key 不变时，React 会认为这是同一个元素，从而复用它

  • 当 key 改变时，React 会认为这是一个全新的元素，会销毁旧元素并创建新元素


严格模式

// main.js
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

StrictMode严格模式：会在开发环境中对其包裹的组件执行额外的检查和警告

作用：

  • 识别不安全的生命周期方法：检测并警告那些已被废弃或不安全的组件生命周期方法

  • 检查意外的副作用：在开发模式下，会有意地双重调用组件的 render 方法、函数组件体以及 useEffect 等钩子，以帮助你发现可能存在的副作用问题（生产环境不会有这种双重调用）

  • 检测过时的 ref 用法：警告使用过时的 findDOMNode 方法，鼓励使用更安全的 ref 附着方式

  • 检测意外的上下文使用：帮助识别在使用 Context 时可能出现的问题

posted @ 2025-08-26 10:06  原语  阅读(2)  评论(0)    收藏  举报