我有最简单的APP。有一个父<App>组件和一个子<MyChildOne>组件。两者都是基于类的。
有没有人能解释一下为什么React调用了child <MyChildOne>的render函数两次？
下面是我的<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，此.counter具有值：1*
- 代码已调用MyChildOne，此.counter具有值：3 *
很明显，React调用了<MyChildOne>的render函数两次--但我不明白为什么！！！！
这对我没有好处，因为我想传递一个从<App>到<MyChildOne>的东西数组作为props，我想让<MyChildOne>为数组的每个'thing'成员呈现一个<h1>。我不希望<h1> s被渲染两次！
3条答案
按热度按时间t1rydlwq1#
你不应该太担心渲染函数被多次调用。如果您创建的逻辑依赖于多次调用的render函数，那么您很可能做错了什么。我的最佳建议是，您正在执行一些其他逻辑，这些逻辑会导致渲染函数被多次调用。
您应该注意，如果父组件重新呈现，则子组件也会重新呈现。我创建了您提供的代码的一个最小示例，它清楚地表明您的问题在其他地方。https://codesandbox.io/s/react-example-6ud9d
xmakbtuz2#
我不知道为什么，但这只发生在严格模式。我用你展示的相同代码创建了一个example project。尝试删除index.js文件中的React.StrictMode标签。您将看到MyChildOne组件只渲染一次。
另外，如果你要在类中设置一个属性，并在render方法中使用它，你应该使用state。像这样
.并像这样更改状态，
它会正确地重新渲染你的组件。但never改变render方法内部的状态;它会破解你的密码
如果你不想使用状态和生命周期方法，就不要使用类组件。使用功能组件代替。
dsf9zpds3#
1.您的函数只调用子渲染函数一次。
1.这不是在类组件中创建状态的方法，您可以使用。
1.状态的更新应该使用
this.setState：
{（）=>{this.setState（{ count：this.state.count+1 }）}}
1.组件呈现两次可能是因为您可能触发的事件，就像我使用鼠标悬停事件一样。