React类组件是否仅能定义一个ComponentDidMount生命周期方法？

核心结论 #

• 每个React类组件无需强制只写一个componentDidMount，定义多个不属于JS语法错误，代码可以正常启动运行，但只有最后一个定义的componentDidMount会被React触发执行，前面所有同名方法都会被直接覆盖，完全不会生效。
• 该规则和React框架本身无关，是ES6 Class的原生特性：同一个类中定义多个同名方法时，后定义的方法会直接覆盖先定义的方法。

示例验证 #

你可以用下面的代码做测试：

import React from 'react';

class TestComponent extends React.Component {
  // 第一个定义的同名方法，会被覆盖，永远不会执行
  componentDidMount() {
    console.log('第一个挂载逻辑执行');
  }

  // 第二个定义的同名方法，是最终生效的生命周期方法
  componentDidMount() {
    console.log('第二个挂载逻辑执行');
  }

  render() {
    return <div>测试组件</div>
  }
}

上述代码运行后，控制台只会打印第二个挂载逻辑执行。

最佳实践 #

如果需要在组件挂载后执行多段独立逻辑，不要定义多个同名生命周期方法，将所有逻辑都放在同一个componentDidMount中，按需求拆分不同函数调用即可。

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