React ES6类组件转函数式组件：私有方法如何处理？

一、内部函数每次重渲染重建的性能问题与优化 #

首先明确：绝大多数业务场景下，函数每次重渲染重建不会带来明显性能问题。React重渲染的开销主要在于DOM更新，而函数创建的成本极低，只有当组件是高频重渲染（比如每秒几十次的动画更新），或者函数本身包含大量复杂逻辑时，才需要针对性优化。

常见的优化方式有以下几种：

• 用useCallback缓存函数引用
  如果这个函数需要作为props传递给子组件，或者依赖特定的状态/属性，useCallback可以保证只有当依赖项变化时，函数才会重新创建，避免子组件因函数引用变化触发不必要的重渲染。示例：

import { useCallback, useState } from 'react';

function Game() {
  const [foo, setFoo] = useState(false);

  const handleClick = useCallback((i) => {
    if (foo) {
      // 业务逻辑
    }
  }, [foo]); // 依赖数组：foo变化时才重新生成函数

  return <button onClick={() => handleClick(1)}>点击</button>;
}

注意：依赖数组必须准确填写，否则会出现捕获旧状态的闭包问题。

• 将无依赖的函数移到组件外部
  如果函数逻辑完全不依赖组件内部的state、props，直接把它放到组件外面，这样就不会随组件重渲染反复创建。示例：

// 组件外部定义，不依赖内部状态
function handleClick(i) {
  console.log('点击了第', i, '个元素');
}

function Game() {
  return <button onClick={() => handleClick(1)}>点击</button>;
}

• 用useMemo处理复杂计算逻辑
  如果函数内部包含大量耗时计算，可以用useMemo缓存计算结果（针对数据而非函数本身），减少重复计算的开销。

二、箭头函数 vs 普通嵌套函数：不止是风格差异 #

两种写法确实有风格差异，但也存在一些实际的区别：

• this绑定的历史遗留问题
  在类组件中，普通方法需要手动绑定this（比如构造器里this.handleClick = this.handleClick.bind(this)），否则会出现this指向错误。而函数式组件没有this，所以箭头函数和普通函数在这一点上没有区别，但很多开发者从类组件转过来后，习惯用箭头函数避免this相关的坑。

• 函数提升的差异
  普通函数声明会被提升，所以可以在定义之前调用；箭头函数是变量赋值，必须先定义再使用。比如：

function Game() {
  // 正常工作：普通函数被提升
  handleClick(1);

  function handleClick(i) { /* ... */ }

  // 报错：Cannot access 'handleClickArrow' before initialization
  handleClickArrow(1);

  const handleClickArrow = (i) => { /* ... */ }
}

• 语法简洁性
  箭头函数在单语句场景下可以省略大括号和return，写法更紧凑，比如：const handleClick = (i) => foo && doSomething(i)。而普通函数声明在多语句场景下可读性更好。

• 函数式编程风格适配
  箭头函数的赋值写法更符合函数式编程中“函数作为值”的思路，也更容易和useCallback、useMemo等Hook配合使用（当然普通函数也可以，只是写法不同）。

总结：如果没有特殊需求，两种写法都可以，优先遵循团队的代码规范。如果需要避免变量提升的问题，或者更习惯紧凑的写法，箭头函数更合适；如果需要在定义前调用函数，普通函数声明更方便。

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