redux - Redux 形式的 PureInput 示例

Question

在Deep Form 示例中，作者添加了一个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

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

您的结论是正确的，PureInput该示例中的组件几乎完全没用。