ReactJS先端フレームの基本原理と使用

35974 ワード
JavaScript React 先端開発
React学習ノート
Reactを開く
コンポーネント化プログラミング
コンポーネント化Component
ページの各部分は一つのコンポーネントでもいいです.
クラスのexport
stateの概念
stateまたはpropsが変更されたとき、renderは再実行される.
親コンポーネントのrenderが再実行されると、そのサブコンポーネントのrenderも再実行されます.
レスポンス式イベントバインディング
コンポーネントの送信値
単一データストリーム
PropType検証タイプ
Reactの仮想DOM
もし仮想DOMがないなら、自分で実現します.
  • state
    • があります.
  • JSXモデル
  • データ＋モジュラス結合により、リアルなDOM
    • が生成される.
  • stateが変更されました.->>第三のステップ->新しいDOMを生成して元のDOM
    • を交替します.
    欠陥:
  • は一回のstateを変えて完全なDOMツリーを生成し、効率が低い
    • .
    第二のやり方
  • state
    • があります.
  • JSXモデル
  • データ＋モジュラス結合により、リアルなDOM
    • が生成される.
  • stateが変更されました.->>第三歩->新たなDOMと元のDOMを生成してマッチングします.変化した部分を交替して、効率が向上しました.
    欠陥:このステップに対して、効率はまだ低いです.
    バーチャルDOMの作り方
  • state
    • があります.
  • JSXモデル
  • データ＋モジュラス結合により、リアルなDOM
    • が生成される.
  • は、仮想DOM(仮想DOMはJSオブジェクト)
    • を生成する.
    リアルDOM:
    
  <span>hello worldspan>
div>
 
  
      DOM ：
     
  
    [ ‘div’, {id:‘abc’}, [ ‘span’, {}, ‘hello world’ ] ]
     
  
       
   
    • state      ->       DOM ->       DOM，     ->      DOM    
      •  
  
     
  
      ：     DOM   ，       。
     
  
    diff  
     
  
           DOM     DOM     
     
  
       
   
    •   setState       setState，      
      •  
   
    •     ，    ，              
      •  
  
     
  
    react Ref   
     
  
    ref    lambda        DOM  
     
  
    react       
     
  
                             。
     
  
       
   
    • render         
      •  
   
    • componentWillMount                  
      •  
   
    • componentDidMount          ，         Ajax  ，                   
      •  
   
    • shouldComponentUpdate    （State，Props）      ，  
      •  
   
    • componentWillUpdate        ，  shouldComponentUpdate  true      。
      •  
   
    • componentDidUpdate             
      •  
   
    • componentWillReceiveProps               ，         render        ，    componentWillReceiveProps   
      •  
  
     
  
    React  Ajax  
     
  
    Axios   ajax  ， yarn add axios
     
  
    MockJs          
     
  
    React  CSS3    
     
  
    React  react-transition-group    
     
  
    Redux     
     
  
    redux = reducer + flux
     
  
                    
     
  
        ：
     
  
       
   
    • React Component       。
      •  
   
    • Action Creators     ，dispatch(action)
      •  
   
    • Store      。
      •  
   
    • Reducers        。
      •  
  
     
  
       Reducer，     
     
  
           store  state   store
     
  
    const defaultState = {
  inputValue: '',
  list: []
}
export default (state = defaultState, action) => {
  return state;
}

    またStoreを  します
    import { createStore } from 'redux'
import reducer from './reducer'
/**
 *  Reducer   store
 */
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

    importはreducerを  して、storeを   する に、しましょうreducerを れます.
    コンポーネントで にstoreの  を  します.
    store.subscribe(this.handleStoreChange);

    アクションタイプの  
    すべてのactionのtypeの を つのファイルに れて、  とメンテナンスに  です.
     しいファイルactionn-state.jsxを  します.
    export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_ITEM = 'add_item'
export const DELETE_ITEM = 'delete_item'

    アクションクリエーターの  action
      クラスのactionn-creatorを  します.
    import { DELETE_ITEM, CHANGE_INPUT_VALUE, ADD_ITEM } from './action-state';

export const deleteItemAction = (index) => ({
  type: DELETE_ITEM,
  index
});

export const changeInputAction = (value) => ({
  type: CHANGE_INPUT_VALUE,
  value
});

