react入門筆記

Index.js是程序的入口文件

PWA progressive web application
(registerServiceWorker)

App.test.js自動化測試

定義組件：
class App extends React.component

Label：擴大點擊區域

虛擬dom的生成

1.state數據
2.jsx模板
3.數據+模板 生成虛擬dom（虛擬dom就是一個js對象，用它來描述真實dom 損耗了性能）

[‘div’,{id:’abc’},[‘span’,{},’hello’]]

4.用虛擬dom的結構生成真實的dom 來顯示

<div id=‘abc><span>hello</span></div>

5.state發生變化
6.數據+模板 生成新的虛擬dom（極大提高了性能）
（數據更新）
7.比較原始虛擬dom和新的虛擬dom的區別 找到區別（極大提高了性能）
8.直接操做dom 改變span中的內容

優勢：
1.性能提高
2.使得跨端應用得以實現 react native

diff算法：

比對原始虛擬dom和新的虛擬dom之間的差別
提升了比對的性能
同層比對 key值

Ref

setState是一個異步函數，console.log先於執行
setState({…},()=>{

console.log(…)

})

生命週期函數



constructor組件建立的時候被調用 不屬於生命週期

componentWillMount：在組件即將被掛載到頁面的時刻自動執行
Render：頁面從新渲染
componentDidMount：組件被掛載到頁面以後，自動執行

updation：
shouldComponentUpdate：組件被更新以前，會自定被執行（return false不對組件進行更新）
接收兩個參數 nextProps nextState
componentWillUpdate：組件被更新以前，會被自動執行，在shouldComponentUpdate以後才執行（返回true才執行）

shouldComponentUpdate-》componentWillUpdate-》Render-》componentDidMount

componentWillReciveProps：當一個組件從父組件接收了參數 只要父組件的render函數被從新執行了 子組件的這個生命週期函數就會被執行（child）
若是這個組件第一次存在於父組件中，是不會被執行的
若是以前已經存在與父組件中，纔會被執行
componentWillUnmount：當這個組件即將被從頁面中剔除的時候，會被執行 （child）

ajax請求：

componentDidMount
若是放在render會形成死循環(render會被不斷觸發執行)

Redux



redux=reducer+flux


import store from './store/index'
this.setState(store.getState())

index

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default  store;

actionCreators

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELECT_TDO_ITEM} from './actionTypes'

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

export const getAddItemAction = (value)=>({
    type:ADD_TODO_ITEM
})
export const getDelectItemAction = (index)=>({
    type:DELECT_TDO_ITEM,
    index
})

actionTypes

export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM ='add_todo_item'
export const DELECT_TDO_ITEM='delect_todo_item'

reducer

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELECT_TDO_ITEM} from './actionTypes'
const defaultState = {
    inputValue:'',
    list:['zwt','wollen']
}//定義倉庫的默認數據

//reducer能夠接受state 可是絕對不能修改state

//reducer是春函數 ：給定固定的輸入 就必定有固定的輸出
//不能使用雷士date的操做

export default (state = defaultState,action)=>{
    if(action.type === CHANGE_INPUT_VALUE){
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState;
    }
    if(action.type === ADD_TODO_ITEM){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState;
    }
    if(action.type === DELECT_TDO_ITEM){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        return newState;
    }
    return state
}
//state:整個倉庫存儲的數據內容
//action: