redux 表单示例中的 PureInput

Question

在 Deep Form example 中，作者添加了一个 PureInput 组件。在创建一个我打算以多种形式使用的组件时，我跟随并使用了 PureInput:

render() {
    const { emailList } = this.props
    return (
        <div>
          <label>Enter Email Addresses</label>
            <PureInput type="text" placeholder="user@domain.com" field={emailList} />
        </div>
    );
  }
}

但是，我将控件切换到普通文本框，一切继续正常工作：

<input type="text" placeholder="user@domain.com" {...emailList} />

为什么作者会在他的例子中使用这个习惯 PureInput？

class PureInput extends Component {
  shouldComponentUpdate(nextProps) {
    return this.props.field !== nextProps.field
  }

  render() {
    const { field, ...rest } = this.props
    return <input {...field} {...rest}/>
  }
}

PureInput.propTypes = {
  field: PropTypes.object.isRequired
}

export default PureInput

Answer 1

嗯，作为作者，我可以告诉你。基本上，我一直在努力提高该表单的性能，并尝试了不同的技术，其中 none 是成功的，因为性能问题是 redux-form v5 设计中固有的，它这就是为什么 v6 从头开始编写以使用更好的体系结构的原因。

你的结论是正确的，那个例子中的 PureInput 组件几乎完全没用。

redux 表单示例中的 PureInput

PureInput in redux form example

redux

redux-form