多次调用ReactDOM.render仅实例化一次组件？弹窗二次点击不渲染原因

嘿，我来帮你拆解这两个React相关的问题，一步步给你讲清楚！

这其实是React的虚拟DOM复用机制在起作用。当你多次调用ReactDOM.render(<Component />, container)时，React会先检查这个容器里已经存在的React组件树：

• 如果新渲染的组件类型和容器中已有的根组件类型一致，React会直接复用现有的组件实例，不会重新执行constructor、componentDidMount这些生命周期钩子。
• 它只会对比新的props/state和旧的，通过diff算法更新DOM中变化的部分，而不是完全销毁重建。

这么做的核心目的是性能优化——避免不必要的组件实例化和DOM操作，毕竟DOM操作是前端性能消耗的重灾区。

结合你的代码来看，问题出在组件实例的状态被保留了：

1. 第一次点击按钮，React实例化CustomAlert，state初始为{show: true}，渲染出Alert组件。
2. 点击关闭按钮，组件执行setState({show: false})，render返回null，React会把Alert对应的DOM元素从mountNode中移除，但这个CustomAlert的组件实例并没有被销毁，它的state还是{show: false}，依然被React内部管理着。
3. 当你再次点击按钮调用ReactDOM.render(<CustomAlert/>, mountNode)时，React发现容器里已经有一个CustomAlert实例了，就直接复用这个实例。而这个实例的state还是show: false，所以render直接返回null，看起来就像组件没渲染，也不会重新执行constructor（因为没创建新实例）。

解决办法有两种，推荐第二种更符合React的设计思路： #

方法1：给组件加唯一key，强制React创建新实例

每次渲染时给CustomAlert加一个动态变化的key，比如时间戳，这样React会认为这是一个全新的组件，从而重新实例化它：

function buttonHandler(event) { 
  event.preventDefault(); 
  // 用时间戳作为唯一key，每次点击都生成新的key
  ReactDOM.render( <CustomAlert key={Date.now()}/>, document.getElementById(mountNode) ); 
}

方法2：把状态提升到父组件，由父组件控制显示/隐藏

这是React更推荐的状态管理方式，把Alert的显示状态从组件内部移到父级，让父组件决定是否渲染它：

// 假设这是你的父组件（比如页面中的某个组件）
import React, { useState } from 'react';
import CustomAlert from './CustomAlert';

function ParentComponent() {
  // 父组件管理Alert的显示状态
  const [showAlert, setShowAlert] = useState(false);

  const buttonHandler = (event) => {
    event.preventDefault();
    setShowAlert(true);
  };

  return (
    <div>
      <button onClick={buttonHandler}>打开Alert</button>
      {/* 父组件控制是否渲染CustomAlert */}
      {showAlert && <CustomAlert onClose={() => setShowAlert(false)} />}
    </div>
  );
}

// 修改CustomAlert组件，移除内部state，接收父组件的关闭回调
import React from 'react'; 
import {Alert} from 'react-bootstrap'; 

export default class CustomAlert extends React.Component { 
  handleAlertDismiss() { 
    // 调用父组件传来的回调，通知父组件关闭Alert
    this.props.onClose(); 
  } 
  render() { 
    // 不需要再判断show，因为父组件已经控制是否渲染了
    return ( 
      <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}> 
        <h4> Test </h4> 
      </Alert> 
    ); 
  } 
}

这种方式更符合React的单向数据流理念，状态管理更清晰，也避免了多次调用ReactDOM.render带来的问题。

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