React类组件：新函数应置于生命周期方法内还是外部？

两种写法的差异分析 #

• 写法一：在componentDidUpdate内部定义myFunc
  每次组件触发更新（包括重渲染）时，componentDidUpdate会被执行，内部的myFunc会在每次执行这个生命周期方法时重新创建一个新的函数实例。也就是说，组件每更新一次，就会生成一个新的myFunc，旧的函数实例会被标记为垃圾回收。

  示例代码：

  componentDidUpdate(prevProps, prevState) {
    const myFunc = () => {
      // 你的业务逻辑
    };
    myFunc();
  }
  

• 写法二：在类内部（原型上）定义myFunc并通过this调用
  这种方式下，myFunc只会在类定义阶段被创建一次，挂载到类的原型上，该组件的所有实例都会共享这同一个函数实例。无论组件更新多少次，this.myFunc指向的都是同一个函数对象，不会重复创建。

  示例代码：

  class MyComponent extends React.Component {
    myFunc() {
      // 你的业务逻辑
    }
  
    componentDidUpdate(prevProps, prevState) {
      this.myFunc();
    }
  }
  

额外补充 #

虽然写法一会重复创建函数，但大多数场景下这种性能差异可以忽略——现代JavaScript引擎对这类临时函数的垃圾回收效率很高。不过如果myFunc逻辑复杂，或者组件更新频率极高，写法二更优，能避免不必要的函数创建开销。

另外，如果myFunc需要依赖componentDidUpdate内部的变量（比如prevProps、prevState），写法一反而更直接，无需额外传参；要是用写法二，就得把这些变量作为参数传递给myFunc。

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