0
点赞
收藏
分享

微信扫一扫

React-其它内容-StrictMode

StrictMode 概述

  • 作用: 开启​​严格模式​​, 检查后代组件中是否存在潜在问题

注意点:

  • 和 Fragment 一样, 不会渲染出任何 UI 元素
  • 仅在​​开发模式​​ 下有效

StrictMode 检查什么

  • 检查过时或废弃的属性 / 方法 / ...

检查意外的副作用:

  • 检查被包裹的组件当中写的一些逻辑代码会被调用多次时,是否会产生一些副作用

index.js:

import React from "react";
import {createRoot} from "react-dom/client";
import App from "./App";

// 为提供的创建一个 React 根container并返回根。
const root = createRoot(document.getElementById("root"));

// 根可用于将 React 元素渲染到 DOM 中
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);

app.js:

import React from 'react';

class App extends React.PureComponent {
constructor(props) {
super(props);
console.log('constructor');
}

render() {
return (
<div id={'app'}>
<p ref={'myRef'}>我是段落</p>
<button onClick={() => {
this.btnClick()
}}>按钮
</button>
</div>
)
}

btnClick() {
console.log(this.refs.myRef);
}
}

export default App;
  • 这个组件的​​constructor​​ 会被调用两次

React-其它内容-StrictMode_React

官方文档

  • ​​https://zh-hans.reactjs.org/docs/strict-mode.html#gatsby-focus-wrapper​​




举报

相关推荐

0 条评论