CSS Grid 布局到底有多强大？除了规整方正的布局外，还能用于不规则的布局。这个视频我们就看一个不规则布局的例子。

假如我们要实现这样的布局：

• 页面上有 3 张图，其中第 2 张和第 3 张有重叠
• 上面大标题和第 2 张图有重叠
• 标题下面的文字和第 1 张图片同属 1 列。
• 最下面的文字从第 1 张图开始，一直跨越到第 2 张图和第 3 张图重叠的空白部分。

那使用 Grid 布局该如何实现呢？其实再不规则的布局都能够使用网格来划分，因为网页设计都是基于网格的。这里我们可以把这个布局分成这样的区域： 加上 CSS Grid 布局的编号之后，就能清楚的知道网页上的元素分别占据的是那部分区域：

代码实现

那么这样，我们用代码来实现一下。首先看 HTML 结构：

• main 是页面整体的容器
• 然后要实现的这部分属于是页面的头部，所以这里我们用一个 header 标签来组织内容
• 用一个 h1 展示大标题
• 在下面用 p 元素展示标题下方的描述
• 之后页面的 3 张图片使用 3 个 img 标签加载出来
• 图片素材可以在视频简介中的源码里找到
• 最后的 p 元素是底部的描述信息

<main>
  <header>
    <h1>Give yourself a chance to see the world</h1>
    <p class="description1">
      Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet porta
      sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque platea
      velit volutpat magna sem. Elit eu sit facilisi nullam neque tincidunt sed
      volutpat metus. Amet sed at sed ante senectus sit bibendum tincidunt eu.
    </p>
    <img src="./images/travel1.png" alt="travel" class="image1" />
    <img src="./images/travel2.png" alt="travel" class="image2" />
    <img src="./images/travel3.png" alt="travel" class="image3" />
    <p class="description2">
      Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet porta
      sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque platea
      velit volutpat magna sem. Elit eu sit facilisi nullam neque tincidunt sed
      volutpat metus. Amet sed at sed ante senectus sit bibendum tincidunt eu.
    </p>
  </header>
</main>

之后看各个部分的 CSS。

对于一些通用的样式这里就不详细介绍了，主要是设置了下页面的宽度，字体和字体大小、间距。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
}

main {
  width: 80vw;
  margin: 0 auto;
}

p {
  font-size: 16px;
  padding: 24px 0;
  line-height: 1.5em;
}

接下来我们设置 header 标签样式，它用来布局里边的所有元素，按照之前我们划分的表格区域，使用 grid 布局，设置 6 列，每列按照设计稿的尺寸计算需要占用的比例，或者根据需要进行调整，然后设置 7 行，第一行固定 40px，就是标题和最高的图片的空白，剩下的都设置为自动：

header {
  display: grid;
  grid-template-columns: 6fr 1fr 1fr 3fr 5fr 1fr;
  grid-template-rows: 40px repeat(6, auto);
}

接着，使用 grid-column 和 grid-row 来指定各个部分所占的表格区域，这里 h1 占据第一列，然后跨 3 列，一直到编号为 4 的列表格线。然后把它放到第 2 行，也就是编号 2 和 3 的行表格线之间。之后有一点注意，需要设置较大的一点的 z-index，因为它悬浮在图片上方：

h1 {
  grid-column: 1 / span 3;
  grid-row: 2 / 3;
  font-size: 65px;
  font-weight: 900;
  z-index: 10;
}

同样的设置标题下方描述所占据的区域：

.description1 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

在设置图片占据的区域，可以看到，第二张图片和大标题的列有重叠，它的列表格线编号从 3 开始，而大标题到 4 才结束。第二张和第三张图片也有重叠，就是设计稿上的效果：

.image1 {
  grid-column: 1 / 2;
  grid-row: 4 / span 2;
}

.image2 {
  grid-column: 3 / span 3;
  grid-row: 1 / span 6;
}

.image3 {
  grid-column: 5 / span 2;
  grid-row: 5 / span 3;
}

最后设置底部描述的位置：

.description2 {
  grid-column: 1 / span 4;
  grid-row: 7 / 8;
  padding-right: 48px;
}

这样我们就实现了设计稿中的布局。可以看到 CSS Grid 布局十分强大。

小结

好了，这个就是使用 CSS Grid 布局实现不规则布局的过程，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！

React 作为一个流行了很久的框架，在使用方式上，仍然需要有很多注意的地方，这个视频整理了 6 个推荐的 React 代码写法，来帮助你编写效率更高，更方便复用的组件。

