React无状态函数为何不建议包含内部函数？

好问题！虽然你贴的这段代码确实能正常运行，但业内不推荐这种写法主要有几个核心原因，咱们一个个掰扯清楚：

• 不必要的性能损耗：每次组件触发渲染时，内部的bar函数都会被重新创建一个新的实例。如果这个组件是在频繁更新的场景里（比如列表项、或者父组件经常刷新），这些重复创建的函数会额外消耗内存。更糟的是，如果后续你把这个函数作为props传给子组件，React会因为函数引用每次都变，判定props更新，从而触发子组件不必要的重渲染，这对性能的影响会被放大。

• 可读性与可维护性下降：把函数塞在组件渲染逻辑内部，会让组件的核心代码变得臃肿杂乱。当组件复杂度提升后，一堆内部函数堆在里面，其他开发者（甚至未来的你）读代码时，得来回跳转才能理清主渲染逻辑和辅助函数的关系。而且这些内部函数也没法被其他组件复用，完全浪费了复用的可能。

• 偏离函数组件的设计初心：早期的无状态函数组件（现在的函数组件虽然支持Hooks了，但纯展示逻辑依然是核心场景之一）本来就是为了做轻量、纯展示的组件。把非必要的内部函数放在渲染函数里，会让组件的“纯度”降低，逻辑耦合在一起，不利于后续的扩展和维护。

优化方案 #

如果这个函数不需要依赖组件内部的props或state，直接把它提到组件外面即可：

const bar = () => {
  return <span>lorem ipsum</span>;
};

const Foo = () => {
  return <div>{bar()}</div>;
};

如果函数需要用到组件内部的变量（比如props、state），可以用useCallback来缓存函数实例，只有当依赖的变量变化时才重新创建：

import { useCallback } from 'react';

const Foo = ({ someProp }) => {
  const bar = useCallback(() => {
    return <span>{someProp}</span>;
  }, [someProp]); // 依赖数组，仅当someProp变化时才重新生成函数

  return <div>{bar()}</div>;
};

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