React.jsのpropsの必要性について

Question

React.jsを勉強しています。一つ気になるところがあったので、質問させていただきました。

変数を使用しないで、this.props.hogehogeという風に親のコンポーネントからプロパティを引き継いで使用するのはなぜでしょうか？コンポーネント外で宣言した変数ではダメなのでしょうか？

Answer 1

propsを使わずに外部のグローバル変数を参照することは可能です。しかしそれでは、書き換え困難になったり、再利用ができなく、とても不便なコンポーネントができがあってしまいます。次のような例を考えてみましょう。(例ではECMAScript 2015 + JSXを使っています。Babel等で変換して試して見てください。)

let x = 42;

class Answer extends React.Component {
  render() {
    let str = "答えは" + x + "だ。";
    return (
      <p>
        {str}
      </p>
    );
  }
}

class UltimateQuestion  extends React.Component {
  render() {
    return (
      <div>
        <h3>生命、宇宙、全ての究極なる問い</h3>
        <Answer />
      </div>
    );
  }
}

ReactDOM.render(
  <UltimateQuestion />,
  document.getElementById("deep-thought")
);

/*
このコードは次のように表示されます
  生命、宇宙、全ての究極なる問い
  答えは42だ。
*/

さて、(ディープ・ソートが出した)答えは42でした。しかし、後から(13進数を使っていたという)致命的な間違いに気付きました。本当の答えは54になるはずでした。そこで、前の文はそのままで間違いを正すことにしましょう。

let x = 42;

class Answer extends React.Component {
  render() {
    let str = "答えは" + x + "だ。";
    return (
      <p>
        {str}
      </p>
    );
  }
}

class UltimateQuestion  extends React.Component {
  render() {
    return (
      <div>
        <h3>生命、宇宙、全ての究極なる問い</h3>
        <Answer />
        <p><em>というのは間違いで{x = 54,''}</em></p>
        <Answer />
      </div>
    );
  }
}

ReactDOM.render(
  <UltimateQuestion />,
  document.getElementById("deep-thought")
);

/*
このコードは次のように表示されます
  生命、宇宙、全ての究極なる問い
  答えは54だ。
  というのは間違いで
  答えは54だ。
*/

どちらも54になってしまいました。答えの仕方は決まっているのでAnswerを再利用したのがまずかったのでしょうか？それではAnswer2と別に作れば良かったのでしょうか？いや、そんなことをしたら、例えば、もし、英語版を作ろうとしたとき、AnswerとAnswer2両方を変更する必要が出てきます。2個ぐらいならいいですけど、3個、4個、5個と増えていったら大変です！

では、どうしたらよかったのか。そう、propsとして渡す形にしておけば別々の答えを渡すだけで良かったのです。

class Answer extends React.Component {
  render() {
    let str = "答えは" + this.props.x + "だ。";
    return (
      <p>
        {str}
      </p>
    );
  }
}

class UltimateQuestion  extends React.Component {
  render() {
    return (
      <div>
        <h3>生命、宇宙、全ての究極なる問い</h3>
        <Answer x={42}/>
        <p><em>というのは間違いで</em></p>
        <Answer x={54}/>
      </div>
    );
  }
}

ReactDOM.render(
  <UltimateQuestion />,
  document.getElementById("deep-thought")
);

/*
このコードは次のように表示されます
  生命、宇宙、全ての究極なる問い
  答えは42だ。
  というのは間違いで
  答えは54だ。
*/

できました。真の正しい6×9の答えである54にちゃんと訂正できました。

今回は単純な構成なのでそれほど便利じゃなさそうに見えますが、これがもっと複雑で巨大で色んな所で使われているコンポーネントだったらどうでしょう？このコンポーネントを使う場合はxの値を設定しておくなんて、非現実的だと想像つきませんか？設定し忘れていたら、表示はされないし、かといって設定したら、どこでどうコンポーネントが使われていて影響があるかわかりません。でも、propsであれば、プロパティとして渡した値しか影響は受けませんので、それぞれ独立に、安心して使うことができます。だからこそpropsを使うべきであり、プロパティとして渡している値(オブジェクト)以外から影響が絶対に無いようにコンポーネントを作るべきなのです。

Answer 2

差分レンダリングを行うために，propsで管理する必要があります．

React.js内のjsxで表示するような情報以外は，Reactのコンポーネント外で管理してしまっても構いません．
殆どの場合，jsxで表示するようなデータは変更されることを想定しているので，そういうときは propsでデータを管理し，変更を監視する必要があります．

let hoge = '';

let ParentComponent = React.createClass({
  componentDidMount() {
    setInterval(() => {
       hoge = Math.random().toString();
    },100)
  },

  render() {
    return (
       <div>
          <ComponentA data={hoge} />
          <ComponentB />
       </div>
    );
  }
});

let ComponentA = React.createClass({
  render() {
    <div>
      {this.props.data}
    </div>
  }
});

setInterval(() => {
   data = Math.random().toString();
},100);

// Reactは props, state 以外でのデータの変更を察知できない．
// この実装だと表示が更新されない
// こういったデータは，props or state で管理されるべき．
let ComponentB = React.createClass({
  render() {
    <div>
      {data}  
    </div>
  }
});