react redux學習總結

1、生命週期流程圖

2、關於this

export

default
class
mycomponent
extends
react.component
handerclick()
hander4click=(
)=>
}

a. 封裝xmlhttprequest物件的ajax

b. promise風格

c. 可以用在瀏覽器端和node伺服器端

a. 不再使用xmlhttprequest物件提交ajax請求

b. 為了相容低版本的瀏覽器, 可以引入相容庫fetch.js

// 1)	get請求

axios.
get(
'/user?id=12345').
then
(function
(response)).
catch
(function
(error));
axios.
get(
'/user',}
).then
(function
(response)).
catch
(function
(error));
// 2) post請求
axios.
post
('/user',)
.then
(function
(response)).
catch
(function
(error)
);

//1)	get請求

fetch
(url)
.then
(function
(response)).
then
(function
(data)).
catch
(function
(e))
;//2) post請求
fetch
(url,).
then
(function
(data)).
catch
(function
(e))

解構賦值: let = this.props import from 『***』

物件的簡潔表達:

箭頭函式:

a. 常用場景

* 元件的自定義方法: *** = () => {}

* 引數匿名函式

// es5

input.
map(item => item +1)
;// es6
input.
map(
function
(item)
);

* 簡潔

* 沒有自己的this,使用引用this查詢的是外部this

擴充套件(三點)運算子: 拆解物件(const myprops = {}, )

類: class/extends/constructor/super

es6模組化: export default | import

react redux深度學習

state 維護元件內部資料狀態 store是應用狀態state的管理者 1.getstate 獲取整個state 2.dispatch action 觸發state改變的 唯一途徑 3.subscribe listener dom中的addeventlisttener 4.replacereduc...

react redux 原始碼學習

function createstate reducer dispatch 然後將 我們要用到的 getstate,dispatch,subscribe 給暴露出去 return 這裡是使用了 react 的 上下文內容，不贅述 export class provide extends compon...

React Redux常見問題總結

react 使用diff演算法，使用key來做同級比對。如果使用陣列下標作為key，有以下情況 在陣列頭部或中部插入或刪除元素 所有key對應的節點的值發生更改，進行重新渲染。造成效能損耗 而如果使用陣列中唯一值來作為key 不管是在何處插入或刪除節點，其他key對應的節點的值未發生更改，只需插入或...