export const addItemAction = () => ({
  type: ADD_ITEM
});

    コンポーネントがactionを  したい  は、actionCreatorの  で  でき、メンテナンスに  ちます.
    ReactはUIコンポーネントとコンテナコンポーネントを  します.
    UIコンポーネント:バカコンポーネント、ラベルだけがレンダリング  コンポーネント:スマートコンポーネント、  ロジック
    TodoListはUIコンポーネントを き します.
    import React, { Component, Fragment } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';

export default class TodoListUI extends Component {
  render() {
    return (
      <Fragment>
        <div>
          <Input
            placeholder="todo info"
            style={{ width: '300px', marginRight: '10px' }}
            value={this.props.inputValue}
            onChange={this.props.handleInputChange}
          />
          <Button
            type="primary"
            onClick={this.props.handleBtnClick}
          >  </Button>
        </div>
        <List
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => (<List.Item onClick={() => { this.props.handleItemClick(index) }}>{item}</List.Item>)}
          style={{ width: '300px', marginRight: '10px' }}
        >
        </List>
      </Fragment>
    )
  }
}

     のコンポーネント:
    render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        list={this.state.list}
        handleInputChange={this.handleInputChange}
        handleBtnClick={this.handleBtnClick}
        handleItemClick={this.handleItemClick}
      />
    )
  }

    このようにしてUIと  ロジックを  させ、  の  に  する.
       コンポーネント
    stateはいらないです.propsがあればいいです. えば、 のTodoListUIは  できます.
    import React, { Component, Fragment } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
//      
const TodoListUI = (props) => {
  return (
    <Fragment>
      <div>
        <Input
          placeholder="todo info"
          style={{ width: '300px', marginRight: '10px' }}
          va lue={this.props.inputValue}
          onChange={this.props.handleInputChange}
        />
        <Button
          type="primary"
          onClick={this.props.handleBtnClick}
        >  </Button>
      </div>
      <List
        bordered
        dataSource={this.props.list}
        renderItem={(item, index) => (<List.Item onClick={() => { this.props.handleItemClick(index) }}>{item}</List.Item>)}
        style={{ width: '300px', marginRight: '10px' }}
      >
      </List>
    </Fragment>
  )
}
export default TodoListUI;

    reduxの    -Redux-thunk
    redux-thunkの    は、オブジェクトではなく、actionを  とすることができます.そしてdispatchというactionでは、   にこの  が  されます.
    したがって、コンポーネントの     、 えばAjaxがデータを  するなど、actionに れて  してもいいです.
    まずredux-thunk    を  して、storeを   するところにあります.
    import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
//  redux-thunk   
import thunk from 'redux-thunk';

/**
 *        store
 */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);
const store = createStore(
  reducer,
  enhancer
);
export default store;

    そして しく えます.まずaction creatorを いて、  としてのactionを します.
    /**
 * redux-thunk action       ，          
 */
export const getTodoList = () => {
  return () => {
    axios.get('/api/get/list').then((res) => {
      //console.log(res.data)
      const action = afterAjaxDataAction(res.data);
      store.dispatch(action);
    }).catch(e => (console.log(e)));
  }
}

    そしてコンポーネントの でこのcreatorを び します.
    componentDidMount = () => {
    const action = getTodoList();
    store.dispatch(action);
}

    component DidMountにはajaxを び すと かれていましたが、 はactionに れています.  プロジェクトではメンテナンスが  です.
    レdux-sagaミドルウェアの  
    レdux-sagaの    も     の  ツールである.
    まずredux-sagaを  します.
    import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
//  redux-saga
import createSagaMiddleware from 'redux-saga';
import todoSagas from './sagas';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

//saga   
const sagaMiddleware = createSagaMiddleware();
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));

/**
 *  reducer enhancer   store
 */
const store = createStore(
  reducer,
  enhancer
);
sagaMiddleware.run(todoSagas)
export default store;

      でsages.jsxを  して、generator  
    import { takeEvery, put } from 'redux-saga/effects';
import { GET_INIT_LIST } from './action-state'
import { afterAjaxDataAction } from './action-creator';
import axios from 'axios';
function* getInitList() {
  console.log('abc');
  try {
    const res = yield axios.get('/api/get/list');
    const action = afterAjaxDataAction(res.data);
    yield put(action);
  } catch (e) {
    console.log(e);
  }
}

/**
 * mySaga   takeEvery   GET_INIT_LIST，  store.dispatch  GET_INIT_LIST   action，     getINitList  。
 */
function* mySaga() {
  yield takeEvery(GET_INIT_LIST, getInitList);
}
export default mySaga;
    webpackはいつもキャリアとプラグインをまとめています.これを見ればいいです.