1.使用Navigator做到任意位置都可以跳转使用
将Navigator转为全局的
<Navigator ref={nav => global.nav = nav} ... />
参考: 新手理解Navigator的教程
2.Navigator在应用中是一个还是多个？
Navigator是覆盖整个页面的大容器，这个容器只用在根页面创建一次，然后每次一整页一整页的push
3.Navigator定制每个界面的入场动画
configureScene(route) {
return route.animationType || Navigator.SceneConfigs.FloatFromRight;
}
4.Redux不能修改原有的state数据
Redux中传入到reducer中的state数据是不能做任何修改的，必须复制修改
state中的数据XX对应的this.props.XX，而修改后的数据对应的componentWillReceiveProps(nextProps)中的nextProps.XX
const initialState = {
testPoint: 200
};
修改state数据
case types.INCREMENT:
{
state.testPoint = 50
return {
...state,
};
}
结果
this.props.testPoint = 50
nextProps.testPoint = 50
不修改state数据
case types.INCREMENT:
{
return {
...state,
testPoint: 50
};
}
结果
this.props.testPoint = 200
nextProps.testPoint = 50
5 Redux修改数据引起的重新刷新
以下测试都是基于redux的store + 全局state基础之上
| 实验条件 | 重新渲染 | 核心逻辑 |
|---|---|---|
| 直接返回原有的state | ❌ | {return state} |
| 直接修改原有的state,重新赋予原值,并返回原有state | ❌ | {state.val = state.val return state} |
| 直接修改原有的state,并返回原有state | ❌ | {state.val -= 1 return state} |
| 返回state副本 | ✔️ | {return {...state} } |
| 返回state的任何副本并修改 | ✔️ | null |
| 重新渲染:所有的child组件默认都重新渲染 | ✔️ | null |
| 重新渲染优化:判断数据是否更改来判断是否需要重新渲染 | ✔️ | null |
- 只要返回原有的state,无论原有的state是否修改过，都不会再次引起刷新
- 所有基于state副本的修改，都会引起刷新，重新渲染界面
- 所有的child都会重新渲染
- 第一次渲染不会进入componentWillReceiveProps函数
- 为了效率 shouldComponentUpdate(nextProps, nextState)可以避免重复渲染数据,可用来优化
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.data === this.props.data) return false
return true
}
6. Object.assign和...展开操作符都是浅拷贝
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
// 结论 ...展开操作符和Object.assign是一样的浅拷贝，对象是引用的同一份
