搜索

我们写代码注意一点点


发布时间: 2022-11-24 22:31:00    浏览次数:32 次
 

优化点一

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 {}
    }
  })
 
免责声明 我们写代码注意一点点,资源类别:文本, 浏览次数:32 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 10:31:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/xiaoeshuang/p/16923668.html