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

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

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

PureInput以redux形式示例

1 个答案: