我们写代码注意一点点

 

优化点一

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 {}
    }
  })