React中renderLine函数置于类外的原因及设计模式意图咨询

先看这段代码：

const renderLine = (user, key) => <li key={key}><b>{key}</b>: {user[key]}</li>
export default class App extends Component {
  ...
  render () {
    return (
      <div className='App'>
        {Object.keys(user).map(key => renderLine(user, key))}
      </div>
    )
  }
}

我有个疑问：为什么renderLine函数被放在App类外部？这种写法的设计意图是什么？我平时习惯把这类函数放在类内部，通过this.renderLine()来调用。

其实这种写法完全是基于当前函数的特性和代码组织的考量，主要有这几个原因：

• 纯函数特性，复用性更强：renderLine是个标准的纯函数——它的输出只由传入的user和key决定，完全不依赖App类的任何内部状态、属性或者方法。把它放在类外部，意味着它可以脱离App组件独立存在，以后其他组件如果需要类似的渲染逻辑，直接导入这个函数就能用，不用在每个组件里重复写一遍。

• 简化类结构，提升可读性：组件类本身应该专注于核心逻辑，比如状态管理、生命周期处理、事件响应这些。把这类纯渲染的辅助函数抽出去，能让App类的代码更清爽，别人看代码的时候能快速抓住组件的核心功能，不用在一堆辅助函数里找主线。

• 避免this绑定的麻烦：如果把函数放在类内部，你得处理this指向的问题——要么在构造函数里手动绑定this.renderLine = this.renderLine.bind(this)，要么用箭头函数定义类方法。放在外部就完全没这个困扰，直接调用就行，省掉了额外的绑定代码。

• 测试更便捷：纯函数的测试简直不要太简单——你不需要实例化App组件，也不需要模拟组件的props和state，只需要给renderLine传不同的user和key，就能直接验证它的输出是否符合预期，测试用例写起来轻松很多。

当然，这也不是绝对的规则：如果以后renderLine需要用到App类内部的状态或者方法，比如要根据组件的某个状态来调整渲染样式，那把它移到类内部就更合适。现在的写法只是针对当前无依赖场景的最优解而已。

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