reactjs - 为什么要在 render() 方法之外定义无状态函数？

Question

我正在阅读有关 redux 表单的文档并通过以下声明：

您必须在您的 render() 方法之外定义无状态函数，否则它将在每次渲染时重新创建，并且将强制 Field 重新渲染，因为它的组件属性会不同。

以下是代码示例：

// outside your render() method
const renderField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text"/>
      {field.meta.touched && field.meta.error &&
       <span className="error">{field.meta.error}</span>}
    </div>
  )

// inside your render() method
<Field name="myField" component={renderField}/>

我的问题是，为什么要在 render() 方法之外定义无状态函数？上面提到的原因是 Field 将被强制重新渲染，因为组件 prop 将在每次渲染时重新创建。但是由于 Field 是一个子组件，即使函数是在外部定义的，它也会被重新渲染。正确的？我是反应新手。请让我知道我的理解哪里出错了。谢谢！

标签： reactjsreduxreact-reduxredux-form