ReactJS修練の道(一)

一、関連学習資料
前の段階で見たものと見ている資料を置いて、初心者は勉強しながら実践します.

公式文書

公式入門教程

Reactライフサイクル

二、javascriptピット
これまでjavascriptを習ったことがありません.書いたのはいくつか書いたので、その坑に言及しても納得できます.
問題の説明:buttonにonClickを設定して行動をクリックする時、ボタンをクリックして対応関数を実行します.Googleです.stack-overflowで似たような問題を見つけました.英語はwhen I click the button、it don’t firedです.
多く言わないで、直接に正しいコードをつけます.

    deleteProgram: function(){
        alert("delete");
    },
    render: function(){
    var that = this;  //       
    return(
      <ul>
      {
        this.state.programs.map(function(bill,index) {
          return <li>
          <ChannelProgram start_time={bill["start_time"]} end_time={bill["end_time"]} title={bill["program"]["name"]}/>
          <button onClick={that.deleteProgram} value={index}>Deletebutton>  //       that
          li>;
        })
      }
      </ul>
    );
  }

5行目のコードに注意してください.(markdownはどうやってコード番号を追加しますか?教えてください.ここはネットが速くないので、とりあえずGoogleではなく、後で見つけたらまた共有します.12月9日に更新します.ブログを送ったら自動的にコード番号を付けます.)

var that = this;  //       

以下はエラーコードです.

    deleteProgram: function(){
        alert("delete");
    },
    render: function(){
    return(
      <ul>
      {
        this.state.programs.map(function(bill,index) {
          return <li>
          <ChannelProgram start_time={bill["start_time"]} end_time={bill["end_time"]} title={bill["program"]["name"]}/>
          <button onClick={this.deleteProgram} value={index}>Deletebutton>  //       this
          li>;
        })
      }
      </ul>
    );
  }

最近C++を書いている人にとって、上のコードは違和感がないですが、問題が来ました.

this.deleteProgram} value={index}>Delete</button>  //       this

このthisはいったい誰の文脈ですか?答え:現在のfunction内のです.上のコードはなぜボタンをクリックしても対応コードが起動されないのですか?現在の機能がないからです.私たちは外のdeleteProgram関数を見つけるという意味です.これはなぜこのコードを使う必要がありますか?

var that = this;  //       

新しい関数に入る前に、この行のコードを使って前のコンテキストを保存します.そうしないと、thisは現在のfunctionのthisに更新されます.

javascriptのthisは現在のfunction内のコンテキストです.

javascriptのthisは現在のfunction内のコンテキストです.

javascriptのthisは現在のfunction内のコンテキストです.

三、React複合部品の内容を更新するピット
夜にコードを書き終わって12月9日に更新します.やはり夜は時間がないので、今のうちに急いで書きます.
問題の説明:複合コンポーネントでは、親レベルのコンポーネントがリフレッシュされても、サブレベルのコンポーネントの値は更新されません.古い決まりです.多く言わないで、直接コードをつけます.
Chanel部分コード

render: function(){
    var that = this;
    return(
        <ul>
        {
          this.state.programs.map(function(bill,index) {
            return <li><ChannelProgram change={that.props.change} start_time={bill["start_time"]} end_time={bill["end_time"]} title={bill["program"]["name"]}/>li>;
          })
        }
        </ul>
    );
  }

ChnnelProgramコンポーネント内部コード

var ChannelProgram = React.createClass({
  getInitialState: function() {
    return {
      start_time: this.props.start_time,
      end_time: this.props.end_time,
      title: this.props.title
    }
  },
  componentWillReceiveProps: function(nextProps,nextState) {
    this.setState({
      start_time: nextProps.start_time,
      end_time: nextProps.end_time,
      title: nextProps.title
    });
  },
  render: function(){
    var start_time = this.state.start_time;
    var end_time = this.state.end_time;
    var title = this.state.title;
    return(
        <div>
          <input id="start_time" value={start_time} onChange={this.props.change}/>
          <input id="end_time" value={end_time} onChange={this.props.change}/>
          <input id="title" value={title} onChange={this.props.change}/>
        div>
      );
  }
});

上のChanelProgramの中の10行目からの関数に注意して、サブアセンブリを更新する鍵:

  componentWillReceiveProps: function(nextProps,nextState) {
    this.setState({
      start_time: nextProps.start_time,
      end_time: nextProps.end_time,
      title: nextProps.title
    });
  }

冒頭の資料「ライフサイクル」を見たら、すべての問題は問題ないです.だから、私のような初心者は先に文書を見てから手書きのコードを書くほうがいいです.でも、プロジェクトの進捗については、とりあえず今から勉強します.
componentWillceviePropsは、意味を理解すればいいです.コンポーネントは新しいpropsを受信するとトリガされます.すなわち、親レベルのコンポーネントrenderがサブアセンブリのpropsを更新したときにトリガされます.
はい、簡単そうです.私の考えと困ったところを話します.最初はこの関数を付けていませんでしたが、サブアセンブリの内容が更新されなくなりました.その後、サブアセンブリのget Initial State関数にロゴが出力され、親レベルのコンポーネントが何度更新されても、サブアセンブリのget Initial Stateは一回だけ実行されることがわかった.Reactのリフレッシュメカニズムは既存のコンポーネントを再利用して新しく作ったものではないということが分かりました.(新しいコンポーネントを作ると、get Initial Stateを更新するたびに呼び出されます.)最初からReactの原理から考えたら、回り道はできません.でも、回り道をすればするほど深くなるでしょう.頑張ってください.
四、その他
ここで言及したピットは全部Reactとjavascriptの問題ではなくて、全部自分が芸を学んで不精の致すところです.Reactとjavascriptのピットは自嘲しただけです.Reactとjavascriptを勉強していた時に登った穴と理解してください.これもこのブログの真意です.