ディレクトリ

序文

フロントを学ぶために準備ができました。
[6月]反動が記事から、私は知っていた系统性学习言葉を。
彼はかなり右であると述べました。体系的な学習は、非常に困難です。
統合テクノロジー企業で仕事をしている人として、私は体系的な学習技術に興味を持つようになりました。
彼は正面から始まりました。
まず、学習の方法論を確立しました。
私のアプローチは次のとおりです。系統的な研究は、有限個の点に分割され、各点は、理解ラベル、優先順位付け、配布を手配します。最後に値アプリケーションを生成します。

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {date:new Date()};
  }

  componentDidMount(){
    this.timerID = setInterval(() => this.tick(),1000);
  }

  componentWillUnmount(){
    clearInterval(this.timerID);
  }

  tick(){
    this.setState({date:new Date()});
  }

  render(){
    return(
      <div>
        <h1>Hello,world!</h1>
        <h2>现在是{this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

  ReactDOM.render(
    <Clock />,
    document.getElementById('example')
  );
}

これは新人のチュートリアルです商品コード。

最初の質問：React.Componentそれは何を意味するのでしょうか？

フロントエンドのフレームの中で反応し、そこにある组件概念。
これは、组件2つの形式で定義することができます类(class)と函数。

二つの形式があるので、それである使用するとき、そして、どのように決めますか？
これは、[問題]として確認することができます。
まず、クラスコンポーネントは、現在、より多くの機能を提供しています、ということは確かです。

コンポーネントクラスが定義されている場合、上記のコードは次の部分です。

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {date:new Date()};
  }

ここではextends英語の翻訳である延伸にも拡張することができる意味の继承平均は。
最初の文は、クラスの時計を持っていると言われて、それはから継承されますReact.Component。
言い換えれば、時計はあるReact.Componentサブクラス。

ここではコンポーネントアセンブリの意味があります。
React.Componentは、すべてのコンポーネントクラスの外観の父のようです。
それはnewbest、すべてのコンポーネントクラスの父です。
コンポーネントReactBaseClasses.jsソースコード。

上記のコードは作成することであるClock组件Aを。

2番目の質問：DOMとは何ですか？

DOMは、あるdocument object model略語。
ドキュメントオブジェクトモデルことを意味します。
インターフェース（API）、同様の方法を動作させる方法である意図、。
例えば、HTML DOMそれは、HTMLドキュメントにアクセスして操作するための標準的な方法です。
しかし、一般的な表現で、DOMも頻繁に意味を参照するために使用される1つを有します。
それはありますDOM就是文档。

[In]は最初の質問は、作成している私たちが反応の構成要素です。
コンポーネントは、クラスは、オブジェクトが、それゆえ、それはアセンブリの一例です。

DOMに挿入されたときにコンポーネントのインスタンスが作成されている場合。
この文は、私は、マニュアルを参照して、DOMを理解することができます。

3番目の質問：コンポーネントのライフサイクルとは何ですか？

コンポーネントのライフサイクルは、いくつかある挂载段階：更新、卸载、错误处理、。
たびのコンポーネントが含まれています生命周期方法。

注：太字、ライフサイクル・アプローチの一般的な構成要素です。大胆ではない、一般的に使用されていません。

1.マウント

コンポーネントのインスタンスが作成され、DOMに挿入されたとき、このプロセスが呼び出されたときにマウント。
次のように部品を実装するためのライフサイクル・アプローチへの呼び出しは、次のとおりです。

コンストラクタ（） //コンストラクタは、英語の意味のコンストラクタです。
静的getDerivedStateFromProps（）//英語での導出は....から入手可能です小道具から派生ステータス（状態）を取得します。
render（）を //英語の意味でのレンダリング、それは平均値であることを作ることを提案提供することを目的とします。
compenentDidMount（） //マウント英語の意味は、意味が高さに...インストールされています。マウントに翻訳。

私は順序が搭載されていると思います构造 - 获取派生状态 - 提供 - 安装。

2.アップデート

小道具や状態アセンブリが変更された場合、それが更新をトリガします。

小道具は属性でありますか？状態は状態ですか？

更新されたコンポーネントは次の順序でメソッド呼び出しをSilverlightページ

静的getDerivedStateFromPropsは（）//状態から派生小道具を取得します
かどうかshouldComponentUpdate（）//コンポーネントが更新されるべきかを決定します
render（）を提供する//
getSnapshotBeforeUpdateスナップショット（スナップショット）（）//前のコンポーネントのアップデート
componentDidUpdate（） //更新組立の実施例

3.アンインストール

アセンブリは、次のメソッドを呼び出しますDOMから削除された場合：

componentWillUnmount（） //コンポーネントがアンインストールされます

4.エラー処理

コンストラクタは、プロセス、ライフサイクルのレンダリング、またはサブアセンブリのエラーをスローすると、それは次のメソッドを呼び出します。

静的getDerivedStateFromError（）//は状態の誤差に由来します。
componentDidCatch（）//コンポーネント実行キャッチ例外

ここで、私は基本的に読み取る：[概要]コードcomponentDidMount（）とcomponentWillUnmount（）
これら2つの関数はライフサイクルアプローチであり、一方が装着され、一方がアンロードされます。
これらの2つの方法は、ライフサイクル[フック]と呼ばれています。
コンストラクタ（）とレンダリングは（）もライフサイクル・アプローチです。
しかし、コンテンツ内のコードは、私はかなり理解していません。

概要

私の問題を作成するには、明確な境界を持っています。私は、最初のレコードの3つの質問の記事に決めました。
メインは、役割[はじめに]コードいくつかの機能を理解することです。
コードのこの作品は、完全に、それはまだ達していない、理解されています。

学習記録を反応させる-1-コンポーネントのライフサイクルを

序文