ディープ フォームの例では、作成者が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