为什么 React 组件在未传递任何 props 时会记录控制台语句

Question

嗨，我有两个功能组件，有人可以解释一下为什么 LoxoneApp 组件中的控制台语句每秒左右记录一次，即使它没有任何 props 传递给它。

提前致谢

import React from "react";
import LoxoneApp from './LoxoneApp'
const SetLocation = (props) => {
return ( 
<LoxoneApp //rooms = {props.rooms}
//conts = {props.conts}
//cats = {props.cats}
//socket = {props.socket}
>
</LoxoneApp>     
); 
}
export default SetLocation;

和

import React from 'react';
const LoxoneApp = () => {
console.log('logged from LoxoneApp Component')
return (
<p>hell</p>
);
} 
export default LoxoneApp;

Answer 1

它正在重新连接，因为父组件正在这样做，您必须使用React.memo来防止该组件重新重新重新连接。

export default React.memo(LoxoneApp);

您也可以导出备忘录并像这样使用它：

import React, { memo } from 'react';
...
export default memo(LoxoneApp);

另一种方法是将该组件呈现为SomeArr.map()的子组件，并且未将 key 属性传递给它。