使用函数式组件

第一个是使用函数式组件。React 在 16.8 版本的时候发布了 Hooks，在同一时间，class 组件就不推荐使用了。因为 class 组件的代码写起来比较繁琐，例如必须使用构造函数来获取 props 和定义 state，使用 render() 方法来返回 JSX。并且 class 组件有多种生命周期，相关的代码会分散在不同的方法中，不方便统一管理：

import React, { Component } from "react";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // Initial state
    };
  }

  componentDidMount() {
    // componentDidMount lifecycle method
  }

  componentDidUpdate(prevProps, prevState) {
    // componentDidUpdate lifecycle method
  }

  componentWillUnmount() {
    // componentWillUnmount lifecycle method
  }

  render() {
    return <div>{/* component JSX */}</div>;
  }
}

export default MyComponent;

使用函数式组件后，就和写普通 JavaScript 函数差不多，props 通过函数的参数获取，在返回语句中返回 JSX，其他的逻辑在函数体中直接编写就可以了，并且函数式组件没有生命周期，只需要使用 useEffect() hook 来控制组件的重新渲染就可以了：

import React from "react";

const MyComponent = (props) => {
  // Use hooks here, if needed
  useState();
  useEffect();
  // ...

  return <div>{/* component JSX */}</div>;
};

export default MyComponent;

利用 hooks 复用逻辑

第二个是利用 hooks 复用逻辑。hooks 的出现就是为了复用组件的业务逻辑的，大体上组件函数里所有的代码都可以放到 hooks 中：

import { useState } from "react";

export const useCounter = (initialCount = 0) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialCount);

  return { count, increment, decrement, reset };
};

在其他组件可以直接导入这些 hooks 并使用：

import React from "react";
import { useCounter } from "./useCounter";

