优化点一
Render函数最好直接用jsx 函数组建 <View style={{ flex: 1, backgroundColor: '#F4F5FA' }}>
<TitLe>
<View/>
优化点二
函数最好不要超过10行,我判断逻辑拆分,拆细节优化点三
多个组件层级嵌套,避免使用 props =》子组建props =》子子组建props,一层一层的传值 恰当使用SWR and 局部 context SWR 典型的就是个人主页 Context 举例优化点四
调用多个返回依赖let promise = new Promise((resolve, reject) => {
reject("对不起,你不是我的菜");
});
promise.then((data) => {
console.log('第一次success' + data);
return '第一次success' + data
},(error) => {
console.log(error) }
).then((data2) => {
console.log('第二次success' + data2);
},(error2) => {
console.log(error2) }
).catch((e) => {
console.log('抓到错误啦' + e);
});
await/async 其实是 Promise 的一种升级版本,使用 await/async 调用异步的时候是从上到下,顺序执行,就像在写同步代码一样,这更加的符合我们编写代码的习惯和思维逻辑,所以容易理解。整体代码逻辑也会更加的清晰
async function asyncDemoFn() {
const data1 = await getData1();
const data2 = await getData2(data1);
const data3 = await getData3(data2);
console.log(data3)
}
await asyncDemoFn()
再来
getData1().then((resData1) => {
getData2(resData1).then((resData2) => {
getData3(resData2).then((resData3)=>{
console.log('resData3:', resData3)
})
});
});
碰到这样的情况我们可以试着用 await/async 方式去解这种有多个深层嵌套的问题。
async function asyncDemoFn2() {
const resData1 = await getData1();
const resData2 = await getData2(resData1);
const resData3 = await getData3(resData2);
console.log(resData3)
}
await asyncDemoFn2()
Promise.all
Promise.all([getData1(),getData2(),getData3()]).then([])
console.log('res:',res)
})
// 不是要链表
优化: Promise.all 其中一个 reject 让所有都取不到值
// Promise.all 调用:只要其中一个报错,就得到 [undefined, undefined, undefined]
const [res1, res2, res3] = await Promise.all([
somePromise1,
somePromise2,
somePromise3
])
改造后代码:
// 包裹函数,避免 promise 抛出 reject
const wrapPromise = (promise)=> {
return new Promise((resolve, reject) => {
promise
.then((info) => resolve({ isok: true, info }))
.catch((err) => resolve({ isok: false, err }))
})
}
// Promise.all 调用
const resArr = await Promise.all([
// 全部使用 wrapPromise 包裹
wrapPromise(somePromise1),
wrapPromise(somePromise2),
wrapPromise(somePromise3)
])
const [res1, res2, res3] = resArr.map((res) => {
if (res.isok) {
// 处理 fulfilled promise 结果的逻辑
return res.info
} else {
// 处理 rejected promise 结果的逻辑
console.error(res.err)
return {}
}
})
标签:const,log,代码,await,一点点,Promise,注意,promise,console
From: https://www.cnblogs.com/xiaoeshuang/p/16923668.html