0

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

1 に答える 1