言語化する朧げな

Baby steps to Giant strides!

initialPropsとstate - React.js

Props in getInitialState Is an Anti-Pattern | React

getInitialState内でpropsを用いてstateを生成するやり方は、どのデータが本筋のデータかがわかりづらくなってしまう状況になってしまうことがあるので、注意して使ったほうがいい。

コメントフォームを例に考えてみる。

var CommentBox = React.createClass({
  getInitialState: function(){
    return {
      comment: this.props.comment
    }
  },
  handleChange: function(e) {
    this.setState({comment: e.target.value})
  },
  render: function() {
    return <div className='comment-box'>
      <textarea 
        onChange={this.handleChange}
        defaultValue={this.state.comment} />
    </div>
  }
})

上記のようなコードの場合、props.commentとstate.commentがあり、コードの複雑性が増してくると、どちらがどのケースで本筋のデータかがわかりづらくなってしまう可能性がある。

なので、下記のようにpropsは明示的に初期化用のデータということを表す名前にしたほうが良い。

var CommentBox = React.createClass({
  getInitialState: function(){
    return {
      comment: this.props.initialComment
    }
  },
  handleChange: function(e) {
    this.setState({comment: e.target.value})
  },
  render: function() {
    return <div className='comment-box'>
      <textarea 
        onChange={this.handleChange}
        defaultValue={this.state.comment} />
      <button onClick={this.handleUpdateClick}
    </div>
  }
})