node.js学習ノートのReact

8018 ワード
js。 react node
ReactはFacebookの内部プロジェクトから起源しており、同社は市場上のすべてのJavaScript MVCフレームに不満があるので、自分でセットを書くことにしてInstagramのウェブサイトを構築する.作ってみたら、このセットがよく使われていることが分かりました.2013年5月にオープンしました.Reactの設計思想は極めて独特で、革命的な革新に属しています.性能は抜群です.コードロジックはとても簡単です.したがって、多くの人が注目して使用するようになりました.これは将来のWeb開発の主流ツールかもしれないと考えています.
ReactJS公式サイトの住所:http://facebook.github.io/react/
Githubアドレス:https://github.com/facebook/react
Reactは、一つのコンポーネントは以下のような特徴を持つべきであると考えている.
(1)組み合わせ可能(Compseable):1つのコンポーネントは他のコンポーネントと一緒に使用しやすく、または他のコンポーネントの内部に入れ子されています.別のコンポーネントがコンポーネント内に作成された場合、親コンポーネントは、その作成されたサブコンポーネントを有し、この特性を通じて、複雑なUIを複数の簡単なUIコンポーネントに分割することができる.
(2)再利用可能(Reusable):各コンポーネントは独立した機能を有しており、複数のUIシーンで使用できる.
(3)メンテナンス可能(Maintainable):各小さいコンポーネントは自分の論理のみを含み、より理解され、維持されやすい;
私たちはhtmlファイルを新築して、react.jsとJSXTrans former.jsの二つのjsファイルを引用します.)テンプレートは以下の通りです.
<!DOCTYPE html><html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **    </script>
  </body></html>
scriptのtypeはtext/babelです.これはReact特有のJSX文法がJavaScriptと互換性がないからです.JSXを使うところには、type=「text/babel」をつけます.次に、上のコードは全部で三つの倉庫を使いました. react.js 、react-dom.js 和 Browser.js ,それらはまず読み込まなければなりません.そのうち、react.js Reactのコアライブラリで、react-dom.jsです. DOMに関する機能を提供する、Browser.jsです. の役割はJSX文法をJavaScript文法に変えることです.このステップは時間がかかります.実際にオンラインする時、サーバーに置いて完成するべきです.
次にreactを見てみます.どう書くべきですか?それとも伝統的な決まりです.ハローワークですか?
<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
  
    <div id="example"></div>
    
    <script type="text/babel">
    
      ReactDOM.render(<h1>hello word</h1>,document.getElementById('example'));
      
    </script>
  </body>
</html>
上記のbodyでは、divがあり、idはexampleであり、その後、reactのレンダリング器でh 1タグをdivにレンダリングする.
ReactDOM.render（DOM  ，       ）;
このコードは最もよく使われているもので、非常に必要な文です.この文の中には重要なところがあります.これはjsx文法の特徴で、jsx文法の中で、括弧を使って解析します.以下の例では、jsx文法の書き方を説明します.
 var list = ["word","man","boy"];
  ReactDOM.render(
          <div>
            {
              list.map(function (name){
              return <div> hello {name}</div>
               })
          }
          </div>,document.getElementById('example'));
</script>
最終的な結果は:
ハロー ワード
ハロー マン
ハロー boy
ここで説明したいのは、ReactDOM.renderレンダリング装置の最初のパラメータの中に、トップノードが一つしかないので、複数並べてはいけません.そうでなければ、エラーが発生します.JSXは直接テンプレートにJavaScript変数を挿入することができます.この変数が配列であると、この配列のすべてのメンバーが展開されます.
var list = [<h1>word</h1>,<h1>man</h1>,<h1>boy</h1>];
  ReactDOM.render(<div>{list}</div>,document.getElementById('example'));
</script>
最終結果は:
ワード
マン
boy
Reactはコードをコンポーネントにパッケージ化し、通常のHTMLタグを挿入するようにウェブページにこのコンポーネントを挿入することができます.React.create Class方法はコンポーネントクラスを生成するために使用されます.
var HelloWord = React.createClass({
    render:function(){
        return <p>hello {this.props.name}</p>
    }
});
 ReactDOM.render(<HelloWord name="   "/>,document.getElementById('example'));
