我正在渲染一个简单的反应组件，其中没有设置状态和道具
我在render函数中仅将文本记录到控制台一次，但记录了两次：
rendering counter
rendering counter
以下是组件counter.js的代码
import React, { Component } from "react";
class Counter extends Component {
render() {
console.log("rendering counter"); //this is printed two times
return <span className={"badge m-3 badge-primary"}>counter</span>;
}
}
export default Counter;
还有index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Counter from "./components/counter";
ReactDOM.render(
<React.StrictMode>
<Counter />
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
似乎组件中的render函数被调用了两次。但是为什么呢？
正如它是在docs中编写的：
严格模式无法自动为您检测副作用，但可以通过使其更具确定性来帮助您发现它们。这是通过
double-invoking以下方法有意完成的：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句