React超香运算符

1. 可选链 ?.

可选链有多香还要说吗？现在不让我使用可选链的话，我大概会砸键盘，HHH。尤其是对于取层级很深的某个字段，例如：

interface MeasureInfo {
  name: string;
  info: {
    message: string;
  }
}
interface Data {
  name: string;
  item: {
    measureInfo: MeasureInfo
  }
}
const data: Data = {
  name: 'hello',
  item: {
    measureInfo: {
      name: 'measure',
      info: {
        message: 'message',
      }
    }
  }
}

假如我们现在需要读取 message 字段的值，我们只需要这样写：

const message = data?.item?.measureInfo?.info?.message;

而在没有可选链之前，我们需要层层判断：

let message: string;
if(data && data.item && data.item.measureInfo && data.item.measureInfo.info) {
  message = data.measureInfo.info.message;
}

在真实的项目中，数据结构往往更加复杂，层级更深，如果没有可选链，层层判断的代码写起来真的是一言难尽。以前没得选就算了，现在必须用可选链。