我有最简单的应用程序。有一个家长<App>
组件和一个 child <MyChildOne>
成分。两者都是基于类(Class)的。
谁能解释一下为什么React调用child的render函数<MyChildOne>
两次?
这是我的 <App>
代码:
import React from "react";
import "./App.css";
import MyChildOne from "./MyChildOne.js";
class App extends React.Component {
render() {
return (
<div>
<MyChildOne />
</div>
);
}
}
export default App;
这是我的 <MyChildOne>
代码:
import React from "react";
class MyChildOne extends React.Component {
counter = 0;
render() {
this.counter = this.counter + 1;
console.log(
"Code has called MyChildOne and this.counter has value: " + this.counter
);
return <h1>Hello, {this.counter}</h1>;
}
}
export default MyChildOne;
浏览器中的输出是这样的:
你好,1
这是控制台中记录的内容:
代码调用了 MyChildOne 并且 this.counter 的值为:1
代码调用了 MyChildOne 并且 this.counter 的值为:2
很明显React正在调用<MyChildOne>
的渲染函数两次 - 但我不明白为什么!!!!
这对我来说没有好处,因为我想将 <App>
中的一系列内容作为 props 传递至<MyChildOne>
我想要 <MyChildOne>
比如说,渲染一个 <h1>
对于该数组的每个“事物”成员。我不想要 <h1>
s 被渲染两次!
最佳答案
您不必太担心渲染函数被多次调用。如果您创建的逻辑依赖于多次调用渲染函数,那么您很可能做错了什么。我最好的办法是您正在执行一些其他逻辑,导致渲染函数被多次调用。
您应该注意,如果您的父组件重新渲染,您的子组件也会重新渲染。我创建了您提供的代码的最小示例,这清楚地表明您的问题出在其他地方。 https://codesandbox.io/s/react-example-6ud9d
关于javascript - 在 React 中,为什么子组件的渲染函数会被调用两次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61138766/