最終結果は:
ハロー 猫ちゃん
上記の例では、React.creat Classでコンポーネントクラスのハローワードを作成しました.ここでは、コンポーネントの名前の頭文字は大文字でなければならないので、エラーが発生します.React.createClassはオブジェクトを受信し、オブジェクトにはレンダー属性が必要です.レンダー属性の値は一般的に関数として作成され、DOMオブジェクトに戻ります.このDOMオブジェクトはトップノードが一つしかないことを忘れないでください.そうでないとエラーが発生します.
上記のコードのreturnでは、このような一節が見られます.this.props.name、そしてReactDom.renderの中の最初のパラメータでは、タグに属性があるname="ニャンコ"があります.ここで覚えておくべき点はname="ニャンコ星人"は関数にパラメータを伝えるように見えます.
コンポーネントの属性を追加します.注意すべき点があります. クラス 属性は作成する必要があります クラスナメ ,for 属性は作成する必要があります httml For ,なぜなら クラス 和 for JavaScriptの保留文字です.
this.props オブジェクトの属性はコンポーネントの属性に対応していますが、例外があります. this.props.Children を選択します.コンポーネントのすべてのサブノードを表します.
var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        this.props.children.map(function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }});ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
    <p>main</p>
  </NotesList>,
  document.getElementById('example'));
最終運転結果:
  • ハロー
  • ワールド
    • 3.main
    2と3の間の改行は、pラベルが改行され、liタグも改行されるので、中間に空白行があります.
    コンポーネントはユーザーとの対話を避けられません.Reactの大きな革新は、コンポーネントを状態マシンと見なし、最初に初期状態があり、その後ユーザー間のインタラクションによって、状態が変化し、再レンダリングUIをトリガすることです.
    var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }});ReactDOM.render(
  <LikeButton />,
  document.getElementById('example'));
    最終結果:
    You haven't liked this.Click to togle.
    文字をクリックすると、次のようになります.
    You like this.Click to togle.
    そしてずっとクリックすると、2つの英語の間を行ったり来たりします.
    ここで注意したいのは、get Initial StateはReactデフォルトの属性であり、オブジェクトに戻る必要があります.NULLまたは他のものでもいいです.初期状態を表します.戻るオブジェクトの中には属性が一つだけあります.これらの状態を変更すると、reactから提供される方法this.setState(オブジェクト)が使用できます.ここでのオブジェクトは、初期状態のいずれかの属性だけを変更することができます.複数を同時に修正することもできます.いずれの状態が変化すると、reactはrender属性が指す関数を再起動し、すなわちコンポーネントを再レンダリングすることを意味する.
    コンポーネントのライフサイクルは三つの状態に分けられます.
    Mounting:実際のDOMを挿入しました.
    Updating:再レンダリングされています.
    Unmounting:実際のDOMに移動しました.
    Reactは状態ごとに二つの処理関数を提供しています.will 関数は状態に入る前に呼び出します.did 関数は状態に入った後に呼び出します.3つの状態の計5つの処理関数です.
    component WillMount()
    component DidMount()
    componentWillUpdate(object nextProps、object next State)
    component DidUpdate(object prevProps、object prevState)
    component WillUnmount()
    さらに,Reactは2つの特殊状態の処理関数を提供した.
    componentWillreceive Props:コンポーネントをロードして新しいパラメータを受信した時に呼び出します.
    shuldComponentUpdate:コンポーネントが再レンダリングするかどうかを判断する時に呼び出します.
    var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }});ReactDOM.render(
  <Hello name="world"/>,
  document.body);
    上のコードはハローコンポーネントにロードしてから、通過します. component DidMount メソッドは、100ミリ秒ごとにコンポーネントの透明度を再設定し、再レンダリングを開始するタイマーを設定します.ここで注意すべき点は、set Intervalの最初のパラメータであるタイマトリガ関数の後にbindを使用し、タイマ関数ではthisを直接使用してreactの状態や属性を取得することができず、thisを結合する必要がある.
    リボン:
    reactが提供する属性:
    get Initial State設定のデフォルト状態
    set State修正状態
    レンダーはコンポーネントに戻ります
    component WillMount()   実際のDOMを挿入する前に呼び出します.
    component DidMount()   真実のDOMを挿入して呼び出します.
    componentWillUpdate(object nextProps、object next State)を再レンダリングする前に呼び出します.
    component DidUpdate(object prevProps、object prevState)を再レンダリングして呼び出します.
    componentWillUnmount()を実際のDOMに移動する前に呼び出します.
    propTypes コンポーネントのインスタンスの属性が要求に合っているかどうかを検証します.
    get DefaultPropsは、コンポーネント属性のデフォルト値を設定します.
    最後の二つの属性はここで紹介されていません.詳しくは参照してください.http://www.ruanyifeng.com/blog/2015/03/react.html
    ツリー