react入門筆記

Hanks10100 發(fā)布于2019-08-26 12:23 / 2537人閱讀

摘要：是程序的入口文件自動(dòng)化測(cè)試定義組件擴(kuò)大點(diǎn)擊區(qū)域虛擬的生成數(shù)據(jù)模板數(shù)據(jù)模板生成虛擬虛擬就是一個(gè)對(duì)象，用它來(lái)描述真實(shí)損耗了性能用虛擬的結(jié)構(gòu)生成真實(shí)的來(lái)顯示發(fā)生變化數(shù)據(jù)模板生成新的虛擬極大提升了性能數(shù)據(jù)更新比較原始虛擬和新的虛擬的區(qū)別找到區(qū)別極大

Index.js是程序的入口文件

PWA progressive web application
(registerServiceWorker)

App.test.js自動(dòng)化測(cè)試

定義組件：
class App extends React.component

Label：擴(kuò)大點(diǎn)擊區(qū)域

虛擬dom的生成

1.state數(shù)據(jù)
2.jsx模板
3.數(shù)據(jù)+模板生成虛擬dom（虛擬dom就是一個(gè)js對(duì)象，用它來(lái)描述真實(shí)dom 損耗了性能）

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

4.用虛擬dom的結(jié)構(gòu)生成真實(shí)的dom 來(lái)顯示

hello

5.state發(fā)生變化
6.數(shù)據(jù)+模板生成新的虛擬dom（極大提升了性能）
（數(shù)據(jù)更新）
7.比較原始虛擬dom和新的虛擬dom的區(qū)別找到區(qū)別（極大提升了性能）
8.直接操作dom 改變span中的內(nèi)容

優(yōu)點(diǎn)：
1.性能提升
2.使得跨端應(yīng)用得以實(shí)現(xiàn) react native

diff算法：

比對(duì)原始虛擬dom和新的虛擬dom之間的差異
提高了比對(duì)的性能
同層比對(duì) key值

Ref

setState是一個(gè)異步函數(shù)，console.log先于執(zhí)行
setState({…},()=>{

console.log(…)

})

生命周期函數(shù)

?

constructor組件創(chuàng)建的時(shí)候被調(diào)用不屬于生命周期

componentWillMount：在組件即將被掛載到頁(yè)面的時(shí)刻自動(dòng)執(zhí)行
Render：頁(yè)面重新渲染
componentDidMount：組件被掛載到頁(yè)面之后，自動(dòng)執(zhí)行

updation：
shouldComponentUpdate：組件被更新之前，會(huì)自定被執(zhí)行（return false不對(duì)組件進(jìn)行更新）
接收兩個(gè)參數(shù) nextProps nextState
componentWillUpdate：組件被更新之前，會(huì)被自動(dòng)執(zhí)行，在shouldComponentUpdate之后才執(zhí)行（返回true才執(zhí)行）

shouldComponentUpdate-》componentWillUpdate-》Render-》componentDidMount

componentWillReciveProps：當(dāng)一個(gè)組件從父組件接收了參數(shù) 只要父組件的render函數(shù)被重新執(zhí)行了子組件的這個(gè)生命周期函數(shù)就會(huì)被執(zhí)行（child）
如果這個(gè)組件第一次存在于父組件中，是不會(huì)被執(zhí)行的
如果之前已經(jīng)存在與父組件中，才會(huì)被執(zhí)行
componentWillUnmount：當(dāng)這個(gè)組件即將被從頁(yè)面中剔除的時(shí)候，會(huì)被執(zhí)行（child）

ajax請(qǐng)求：

componentDidMount
如果放在render會(huì)造成死循環(huán)(render會(huì)被不斷觸發(fā)執(zhí)行)

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"]
}//定義倉(cāng)庫(kù)的默認(rèn)數(shù)據(jù)

//reducer可以接受state 但是絕對(duì)不能修改state

//reducer是春函數(shù) ：給定固定的輸入 就一定有固定的輸出
//不能使用雷士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:整個(gè)倉(cāng)庫(kù)存儲(chǔ)的數(shù)據(jù)內(nèi)容
//action: