reactとvueの比較
同じ

reactとvueはすべてコンポーネント化の思想があってすべて仮想DOM

があります

reactおよびvueは、コンポーネント化ビュー応答型データ概念

を提供する.

reactとvueの両方にコアレンダリングコンポーネントがあるAPI(Vue.component/React.createClass)は、ルーティングの概念が同じルーティングメカニズムで完全に対応するコンポーネントのライフサイクルがそれぞれ成熟した生態圏

を持っている.
異なる

react javascript xmlによってコンポーネントvueを記述templateテンプレートによってコンポーネント

をネストする

vue reactよりもレンダリング速度が速いreact比較vue比較的複雑なフレームワークreactビジネスロジックスーパー変態のプロジェクト

に適用

データ転送方式が異なるライフサイクルが異なるレンダリングテンプレートが異なる{react}{{vue}

特長

コンポーネント名の頭文字は、どのコンポーネントも1つの最上位ラベル

しか大文字でなければなりません.

renderコンポーネントライフサイクルフック関数仮想DOMをJSメモリから読み出し、リアルDOM

にレンダリングするのを待つ

ライフサイクルフェーズmount(ロード)update(更新)unmount(破棄)

カスタム関数handleClick onClick={this.handleClick}

データ伝達キャリアコンポーネント通信props(属性)state(状態)

jsx構文規則
HTMLタグ(<で始まる)に出会ったら、HTMLルールで解析します.コードブロック({で始まる)に遭遇したらJavaScriptルールで解析する
react書式

classに基づくがreactはclass

の代わりにclassNameを必要とする

インラインスタイルに基づくstyle style={obj}アルパカの名前に従ってstyle={backgroundColor:"red",fontSize:20}lineHeight:'20 px'はユニット

を持たなければならない

グローバル変数外部スタイルプロトタイプチェーンマウント

state状態reactコンポーネントデータインタラクションのベクター状態を修正するために使用される

stateコンポーネント外部で定義できないコンポーネント外部で変更できないコンポーネント内部で定義宣言できる内部でのみ変更できる

.

state修正用this.state取得state,this.setState()はstate

を修正する

stateコンポーネント内部のgetInitialStateで定義stateを初期化するには、オブジェクト

を返す必要があります.

state setStateこの方法はstateがコンポーネント内部のrenderメソッドを再実行することを修正し、ページの二次レンダリング仮想DOMがreactのdiffアルゴリズムに基づいて新しい仮想DOMの最後のロットの更新

をトリガする.
親コンポーネントのサブコンポーネントの変更方法

親コンポーネントコンポーネントコンポーネントは、サブコンポーネントのpropsとともにコンポーネントのstateをサブコンポーネント

に渡す.

親コンポーネント変更stateは、変更されたpropsを2回renderサブコンポーネントに受信し、サブコンポーネント変更

を実現する.
ref this.refsオブジェクト取得

refは、DOM要素がこの真のDOM要素を指す

に作用する.

refは、コンポーネントがこのコンポーネントオブジェクトを指す

に作用する.
React基本構文

import React from 'react'    //  React

class App extends React.Component{    //        React.Component
    constructor (props){    //             
       super(props)
       this.state = {
        solders:['a ','b','c']   
     }
    }
    render(){
        return 
hello {this.props.world} 
    }
}  

function com(){
    return 
       

}

//    this.setState()
add(){
    this.setState({ solders:[...this.state.solders,'d']});   //      
}
   //   add   this       ，  setState     
           this.add = this.add.bind(this);

Reduxのデフォルトでは同期のみが処理されます.非同期タスクにはreact-thunkが必要です.

  redux 
npm install redux --save

import  { createStore } from 'redux'           store
import { counter,addGUN,removeGUN } from './index.redux.js'   //      reducer action

let store = createStore(counter);   //  store
 
function render(){     //    store， addGUN，removeGUN，   ，      addGUN  store
    ReactDOM.render(,document.getElementById('root') )
}
render();
store.subscribe(render);   //  ，    store（  ）     ，  render()
//     store.dispatch(addGUN( ))

----------------------------------   redux-thunk
npm install redux-thunk --save
   redux        
import { createStore , applyMiddleware } from './index.redux'
   thunk 
import thunk from 'redux-thunk'

    ：   store ，   applyMiddleware ( thunk )
const store = createStore(counter, applyMiddleware( thunk ) ); 
   ，      
export     function    addGunAsync(){
    return function(dispatch){      //      ,    addGUN
        setTimeout(()=>{
            dispatch(addGUN());
        },2000)
    }
}

redux devtools開発者ツールの導入(拡張プログラム)

//     compose
import {createStore , applyMiddleware , compose} from 'redux' 

const reduxDevtools = window.devToolsExtension? window.devToolsExtension() :f=>f
//     window.devToolsExtension 

const store = createStore(counter,compose(
    applyMiddleware(thunk),
    reduxDevtools
))   //  store    reduxDevtools

react-redux優雅な結合reactとredux()

   ：  react-redux
npm install react-redux --save
   ：  react-redux 
    import { Provider } from 'react-redux'  //  Provider
   ：  Provider Connect    store.subscribe
     ①Provider        ，  store
       ReactDOM.render(
        // store  Provider， Provider   App   ，
              //        (addGUN() )
    
    ,document.getElementById('root') )
     ②Connect              ，Connect            
     app.js  Connect
    import { Connect } from 'react-redux'
    import { addGUN,removeGUN} from './index.redux.js'

    const mapStateProps(state){    
          return {num:state}
    }
    const actionCreators = { addGUN, removeGUN }    App  action
    App = connect( mapStatetoProps , actionCreators )(App)     // App   ，    App
    connect       ：             props  
                           。  props  ，  dispatch