为何组件重渲染时内部函数会被重建？类组件场景答疑

首先要明确：你例子里的类组件写法，handleClick并不会在每次重渲染时新建函数对象。

类字段箭头函数的本质 #

你写的handleClick = () => {}属于ES6的类实例字段语法，它的创建时机是在组件实例化阶段（也就是new SimpleButton()的时候），一旦实例创建完成，这个函数就会被挂载到组件实例上，之后不管组件重渲染多少次，this.handleClick指向的都是同一个函数引用。

和函数组件的区别 #

你看到的“组件重渲染时内部所有函数都会被重建”，这个结论是针对函数组件的：函数组件每次渲染时，整个函数体都会重新执行，内部声明的自然都是新的函数对象，这也是useCallback存在的意义——通过依赖缓存函数引用，避免不必要的子组件重渲染。

为什么用类字段箭头函数？ #

这种写法的核心好处是自动绑定this：不用在constructor里手动this.handleClick = this.handleClick.bind(this)，也不用在render里写onClick={() => this.handleClick()}（后者反而会在每次render时创建新的箭头函数），既简洁又能保证函数引用稳定。

回到你的问题 #

当父组件setState导致SimpleButton重渲染时，React确实只调用实例的render方法，但handleClick并不会被重新创建——它从实例化开始就一直存在于组件实例上，render里只是复用了这个已有的函数引用。

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