平时工作和学习中总结的一些知识点(5)

1、非布尔值作为判断条件

非布尔值类型的值，作为判断条件使用时，需要通过 !! 转为布尔值使用。防止该值本身被渲染的情况

2、css增加权重的方法

CSS 可以多次重复同一个选择器，每次重复都会增加权重，用来替代!important

3、?? 空值运算符

空值运算符 ?? 可以同时判断null和undefined

4、利用懒加载和 Suspense 让你的应用加载更快

构建应用时，请考虑对以下代码使用懒加载和 Suspense：

• 加载成本高
• 仅与某些用户相关（例如高级功能）
• 对于用户而言初始并非立即需要

在下面的示例，Slider 资源（JS + CSS）仅在你单击卡片后加载。

//...
const LazyLoadedSlider = lazy(() => import("./Slider"));
//...
const App = () => {
  // ....
  return (
    <div className="container">
      {/* .... */}
      {selectedUser != null && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyLoadedSlider
            avatar={selectedUser.avatar}
            name={selectedUser.name}
            address={selectedUser.address}
            onClose={closeSlider}
          />
        </Suspense>
      )}
    </div>
  );
};