const MyComponent = () => {
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default MyComponent;

import React from "react";
import { useCounter } from "./useCounter";

const MyOtherComponent = () => {
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default MyOtherComponent;

hooks 的出现也代替了旧版本中的 higher order components 和 render props 的写法。

少使用 state

第三是尽量少使用 state:

• state 的变化会引起整个组件树的刷新，会带来一些性能上的损失，虽然 React 18 优化了 state 的批量更新，但同样有性能消耗。
• state 的变化也比较难追踪到，调试起来比较困难。
• 另外 state 会分散在不同的组件中，也不利于代码的维护

在编写组件时，只有在必须使用 state 的情况下再定义，我们可以通过 hooks 来减少状态的分散，例如使用 useReducer 结合 context 来集中管理状态，对于能经过其他状态计算而得出的数据，也不必定义为单独的状态。

定义可复用的组件

第四是定义可复用的组件来减少代码量，通过 props 来实现组件的自定义，利用 children 来方便组件之间的组合。组件里边可以根据 props 来展示不同的内容，或者处理不同的事件:

import React from "react";

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

import React from "react";
import Button from "./Button";

const MyComponent = () => (
  <div>
    <Button onClick={() => alert("Button clicked!")}>Click me</Button>
  </div>
);

export default MyComponent;

如果把这些都写在组件内部，那么这个组件就不能被其他组件复用，从而变成了一个只能处理一种情况的特殊组件。

import React from "react";

const Button = () => (
  <button onClick={() => alert("Button clicked")}>Click me</button>
);

export default Button;

利用 children 减少嵌套

第五个是利用 children 来减少组件之间的嵌套。当组件嵌套层次过多的时候，我们需要层层传递 props 到最深处的组件，虽然可以利用全局状态管理或者是 context 来传递，但毕竟需要额外的代码和配置：

import React from "react";

const CardContent = ({ content }) => <p>{content}</p>;

const SimpleCard = ({ content }) => (
  <div>
    <h1>Simple Card</h1>
    <CardContent content={content} />
  </div>
);

const App = () => <SimpleCard content="This is a card." />;

export default App;

更简单的解决方法就是利用 children。这样我们可以直接在最上层的组件来组装它们，之后传递 props 或者是 state 等等之类的就很方便了：

import React from "react";

const CardContent = ({ content }) => <p>{content}</p>;

const SimpleCard = ({ children }) => (
  <div>
    <h1>Simple Card</h1>
    <div>{children}</div>
  </div>
);

const App = () => (
  <SimpleCard>
    <CardContent content="This is a card." />
  </SimpleCard>
);

export default App;

避免不必要的 props

第六个是避免传递不必要的 props。尤其是当传递一个数据量比较大的 prop 的时候，它会占据很多的内存空间，并且影响性能。所以应该只传递子组件能够接收的 props：

const MyComponent = ({ prop1, prop2 }) => {
  return (
    <div>
      {prop1}
      {prop2}
    </div>
  );
};

const App = () => <MyComponent prop1="Hello" prop2="World" />;

// 传递不必要的大数据量：
const App = () => (
  <MyComponent prop1="Hello" prop2="World" prop3={ /* large data */ } />
);

小结

这个就是在编写 react 项目时的 6 个推荐的实践。你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！

JavaScript Temporal 日期和时间 API 是用来替代 Date 对象的，现在处于 stage 3 阶段，浏览器和 Node.js 正在对它进行实现。 Temporal API 解决了 Date 对象的一些缺点，例如：

• 不支持时区，需要手动进行转换。
• 只支持公历，不支持其他日历，例如我国的农历。
• 不同浏览器对于同一个时间的计算方式不同，尤其是对于有夏令时的地区。
• 日期的展示方式对于用户来说不够友好。
• Date 对象是可变的，容易造成 bug。

这些问题在 Temporal API 中都得到了解决，接下来我们看一下 Temporal API 的常见的使用方法。

配置项目安装 polyfill

因为截止到目前 Temporal API 还没正式发布，我们需要个 Polyfill 来使用它。这里创建了一个 Node.js 项目，然后添加了 @js-temporal/polyfill这个 polyfill 依赖。 之后在 index.js 中导入它提供的 Temporal 对象：

const { Temporal } = require("@js-temporal/polyfill");

获取当前日期

获取当前时间可以通过 Temporal.Now.instance() 方法，这里注意这个 polyfill 需要我们手动调用 toString() 来获取日期字符串，并且这个日期是无关时区的：

console.log(
  "Current date and time(without a specific time zone): ",
  currentTime.toString()
);

我们也可以分别通过 epochMilliseconds 和 epochNanoseconds 来分别获取当前时间的毫秒数和纳秒数。Temporal 的时间精度可以精确到纳秒：

console.log("milliseconds: ", currentTime.epochMilliseconds);
console.log("nanoseconds: ", currentTime.epochNanoseconds);

创建自定义日期

Temporal 也支持创建自定义日期，可以调用 Temporal.PlainDateTime.from() 方法，然后传递一个对象参数，里边可以通过 year、 month、day、hour、minute 和 second 属性来分别指定年月日和时分秒：

const dateTime = Temporal.PlainDateTime.from({
  year: 2018,
  month: 2, // no longer need to plus 1
  day: 10,
  hour: 8,
  minute: 12,
  second: 48,
});

console.log(dateTime.toString());

另外也可以通过 Temporal.PlainDate 和 Temporal.PlainTime 来分别创建指定日期或时间。

修改日期

要修改日期的话，Temporal 提供了很方便的方法，可以调用 add() 方法来向后推移日期，也可以调用 substract() 向前推移，这两个方法都接收一个对象，里边的参数和创建日期时的一样，可以对年月日时分秒进行增加或减少，需要注意的是 temporal 对象是不可变的，需要把返回值保存到新的变量里边来获取修改后的日期：

const newDateTime = dateTime.add({ months: 1 });
console.log(newDateTime.toString());

比较日期

Temporal 还提供了 since() 方法来比较两个日期，比较的结果是一个对象，可以通过它可以获取相差的天数、月数、小时数等不同维度的时间：

const dt1 = Temporal.PlainDate.from("2023-02-01");
const dt2 = Temporal.PlainDate.from("2023-02-05");
const diff = dt2.since(dt1);
console.log(diff.days);

格式化日期

Temporal API 可以直接获取指定地区日期的特定格式，如果要完全自定义日期格式，还是需要分别获取年月日时分秒，来自行组装：

console.log(`${dt1.year}/${dt1.month}/${dt1.day}`);

获取指定时区的时间

使用 Temporal 获取的时间是无关时区的，如果要获取对应时区的时间，可以在获取当前时间后，调用 toZonedDateTimeISO() 方法，它接收 Temporal.TimeZone 对象实例作为参数，我们可以通过 Temporal.TimZone 对象来指定时区，例如传递 Asia/Shanghai 来获取中国时区：

console.log(
  "With time zone: ",
  currentTime
    .toZonedDateTimeISO(new Temporal.TimeZone("Asia/Shanghai"))
    .toString()
);

小结

好了，这个就是 JavaScript Temporal API 的简介和 6 中常见用法，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！