React渲染中动态组件被调用两次的问题排查与解决

问题原因 #

• 你将SampleBtn函数组件定义在了App类组件的render方法内部。每次App触发渲染时，都会重新创建一个全新的SampleBtn实例，React会把它识别成完全不同的组件，执行卸载旧组件、挂载新组件的流程，这就导致console.log('button rendered')被多次执行。
• 即便移除了<React.StrictMode>，开发环境下React的内部优化机制或热更新逻辑，也可能触发额外的渲染，甚至让日志打印次数进一步增加。

解决方法 #

1. 将组件定义移到render方法外部 #

把SampleBtn的定义放到App类的外面，这样它只会被创建一次，不会随App的重复渲染而重新定义，从根源上避免重复挂载：

import React from 'react';

// 把组件定义移到外部
const SampleBtn = (props) => {
  console.log('button rendered');
  return <button>test</button>;
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <SampleBtn />
      </div>
    );
  }
}

export default App;

2. 遵循React组件定义的最佳实践 #

永远不要在组件的渲染方法/函数体内定义其他组件，这种写法会破坏React的diff比对逻辑，引发不必要的组件卸载与重新挂载，既影响性能，也会出现这类日志重复、状态丢失等问题。

内容的提问来源于stack exchange，提问作者Onera