React知識整理

2637 ワード

javascript

Reactはどんな問題を解決しましたか?
まず、Reactは1ページの応用時期に現れるフレームワークで、1ページのアプリケーションを開発するのに適しています.それに伴ってセットになっている構築ツールwebpack、node環境です.
従来のUI操作は、多すぎるDOMのAPIの詳細に注目している.Reactは、DOMのAPI実現の詳細にあまり関心を持たなくてもいいです.ReactはDOMに対してより高いレベルの抽象を行いました.React要素を使って、私達のページを説明して、細部のレンダリングはReactに任せます.私たちはReactにだけ教えてください.どのようなコンポーネントを書いていますか?ラベルは何ですか?
私達にページを開発させて、コンポーネント化の思想が開発に行くので、HTML、CSS、JSは一体になります.たとえば、ラベルを作成して、スタイルとイベントをあげます.

  let div = document.createElement('div')
  div.style.color = "red"
  div.innerHTML = "HTML  "
  div.onclick = function() {
    //           
  }

  class App extends Component {

     makeAction = () => {
     // div      
     }
     
     render() {
         return  React  
     }
  }

Reactは何ですか?ReactはUIライブラリです.ページのラベルがどう表示されるかを説明してくれます.Reactはコンポーネント化してラベルを書きます.すべてのページを一つのブロックに分割できます.
Reactの出現によって、フロントエンドの開発者がDOMのAPIの詳細にあまり関心を持たなくてもいいです.私たちは声明式のReactを使ってほしいラベルを書き込むだけで、Reactはそれをレンダリングしてくれます.
もしReactプロジェクトを作ったら?まず公式サイトに行きます.Nodeの環境が必要で、Gitの環境が必要です.すべて公式サイトでダウンロードできます.
第一歩:npx creat-react-ap命令を使ってReactプロジェクトを作成します.私はJSX文法を使ってReact.create Element、ReactDOM.render、React.comを知っています.二つのAPIだけで私たちが書いたラベルを表示できます.
JSXは文法飴だけです.javaScriptファイルのReact.create Elementに変換できます.
だから、React.creat Element、ReactDOM.renderの使い方は知っています.


React.createElement(eleType, attribute, text)
ReactDOM.render(fn, string, class, node)

React.create Element(type)は、固定された要素を作成して返します.React.render()メソッドは、2つのパラメータを導入し、最初のオブジェクトは、2番目のルートノードReact.Componentグループブロック化方式の開発ページの中のrenderメソッドthis.set Stateは、状態コンポーネントに合わせて、DOM全体を更新しますか?コンポーネント着信パラメータは全部propsにあります.

    
    
    function App(props){
        return {props.name}
    }
    
    class App extends React.Component {
        render() {
            return {this.props.name}
        }
    }

JSX文法はJavaScript文法糖で、本質的な動態はReactコンポーネントを創建して、React.create Elementの新しい一層のパッケージです.

const menu = {Item: function(){return   } }

//JSX  
ReactDOM.render()
//JavaScript    
ReactDOM.render(React.createElement(menu.Item))

JSX文法の本質と使用
コンポーネントのライフサイクルと方法
コンポーネント通信
React通信は、一方的なデータ転送でもある.コンポーネントのpropsは、内部コンポーネントに伝達され、内部コンポーネントは内部コンポーネントに伝達される.ContectのAPIを使って、層を跨ぐコンポーネントの通信を行って、とても煩わしくて、ルートのコンポーネントで使用して、しかしその他の深い層の入れ子のコンポーネント、すべて導入しなければならなくて、だからこのContectは単独で1つのモジュールになることに適して、その他のコンポーネントに引用されて、複雑さを下げます.
Reactは何の問題を解決していませんか?
大型プロジェクトをどう構築するかは解決されておらず、大型プロジェクトのデータ状態をどう管理するかは解決されていません.

BOMの話をします.