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.valuereturn 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:

總結

以上是生活随笔為你收集整理的react入门笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。