1.使用Navigator做到任意位置都可以跳轉(zhuǎn)使用
將Navigator轉(zhuǎn)為全局的
<Navigator ref={nav => global.nav = nav} ... />
參考: 新手理解Navigator的教程
2.Navigator在應(yīng)用中是一個(gè)還是多個(gè)？
Navigator是覆蓋整個(gè)頁(yè)面的大容器昭躺，這個(gè)容器只用在根頁(yè)面創(chuàng)建一次了赌，然后每次一整頁(yè)一整頁(yè)的push
3.Navigator定制每個(gè)界面的入場(chǎng)動(dòng)畫
configureScene(route) {
return route.animationType || Navigator.SceneConfigs.FloatFromRight;
}
4.Redux不能修改原有的state數(shù)據(jù)
Redux中傳入到reducer中的state數(shù)據(jù)是不能做任何修改的，必須復(fù)制修改
state中的數(shù)據(jù)XX對(duì)應(yīng)的this.props.XX貌嫡，而修改后的數(shù)據(jù)對(duì)應(yīng)的componentWillReceiveProps(nextProps)中的nextProps.XX
const initialState = {
testPoint: 200
};
修改state數(shù)據(jù)
case types.INCREMENT:
{
state.testPoint = 50
return {
...state,
};
}
結(jié)果
this.props.testPoint = 50
nextProps.testPoint = 50
不修改state數(shù)據(jù)
case types.INCREMENT:
{
return {
...state,
testPoint: 50
};
}
結(jié)果
this.props.testPoint = 200
nextProps.testPoint = 50
5 Redux修改數(shù)據(jù)引起的重新刷新
以下測(cè)試都是基于redux的store + 全局state基礎(chǔ)之上
| 實(shí)驗(yàn)條件 | 重新渲染 | 核心邏輯 |
|---|---|---|
| 直接返回原有的state | ? | {return state} |
| 直接修改原有的state,重新賦予原值,并返回原有state | ? | {state.val = state.val return state} |
| 直接修改原有的state,并返回原有state | ? | {state.val -= 1 return state} |
| 返回state副本 | ?? | {return {...state} } |
| 返回state的任何副本并修改 | ?? | null |
| 重新渲染:所有的child組件默認(rèn)都重新渲染 | ?? | null |
| 重新渲染優(yōu)化:判斷數(shù)據(jù)是否更改來(lái)判斷是否需要重新渲染 | ?? | null |
- 只要返回原有的state,無(wú)論原有的state是否修改過(guò)，都不會(huì)再次引起刷新
- 所有基于state副本的修改，都會(huì)引起刷新缕粹，重新渲染界面
- 所有的child都會(huì)重新渲染
- 第一次渲染不會(huì)進(jìn)入componentWillReceiveProps函數(shù)
- 為了效率 shouldComponentUpdate(nextProps, nextState)可以避免重復(fù)渲染數(shù)據(jù),可用來(lái)優(yōu)化
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.data === this.props.data) return false
return true
}
6. Object.assign和...展開(kāi)操作符都是淺拷貝
let obj = {
name: 'kkk',
age: 18,
sun: {
sname: 'tt',
sage: 20,
}
}
let t1 = obj
let t2 = {...obj}
console.log(t1 === obj) // true
console.log(t1 == obj) // true
console.log(t1 === t2) // false
console.log(t1 == t2) // false
console.log(t1.sun === t2.sun) // true
console.log(t1.sun == t2.sun) // true
// 結(jié)論 ...展開(kāi)操作符和Object.assign是一樣的淺拷貝，對(duì)象是引用的同一份
