给你一个二维整数数组 points，其中 points[i] = [xi, yi] 表示第 i 个点在笛卡尔平面上的坐标。
返回可以从 points 中任意选择四个不同点组成的梯形的数量。
梯形 是一种凸四边形，具有 至少一对 平行边。两条直线平行当且仅当它们的斜率相同。
示例 1：
输入： points = [[-3,2],[3,0],[2,3],[3,2],[2,-3]]
输出： 2
解释：
有两种不同方式选择四个点组成一个梯形：
登录[-3,2], [2,3], [3,2], [2,-3] 组成一个梯形。[2,3], [3,2], [3,0], [2,-3] 组成另一个梯形。示例 2：
输入： points = [[0,0],[1,0],[0,1],[2,1]]
输出： 1
解释：
只有一种方式可以组成一个梯形。
提示：
4 <= points.length <= 500–1000 <= xi, yi <= 1000Problem: 100692. 统计梯形的数目 II
[TOC]
4 <= points.length <= 500。这个范围，枚举所有线段肯定不会超时了
枚举线段后，我们要知道什么？y = kx + b，肯定要知道k和b了，但是可以发现，这里平行四边形也属于梯形，因此会重复计算平行四边形，因此要计算平行四边形的数目
只要两条线段平行且长度相等，那就是平行四边形了，因此还要知道d，即线段距离：
def getKB(x,y,p,q):
d = (p-x) * (p-x) + (q-y) * (q-y)
# 斜率不存在
if x == p:
return "inf",x,d
k1 = q - y
k2 = p - x
if not k1:
return 0,q,d
g = gcd(abs(k1),abs(k2))
k1 //= g
k2 //= g
if k1 < 0:
k1 *= -1
k2 *= -1
k = (k1,k2)
'''
y = k1/k2 * x + b
k2y = k1x + b * k2
k2y - k1x = b * k2
'''
k1,k2 = k2 * y - k1 * x, k2
g = gcd(abs(k1),abs(k2))
k1 //= g
k2 //= g
if k1 < 0:
k1 *= -1
k2 *= -1
b = (k1,k2)
return k,b,d
这里采取(分子，分母)的形式记录k和b，防止精度问题，同时要保证分子为正数。
k下，不同b的计数k下，不同b的相同d计数 # 同 k 有多少个 b
# cnt[k][b] = t
cnt = defaultdict(Counter)
# 平行四边形
# cnt_px[k][b][d] = t
cnt_px = {}
for i in range(n):
x,y = points[i]
for j in range(i+1,n):
p,q = points[j]
# 求 k b
k,b,d = getKB(x,y,p,q)
cnt[k][b] += 1
if k not in cnt_px:
cnt_px[k] = defaultdict(Counter)
cnt_px[k][b][d] += 1
做过这题：3623. 统计梯形的数目 I，应该知道，同斜率下，用 前缀和 + 乘法原理 即可
res = 0
# 相同 k
for tmp in cnt.values():
pre = 0
for num in tmp.values():
res += num * pre
pre += num
同样 前缀和 + 乘法原理 ，对于相同k：pre = Counter()，即pre[d]，相同d的前缀和
px = 0
# 平行四边形计数
# 相同 k
for tmp in cnt_px.values():
# 同d前缀和
pre = Counter()
# print(tmp)
# 相同 b
for tmp2 in tmp.values():
for d,num in tmp2.items():
px += num * pre[d]
for d,num in tmp2.items():
pre[d] += num
减掉多的平行四边形return res - px // 2
更多题目模板总结，请参考2024年度总结与题目分享
###Python3
class Solution:
def countTrapezoids(self, points: List[List[int]]) -> int:
'''
500 * 500
k b
梯形 - 平行四边形 // 2
'''
n = len(points)
def getKB(x,y,p,q):
d = (p-x) * (p-x) + (q-y) * (q-y)
# 斜率不存在
if x == p:
return "inf",x,d
k1 = q - y
k2 = p - x
if not k1:
return 0,q,d
g = gcd(abs(k1),abs(k2))
k1 //= g
k2 //= g
if k1 < 0:
k1 *= -1
k2 *= -1
k = (k1,k2)
'''
y = k1/k2 * x + b
k2y = k1x + b * k2
k2y - k1x = b * k2
'''
k1,k2 = k2 * y - k1 * x, k2
g = gcd(abs(k1),abs(k2))
k1 //= g
k2 //= g
if k1 < 0:
k1 *= -1
k2 *= -1
b = (k1,k2)
return k,b,d
# 同 k 有多少个 b
# cnt[k][b] = t
cnt = defaultdict(Counter)
# 平行四边形
# cnt_px[k][b][d] = t
cnt_px = {}
for i in range(n):
x,y = points[i]
for j in range(i+1,n):
p,q = points[j]
# 求 k b
k,b,d = getKB(x,y,p,q)
cnt[k][b] += 1
if k not in cnt_px:
cnt_px[k] = defaultdict(Counter)
cnt_px[k][b][d] += 1
res = 0
# 相同 k
for tmp in cnt.values():
pre = 0
for num in tmp.values():
res += num * pre
pre += num
px = 0
# 平行四边形计数
# 相同 k
for tmp in cnt_px.values():
# 同d前缀和
pre = Counter()
# print(tmp)
# 相同 b
for tmp2 in tmp.values():
for d,num in tmp2.items():
px += num * pre[d]
for d,num in tmp2.items():
pre[d] += num
return res - px // 2
对于两个点 $(x,y)$ 和 $(x_2,y_2)$，设 $\textit{dx} = x - x_2$，$\textit{dy} = y - y_2$。
经过这两个点的斜率为
$$
k =
\begin{cases}
\dfrac{\textit{dy}}{\textit{dx}}, & \textit{dx}\ne 0 \
\infty, & \textit{dx} = 0 \
\end{cases}
$$
当 $\textit{dx} \ne 0$ 时，设直线为 $Y = k\cdot X + b$，把 $(x,y)$ 代入，解得截距
$$
b = y - k\cdot x = \dfrac{y\cdot \textit{dx}-x\cdot \textit{dy}}{\textit{dx}}
$$
当 $\textit{dx} = 0$ 时，直线平行于 $y$ 轴，人为规定 $b=x$，用来区分不同的平行线。
把斜率相同的直线放在同一组，可以从中选择一对平行线，作为梯形的顶边和底边。
⚠注意：不能选两条共线的线段，所以斜率相同的组内，还要再按照截距分组，相同斜率和截距的边不能同时选。
用哈希表套哈希表统计。
统计完后，对于每一组，用「枚举右，维护左」的思想（见周赛第二题 3623. 统计梯形的数目 I），计算选一对平行边的方案数。本题由于哈希表统计的就是线段个数，所以不需要计算 $\dfrac{c(c-1)}{2}$。
第二步把平行四边形重复统计了一次，所以还要减去任意不共线四点组成的平行四边形的个数。
怎么计算平行四边形的个数？
对于平行四边形，其两条对角线的中点是重合的。利用这一性质，按照对角线的中点分组统计。
具体地，两个点 $(x,y)$ 和 $(x_2,y_2)$ 的中点为
$$
\left(\dfrac{x+x_2}{2}, \dfrac{y+y_2}{2}\right)
$$
为避免浮点数，可以把横纵坐标都乘以 $2$（这不影响分组），即
$$
(x+x_2, y+y_2)
$$
用其作为哈希表的 key。
同样地，我们不能选两条共线的线段，所以中点相同的组内，还要再按照斜率分组，相同斜率的边不能同时选。所以同样地，用哈希表套哈希表统计。
统计完后，对于每一组，用「枚举右，维护左」的思想（见周赛第二题），计算选一对中点相同的线段的方案数。
注意计算梯形个数我们用的是顶边和底边，计算平行四边形个数我们用的是对角线。
问：什么情况下用浮点数是错的？
答：取两个接近 $1$ 但不相同的分数 $\dfrac{a}{a+1}$ 和 $\dfrac{a-1}{a}$，根据 IEEE 754，在使用双精度浮点数的情况下，如果这两个数的绝对差 $\dfrac{1}{a(a+1)}$ 比 $2^{-52}$ 还小，那么计算机可能会把这两个数舍入到同一个附近的浮点数上。所以当 $a$ 达到 $2^{26}\approx 6.7\cdot 10^7$ 的时候，用浮点数就不一定对了。本题数据范围只有 $2\cdot 10^3$，可以放心地使用浮点数除法。
具体请看 视频讲解，欢迎点赞关注~
###py
class Solution:
def countTrapezoids(self, points: List[List[int]]) -> int:
cnt = defaultdict(lambda: defaultdict(int)) # 斜率 -> 截距 -> 个数
cnt2 = defaultdict(lambda: defaultdict(int)) # 中点 -> 斜率 -> 个数
for i, (x, y) in enumerate(points):
for x2, y2 in points[:i]:
dy = y - y2
dx = x - x2
k = dy / dx if dx else inf
b = (y * dx - x * dy) / dx if dx else x
cnt[k][b] += 1 # 按照斜率和截距分组
cnt2[(x + x2, y + y2)][k] += 1 # 按照中点和斜率分组
ans = 0
for m in cnt.values():
s = 0
for c in m.values():
ans += s * c
s += c
for m in cnt2.values():
s = 0
for c in m.values():
ans -= s * c # 平行四边形会统计两次，减去多统计的一次
s += c
return ans
###java
class Solution {
public int countTrapezoids(int[][] points) {
Map<Double, Map<Double, Integer>> cnt = new HashMap<>(); // 斜率 -> 截距 -> 个数
Map<Integer, Map<Double, Integer>> cnt2 = new HashMap<>(); // 中点 -> 斜率 -> 个数
int n = points.length;
for (int i = 0; i < n; i++) {
int x = points[i][0], y = points[i][1];
for (int j = 0; j < i; j++) {
int x2 = points[j][0], y2 = points[j][1];
int dy = y - y2;
int dx = x - x2;
double k = dx != 0 ? 1.0 * dy / dx : Double.MAX_VALUE;
double b = dx != 0 ? 1.0 * (y * dx - x * dy) / dx : x;
// 归一化 -0.0 为 0.0
if (k == -0.0) {
k = 0.0;
}
if (b == -0.0) {
b = 0.0;
}
// 按照斜率和截距分组 cnt[k][b]++
cnt.computeIfAbsent(k, _ -> new HashMap<>()).merge(b, 1, Integer::sum);
int mid = (x + x2 + 2000) << 16 | (y + y2 + 2000); // 把二维坐标压缩成一个 int
// 按照中点和斜率分组 cnt2[mid][k]++
cnt2.computeIfAbsent(mid, _ -> new HashMap<>()).merge(k, 1, Integer::sum);
}
}
int ans = 0;
for (Map<Double, Integer> m : cnt.values()) {
int s = 0;
for (int c : m.values()) {
ans += s * c;
s += c;
}
}
for (Map<Double, Integer> m : cnt2.values()) {
int s = 0;
for (int c : m.values()) {
ans -= s * c; // 平行四边形会统计两次，减去多统计的一次
s += c;
}
}
return ans;
}
}
###cpp
class Solution {
public:
int countTrapezoids(vector<vector<int>>& points) {
// 经测试，哈希表套 map 比哈希表套哈希表更快（分组后，每一组的数据量比较小，在小数据下 map 比哈希表快）
unordered_map<double, map<double, int>> cnt; // 斜率 -> 截距 -> 个数
unordered_map<int, map<double, int>> cnt2; // 中点 -> 斜率 -> 个数
int n = points.size();
for (int i = 0; i < n; i++) {
int x = points[i][0], y = points[i][1];
for (int j = 0; j < i; j++) {
int x2 = points[j][0], y2 = points[j][1];
int dy = y - y2;
int dx = x - x2;
double k = dx ? 1.0 * dy / dx : DBL_MAX;
double b = dx ? 1.0 * (y * dx - x * dy) / dx : x;
cnt[k][b]++; // 按照斜率和截距分组
int mid = (x + x2 + 2000) << 16 | (y + y2 + 2000); // 把二维坐标压缩成一个 int
cnt2[mid][k]++; // 按照中点和斜率分组
}
}
int ans = 0;
for (auto& [_, m] : cnt) {
int s = 0;
for (auto& [_, c] : m) {
ans += s * c;
s += c;
}
}
for (auto& [_, m] : cnt2) {
int s = 0;
for (auto& [_, c] : m) {
ans -= s * c; // 平行四边形会统计两次，减去多统计的一次
s += c;
}
}
return ans;
}
};
###go
func countTrapezoids(points [][]int) (ans int) {
cnt := map[float64]map[float64]int{} // 斜率 -> 截距 -> 个数
type pair struct{ x, y int }
cnt2 := map[pair]map[float64]int{} // 中点 -> 斜率 -> 个数
for i, p := range points {
x, y := p[0], p[1]
for _, q := range points[:i] {
x2, y2 := q[0], q[1]
dy := y - y2
dx := x - x2
k := math.MaxFloat64
b := float64(x)
if dx != 0 {
k = float64(dy) / float64(dx)
b = float64(y*dx-dy*x) / float64(dx)
}
if _, ok := cnt[k]; !ok {
cnt[k] = map[float64]int{}
}
cnt[k][b]++ // 按照斜率和截距分组
mid := pair{x + x2, y + y2}
if _, ok := cnt2[mid]; !ok {
cnt2[mid] = map[float64]int{}
}
cnt2[mid][k]++ // 按照中点和斜率分组
}
}
for _, m := range cnt {
s := 0
for _, c := range m {
ans += s * c
s += c
}
}
for _, m := range cnt2 {
s := 0
for _, c := range m {
ans -= s * c // 平行四边形会统计两次，减去多统计的一次
s += c
}
}
return
}
上面做法最坏会创建 $\mathcal{O}(n^2)$ 个哈希表。这其实就是导致代码变慢的根源。
减少创建的哈希表个数，就能省下大量时间。
在随机数据下，对于相同的斜率 $k$，大概率只有一条线段，无法组成梯形。这些数据根本就不需要创建哈希表！
所以，先不创建内部的哈希表，而是先把数据保存到更轻量的列表中。在计算答案的时候，再去创建哈希表。对于大小为 $1$ 的列表，我们直接跳过，不创建哈希表。
注：这个优化得看语言，Java 不是很明显。
###py
class Solution:
def countTrapezoids(self, points: List[List[int]]) -> int:
groups = defaultdict(list) # 斜率 -> [截距]
groups2 = defaultdict(list) # 中点 -> [斜率]
for i, (x, y) in enumerate(points):
for x2, y2 in points[:i]:
dy = y - y2
dx = x - x2
k = dy / dx if dx else inf
b = (y * dx - x * dy) / dx if dx else x
groups[k].append(b)
groups2[(x + x2, y + y2)].append(k)
ans = 0
for g in groups.values():
if len(g) == 1:
continue
s = 0
for c in Counter(g).values():
ans += s * c
s += c
for g in groups2.values():
if len(g) == 1:
continue
s = 0
for c in Counter(g).values():
ans -= s * c # 平行四边形会统计两次，减去多统计的一次
s += c
return ans
###java
class Solution {
public int countTrapezoids(int[][] points) {
Map<Double, List<Double>> groups = new HashMap<>(); // 斜率 -> [截距]
Map<Integer, List<Double>> groups2 = new HashMap<>(); // 中点 -> [斜率]
int n = points.length;
for (int i = 0; i < n; i++) {
int x = points[i][0], y = points[i][1];
for (int j = 0; j < i; j++) {
int x2 = points[j][0], y2 = points[j][1];
int dy = y - y2;
int dx = x - x2;
double k = dx != 0 ? 1.0 * dy / dx : Double.MAX_VALUE;
if (k == -0.0) {
k = 0.0;
}
double b = dx != 0 ? 1.0 * (y * dx - x * dy) / dx : x;
groups.computeIfAbsent(k, _ -> new ArrayList<>()).add(b);
int mid = (x + x2 + 2000) << 16 | (y + y2 + 2000); // 把二维坐标压缩成一个 int
groups2.computeIfAbsent(mid, _ -> new ArrayList<>()).add(k);
}
}
int ans = 0;
Map<Double, Integer> cnt = new HashMap<>();
for (List<Double> g : groups.values()) {
if (g.size() == 1) {
continue;
}
cnt.clear();
for (double b : g) {
if (b == -0.0) {
b = 0.0;
}
cnt.merge(b, 1, Integer::sum);
}
int s = 0;
for (int c : cnt.values()) {
ans += s * c;
s += c;
}
}
for (List<Double> g : groups2.values()) {
if (g.size() == 1) {
continue;
}
cnt.clear();
for (double k : g) {
cnt.merge(k, 1, Integer::sum);
}
int s = 0;
for (int c : cnt.values()) {
ans -= s * c; // 平行四边形会统计两次，减去多统计的一次
s += c;
}
}
return ans;
}
}
###cpp
class Solution {
public:
int countTrapezoids(vector<vector<int>>& points) {
unordered_map<double, vector<double>> groups; // 斜率 -> [截距]
unordered_map<int, vector<double>> groups2; // 中点 -> [斜率]
int n = points.size();
for (int i = 0; i < n; i++) {
int x = points[i][0], y = points[i][1];
for (int j = 0; j < i; j++) {
int x2 = points[j][0], y2 = points[j][1];
int dy = y - y2;
int dx = x - x2;
double k = dx ? 1.0 * dy / dx : DBL_MAX;
double b = dx ? 1.0 * (y * dx - x * dy) / dx : x;
groups[k].push_back(b);
int mid = (x + x2 + 2000) << 16 | (y + y2 + 2000); // 把二维坐标压缩成一个 int
groups2[mid].push_back(k);
}
}
int ans = 0;
for (auto& [_, g] : groups) {
if (g.size() == 1) {
continue;
}
// 对于本题的数据，map 比哈希表快
map<double, int> cnt;
for (double b : g) {
cnt[b]++;
}
int s = 0;
for (auto& [_, c] : cnt) {
ans += s * c;
s += c;
}
}
for (auto& [_, g] : groups2) {
if (g.size() == 1) {
continue;
}
map<double, int> cnt;
for (double k : g) {
cnt[k]++;
}
int s = 0;
for (auto& [_, c] : cnt) {
ans -= s * c; // 平行四边形会统计两次，减去多统计的一次
s += c;
}
}
return ans;
}
};
###go
func countTrapezoids(points [][]int) (ans int) {
groups := map[float64][]float64{} // 斜率 -> [截距]
type pair struct{ x, y int }
groups2 := map[pair][]float64{} // 中点 -> [斜率]
for i, p := range points {
x, y := p[0], p[1]
for _, q := range points[:i] {
x2, y2 := q[0], q[1]
dy := y - y2
dx := x - x2
k := math.MaxFloat64
b := float64(x)
if dx != 0 {
k = float64(dy) / float64(dx)
b = float64(y*dx-dy*x) / float64(dx)
}
groups[k] = append(groups[k], b)
mid := pair{x + x2, y + y2}
groups2[mid] = append(groups2[mid], k)
}
}
for _, g := range groups {
if len(g) == 1 {
continue
}
cnt := map[float64]int{}
for _, b := range g {
cnt[b]++
}
s := 0
for _, c := range cnt {
ans += s * c
s += c
}
}
for _, g := range groups2 {
if len(g) == 1 {
continue
}
cnt := map[float64]int{}
for _, k := range g {
cnt[k]++
}
s := 0
for _, c := range cnt {
ans -= s * c // 平行四边形会统计两次，减去多统计的一次
s += c
}
}
return
}
欢迎在评论区分享你的思路/代码。
与 统计梯形的数目 I 的思路一样，我们枚举直线 $l$，从上面选两个点，然后再乘以和它平行的直线上选两个点的方案总和。
但这样做有个问题：平行四边形有两对边是平行的，因此会被算两次。所以我们还要将答案减去平行四边形的数量。
平行四边形的数量怎么算呢？仍然枚举直线 $l$，枚举从上面选哪两个点。设两点之间距离为 $d$，那么再从与 $l$ 平行的直线上选出两个距离为 $d$ 的点，这四个点就能构成平行四边形。
$n$ 个点只会组成 $\mathcal{O}(n^2)$ 条线段，所以也就只会有 $\mathcal{O}(n^2)$ 种直线，复杂度 $\mathcal{O}(n^2)$。但本题比较讨厌的是实现细节，例如怎么枚举平行线，以及怎么避免浮点数计算防止精度问题等，详见参考代码。
class Solution {
public:
int countTrapezoids(vector<vector<int>>& points) {
int n = points.size();
unordered_map<int, unordered_map<int, unordered_map<int, vector<int>>>> mp;
for (int i = 0; i < n; i++) for (int j = i + 1; j < n; j++) {
int xa = points[i][0], ya = points[i][1];
int xb = points[j][0], yb = points[j][1];
// 计算两点距离的平方
int d2 = (xa - xb) * (xa - xb) + (ya - yb) * (ya - yb);
// 将两点式直线 (xa, ya) -- (xb, yb) 转为一般式方程 ax + by + c = 0
// 这样 a / b 相同的直线就是互相平行的
int a = yb - ya, b = xa - xb, c = xb * ya - xa * yb;
// 统一正负号，否则我们会以为 (a, b) = (1, 2) 和 (a, b) = (-1, -2) 不是平行线
if (a < 0 || (a == 0 && b < 0) || (a == 0 && b == 0 && c < 0)) a = -a, b = -b, c = -c;
// 约去公因数，否则我们会以为 (a, b) = (1, 2) 和 (a, b) = (2, 4) 不是平行线
int g = gcd(gcd(abs(a), abs(b)), abs(c));
a /= g; b /= g; c /= g;
mp[a][b][c].push_back(d2);
}
int ans1 = 0, ans2 = 0;
// 枚举直线方程里的 (a, b)，即枚举直线的斜率
for (auto &pa : mp) for (auto &pb : pa.second) {
// sm：从之前枚举过的平行线上选两个点的方案数
int sm = 0;
// cnt[d2]：从之前枚举过的平行线上选两个点，它们的距离平方等于 d2 的方案数
unordered_map<int, int> cnt;
// 枚举斜率为特定值的每条直线
for (auto &pc : pb.second) {
// 算梯形的数量
ans1 += pc.second.size() * sm;
sm += pc.second.size();
unordered_map<int, int> tmp;
for (int d2 : pc.second) tmp[d2]++;
// 算平行四边形的数量
for (auto &p : tmp) {
ans2 += p.second * cnt[p.first];
cnt[p.first] += p.second;
}
}
}
assert(ans2 % 2 == 0);
// 平行四边形两对边各算一次，所以要除以 2
return ans1 - ans2 / 2;
}
};
面对研发交付中Feature级项目复杂度攀升、信息分散及跨端协作低效等痛点，传统的Story级管理模式已显乏力。本文详细阐述了一套“项目级效能提升一站式交付最佳实践”，通过构建三大核心体系重塑研发流程：一是通过AI侧边栏与风险管控打造“AI项目管理”，实现信息聚合与决策提效；二是推动“一站式Feature交付”，利用AI自动生成测试方案与搭建环境，实现端到端闭环；三是建立涵盖“重点战役-Feature-Story”的三级数字化度量体系。这套新范式旨在以智能替代人工低效环节，助力团队从“被流程束缚”向“借智能破局”转变，实现研发效能的质的飞跃。
在研发交付场景中，Story级别效率持续向好，但端到端 Feature 级项目持续增多，复杂度呈上升趋势。在传统工作模式下，研发团队正遭遇一系列制约效能的痛点：
信息分散、Feature视角管控缺失：研发过程中，需求卡片、Bug列表、测试用例等信息分散于不同空间；以及历史交付流程侧重 story 侧，缺少完整需求视角交付的风险洞察，导致项目无预警延期，管理成本趋增。
多方协作效率低下：联调测试依赖手动触发脚本，环境配置依赖人工协调；多模块联动存在用例交叉冗余、测试评审缓慢；跨产品线借调沟通成本高，各端测试人力重复投入且耦合重，拖慢研发节奏，项目进度风险激增 。
Feature 级数字化能力缺失：既缺乏能够精准衡量 Feature 价值与进展的指标度量体系，也缺乏用于支撑分析、优化的标准化数据积累流程，导致 Feature 相关的评估无据可依，数据资产难以沉淀，进一步制约效能提升与问题根因定位。
为有效破解以上痛点，提升产研团队整体效能，我们构建项目级交付新范式：通过 “ AI 项目管理” 打造一站式项目信息与工具服务获取新入口，实现过程风险AI精准管控；通过 “一站式 Feature 交付” 推动单端联调模式向端到端交付模式转变，同时借助 AI 测试提效驱动交付效能跃升；通过 “项目级效能数字化度量” 构建完善的效能评估体系。
AI项目管理：借助群聊侧边栏打造一站式项目信息看板，提升风险感知与决策效率；支持产研团队一键获取所需工具、服务，提升工具使用与协同效率；依托AIQA构建全流程管控能力并提效。
一站式Feature交付：通过建设端到端交付能力，释放冗余人力，并将测试方案生成、基础环境搭建等场景与AIQA深度融合，为 Feature 全生命周期提供高效、智能的一站式支撑。
项目级效能数字化度量：构建涵盖重点战役、Feature、Story 三个层级的更全面、立体的洞察体系，借助数据驱动的力量，全方位、深层次评估分析产品开发过程的效能表现与最终成果，为业务决策提供坚实有力数据支撑。
以智能替代人工低效环节，推动团队从 “被流程束缚” 向 “借智能破局” 转变，为效能提升注入新动能，引领团队协作进入智能化新范式，让每一次交付都更高效、更可控！
在研发交付体系中，Feature级项目持续增多，复杂度呈上升趋势，团队项目管理普遍面临四大核心痛点：
信息碎片化带来高昂的把控成本
跨角色协作过程产生的高额隐性成本
分散工具链造成执行效率损耗
项目交付进展、风险纯依赖人工通知确认，交付周期长尾
为破解上述痛点，我们构建融合 “侧边栏 + AIQA过程管控” 的 AI 项目管理体系，实现信息整合、协作提效、工具聚合与交付管控闭环。
侧边栏统一解决方案，通过配置侧边栏框架，灵活定制卡片，以满足业务线各类场景应用，通常涵盖项目概览、项目详情、工具集合三大核心模块。
项目概览模块：以 PMO 视角为核心，深度整合项目进度、资源占用、风险预警等维度数据，支撑 PMO 实现精准的项目群管控与决策穿透 。
项目详情模块：聚焦产研团队执行视角，整合项目关联卡片、各类文档、bug 记录、上线记录、实验记录及测试环境等信息，保障研发高效协同与质量可控。
工具集合模块：提供了项目管理、联调提效等工具，可根据角色、产品线、项目，提供不同的工具入口，推动研发端到端衔接与操作链路简化。
通过具象化的配置实践，可在实际业务场景中落地，助力各角色高效协作，破解产研团队项目管理痛点 。以下实践案例，包括：项目概览、项目详情、工具集三大类内容，且支持PC和手机端样式，以及群吊顶和侧边栏位置。
在项目各环节，AIQA以PMO数字助手的角色，建设基于AIQA的项目进度/风险提醒能力，通过输入框形式进行交互，全流程管控并提效。具体能力包括：AB实验长时间停留、AB实验放量实时、技术方案&打点方案等未评审风险等
项目评审风险提醒：支持技术方案、UI、实验方案、打点方案等提醒
AB实验：待启动实验、实验中、评估中等9个阶段的停留时长；单台、放量、灰度等7个阶段的放量提醒
项目进度风险提醒
产研需求常常是包括客户端、前端、服务端，两端以上联动的需求占比较高（>40%），各端分别投入人力测试，测试耦合严重，人力重复投入严重，通过建设交付能力，支撑实现需求测试从「单端测试+多端联调」交付模式，转为「端到端」交付模式，释放冗余人力。
例如客户端&服务端联动的需求，通过从功能角度评估客户端case对服务端case覆盖，覆盖的部分由客户端QA端到端测试，未覆盖部分通过夯实自动化能力补充测试或调起服务端QA补充测试，并通过准入/准出能力评估影响面和测试完备度，保证项目质量，释放冗余人力，提升整体测试吞吐。
各阶段支撑能力建设有：
测试前：通过端到端模式识别判断需求是否可以进行端到端的交付，动态自动分配测试人力，基于需求生成端到端测试用例，前端&服务端的环境自动搭建/更新，创建相应的mock环境等
测试中：基于代码提交进行风险洞察，以及提供问题定位、mock 能力供前端/客户端的同学更顺畅的完成测试过程，并且在过程中对测试流量进行录制，实时采集覆盖率，供后续测试评估；并在测试过程中阶段性评估测试进度风险，及时发现&通报过程中风险；
测试准出：测试完成后，自动触发服务端的异常测试、自动生成后续用于回归的自动化case，以保障服务端的迭代质量，整体完成后根据手工case完成率、bug闭环率、手工测试覆盖率、异常测试结果等多个维度综合进行测试准出评估
我们探索测试方案自动生成，目前可以通过分析MRD/PRD/CR，结合历史业务&工具知识经验，自动生成完整的测试方案，包括：
对需求的基本洞察理解（背景概述、分系统/模块升级点）
联调测试范围（涉及系统/模块等）作为环境推荐能力的输入
联调测试用例及可驱动AI测试执行的相关场景参数
测试经验&风险、历史相似项目参考
建设LUI交互端到端环境部署能力，支持产研团队各业务线及图搜联调场景调用，端到端环境部署时长保持在小时级
功能点：
聚合用户的部署意图，支持多种prompt，完成LUI环境部署诉求：支持Feature卡片、QA单模块产物、单story卡片、联调CR、Fcnap域名等多种部署意图，聚合部署变更的信息
提供丰富的prompt向量库维护，实现精准的意图识别：prompt维护
基于qs-bot openmanus和mcp框架，实现丰富的工具集，通过动态规划调度工具交付各场景下的端到端测试环境：需求变更信息处理，数据聚合；触发多路复用环境部署；kirin异步轮询部署状态；qsbot回调重新触发动态规划；环境前后端链接与配置管理
聚合部署任务中的工具使用历史，异步回调完成环境部署完成后的智卡推送：聚合单次LUI中动态规划的工具返回信息；完成智卡数据构造并发卡推送给用户
针对 Story 维度的度量工作，主要聚焦于对研发测试阶段展开持续且深入的洞察，旨在为从事研发测试工作的人员提供切实可行的优化方向与手段。但story维度的度量也存在如下问题：
Story 粒度本身存在一定局限性，呈现研发-测试阶段的效率洞察，向左延伸的需求设计阶段，向右延伸的上线实验转全阶段，都不涵括在内，无法代表整体情况；
随着产品复杂程度日益提高，传统以 Story 维度为主的度量方式，无法站在产品需求视角观测交付效率，已难以满足需求；
站在每个组织的重点战役角度，story度量的方式，无法看到战役视角的资源投入和效率瓶颈，无法提供深层次的分析和决策。
为此我们开始建设贯穿重点战役-》feature-》Story的统一三级视角的数字化方案：
围绕从最初的发布规划、设计构思、开发实施、测试验证、正式上线，直至后续的小流量到逐步推全的整个生命周期，实施全方位、系统性的评估与监测，确保 Feature 的每个阶段都能得到有效把控与持续优化。最终实现更加高效地管理和优化产品开发流程，以及进一步提升团队协作效率。
重点战役是企业为实现特定战略目标而发起的关键行动，往往需要通过一系列具体的Feature来实现其目标。
协同机制：重点战役的范围在季度初由PMO圈定，在业务拆解功能时在Feature上打上标记，数字化定期采集和处理分析，支持业务进行重点战役的进度监控和项目复盘。
立足项目级一站式交付实践，AI 原生思维在研发领域的价值将向更深、更广维度延伸：
从能力深化看，AI 将实现从 “被动响应需求” 到 “主动预测需求” 的升级，通过持续学习团队协作数据、项目交付规律，可提前预判研发各阶段的核心需求，预警潜在风险，让智能服务更具前瞻性
从场景拓展看，AI 与高频协作场景的融合将突破群聊边界，向需求评审、代码联调、线上问题排查等全研发链路渗透，构建 “全场景覆盖、全流程智能” 的研发协同体系，让智能能力随研发动作自然触发
从生态构建看，基于侧边栏的 AI 驱动协作模式，可进一步打通跨团队、跨业务线的数据与工具壁垒，形成可复用、可迭代的研发效能提升方案，推动 AI 原生思维从单一团队实践，升级为业务级研发协同标准
最终，AI 将不再仅是 “提效工具”，更将成为研发团队创新的 “核心引擎”，通过持续解放人工低效环节，让团队聚焦于技术攻坚、产品创新等核心工作，推动研发领域从 “效能提升” 向 “价值创造” 跨越，开启智能化研发的全新阶段。
故事开始于
面试官：“说说你对原型以及原型链的理解”
我：原型是这样的..., 原型链是这样的..., 说的很抽象，听得也很抽象
面试官接着问：“说说javascript 怎么实现继承的”
作为前端开发者，我们经常会听到「原型」和「原型链」这两个概念，但你真的理解它们吗？它们是JavaScript面向对象编程的核心机制，掌握它们对于理解JavaScript的运行原理至关重要。
本文将从基础概念出发，逐步深入解析JavaScript原型与原型链的工作原理，结合大量代码示例和可视化图解，让你轻松掌握这一核心知识点。
在JavaScript中，每个对象都有一个原型对象(__proto__)，对象可以从原型中继承属性和方法。原型对象也可以有自己的原型，这样就形成了一个链式结构，称为「原型链」。
通过console控制台，可以看到foo对象_proto_对象上面有个age等于18的属性，而age又是通过构造函数Foo的prototype添加上去的。
所以有了 foo.__proto__ === Foo.prototype
原型主要有两个作用：
// 创建一个普通对象
const person = {
name: 'John',
age: 30
};
// 获取person的原型
const proto = Object.getPrototypeOf(person);
console.log(proto); // 输出：[Object: null prototype] {}
console.log(proto === Object.prototype); // 输出：true
这是初学者最容易混淆的两个概念，让我们来彻底搞清楚它们：
__proto__属性，指向它的原型对象Object.getPrototypeOf()和Object.setPrototypeOf()代替prototype属性prototype作为自己的__proto__
prototype对象包含constructor属性，指向构造函数本身| 特性 | proto | prototype |
|---|---|---|
| 所属对象 | 所有对象 | 只有函数 |
| 指向 | 对象的原型 | 构造函数创建的实例的原型 |
| 作用 | 实现原型继承 | 定义构造函数的实例共享属性和方法 |
| 标准性 | 非标准（建议使用Object.getPrototypeOf） | 标准属性 |
// 构造函数
function Person(name) {
this.name = name;
}
// 构造函数的prototype属性
console.log(Person.prototype); // 输出：Person {}（包含constructor属性）
// 创建实例
const alice = new Person('Alice');
// 实例的__proto__指向构造函数的prototype
console.log(alice.__proto__ === Person.prototype); // 输出：true
// 构造函数的prototype的constructor指向构造函数
console.log(Person.prototype.constructor === Person); // 输出：true
当使用new关键字调用构造函数创建实例时，发生了以下几件事：
__proto__指向构造函数的prototype
this指向这个新对象// 构造函数
function Car(brand, model) {
this.brand = brand;
this.model = model;
}
// 在原型上添加方法
Car.prototype.drive = function() {
console.log(`驾驶 ${this.brand} ${this.model}`);
};
// 创建两个实例
const car1 = new Car('Toyota', 'Camry');
const car2 = new Car('Honda', 'Accord');
// 调用原型上的方法
car1.drive(); // 输出：驾驶 Toyota Camry
car2.drive(); // 输出：驾驶 Honda Accord
// 两个实例共享同一个原型方法
console.log(car1.drive === car2.drive); // 输出：true
当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着__proto__属性向上查找，直到找到该属性或方法，或者到达原型链的末端（null）。这个链式查找结构就是「原型链」。
原型链的末端是Object.prototype，它的__proto__指向null，表示原型链的结束。
// Object.prototype是原型链的顶端之一
console.log(Object.prototype.__proto__); // 输出：null
// 创建对象
const obj = {};
// obj自身没有toString方法
console.log(obj.hasOwnProperty('toString')); // 输出：false
// 但可以调用toString方法，因为它继承自Object.prototype
console.log(obj.toString()); // 输出：[object Object]
// 原型链：obj -> Object.prototype -> null
console.log(obj.__proto__ === Object.prototype); // 输出：true
console.log(Object.prototype.__proto__ === null); // 输出：true
// 构造函数
function Animal(type) {
this.type = type;
}
// 原型方法
Animal.prototype.eat = function() {
console.log('进食中...');
};
// 子类构造函数
function Dog(name, breed) {
Animal.call(this, 'dog'); // 调用父类构造函数
this.name = name;
this.breed = breed;
}
// 设置Dog的原型为Animal的实例
Dog.prototype = Object.create(Animal.prototype);
// 修复constructor指向
Dog.prototype.constructor = Dog;
// Dog的原型方法
Dog.prototype.bark = function() {
console.log('汪汪汪！');
};
// 创建实例
const myDog = new Dog('Buddy', 'Golden Retriever');
// 访问自身属性
console.log(myDog.name); // 输出：Buddy
// 访问继承自Dog.prototype的方法
myDog.bark(); // 输出：汪汪汪！
// 访问继承自Animal.prototype的方法
myDog.eat(); // 输出：进食中...
// 访问继承自Object.prototype的方法
console.log(myDog.toString()); // 输出：[object Object]
// 原型链：myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null
原型链是JavaScript实现继承的主要方式。通过将子类的原型设置为父类的实例，可以实现属性和方法的继承。
// 父类
function Parent(name) {
this.name = name;
this.family = 'Smith';
}
Parent.prototype.sayFamily = function() {
console.log(`My family name is ${this.family}`);
};
// 子类
function Child(name, age) {
Parent.call(this, name); // 继承父类属性
this.age = age;
}
// 继承父类方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.sayAge = function() {
console.log(`I'm ${this.age} years old`);
};
// 使用
const child = new Child('John', 10);
child.sayFamily(); // 输出：My family name is Smith
child.sayAge(); // 输出：I'm 10 years old
我们可以通过修改内置对象的原型来扩展其功能：
// 扩展Array原型，添加求和方法
Array.prototype.sum = function() {
return this.reduce((total, item) => total + item, 0);
};
// 使用扩展后的方法
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // 输出：15
// 扩展String原型，添加反转方法
String.prototype.reverse = function() {
return this.split('').reverse().join('');
};
// 使用扩展后的方法
const str = 'hello';
console.log(str.reverse()); // 输出：olleh
注意：虽然可以扩展内置对象，但不推荐在生产环境中使用，因为可能会与其他库冲突。
// 判断对象类型的函数
function getType(obj) {
if (obj === null) return 'null';
if (typeof obj !== 'object') return typeof obj;
// 使用原型链判断具体类型
const proto = Object.getPrototypeOf(obj);
const constructor = proto.constructor;
return constructor.name;
}
// 测试
console.log(getType(123)); // 输出：number
console.log(getType('hello')); // 输出：string
console.log(getType(true)); // 输出：boolean
console.log(getType(null)); // 输出：null
console.log(getType([])); // 输出：Array
console.log(getType({})); // 输出：Object
正确理解：除了Object.prototype本身，所有对象都是Object的实例吗？不完全是。比如：
// 创建一个没有原型的对象
const obj = Object.create(null);
console.log(obj.__proto__); // 输出：undefined
console.log(obj instanceof Object); // 输出：false
正确理解：是的，但如果是直接给实例添加同名属性，会覆盖原型属性，而不是修改原型：
function Person() {}
Person.prototype.name = 'Anonymous';
const p1 = new Person();
const p2 = new Person();
console.log(p1.name); // 输出：Anonymous
console.log(p2.name); // 输出：Anonymous
// 修改原型属性
Person.prototype.name = 'Default';
console.log(p1.name); // 输出：Default
console.log(p2.name); // 输出：Default
// 给实例添加同名属性（覆盖）
p1.name = 'John';
console.log(p1.name); // 输出：John
console.log(p2.name); // 输出：Default（不受影响）
原型链查找是有性能开销的，层级越深，查找速度越慢。因此：
直接修改__proto__会影响对象的原型链，可能导致性能问题和意外行为。推荐使用：
Object.create()创建指定原型的对象Object.setPrototypeOf()修改对象的原型为了更好地理解原型链，我们可以通过可视化的方式来呈现它的结构：
obj (实例对象)
└── __proto__ → Object.prototype
└── __proto__ → null
instance (实例对象)
└── __proto__ → Constructor.prototype
└── __proto__ → Object.prototype
└── __proto__ → null
childInstance (子类实例)
└── __proto__ → Child.prototype
└── __proto__ → Parent.prototype
└── __proto__ → Object.prototype
└── __proto__ → null
// 定义构造函数
function Grandparent() {
this.grandparentProp = 'grandparent';
}
function Parent() {
this.parentProp = 'parent';
}
function Child() {
this.childProp = 'child';
}
// 设置继承关系
Parent.prototype = Object.create(Grandparent.prototype);
Child.prototype = Object.create(Parent.prototype);
// 创建实例
const child = new Child();
// 可视化原型链
console.log('child:', child);
console.log('child.__proto__ (Child.prototype):', child.__proto__);
console.log('child.__proto__.__proto__ (Parent.prototype):', child.__proto__.__proto__);
console.log('child.__proto__.__proto__.__proto__ (Grandparent.prototype):', child.__proto__.__proto__.__proto__);
console.log('child.__proto__.__proto__.__proto__.__proto__ (Object.prototype):', child.__proto__.__proto__.__proto__.__proto__);
console.log('child.__proto__.__proto__.__proto__.__proto__.__proto__ (null):', child.__proto__.__proto__.__proto__.__proto__.__proto__);
ES6引入了class语法，但它只是原型继承的语法糖，底层仍然是基于原型链实现的：
// ES6 Class
class Animal {
constructor(type) {
this.type = type;
}
eat() {
console.log('进食中...');
}
}
class Dog extends Animal {
constructor(name, breed) {
super('dog');
this.name = name;
this.breed = breed;
}
bark() {
console.log('汪汪汪！');
}
}
// 等价于原型继承
console.log(typeof Animal); // 输出：function
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出：true
现代JavaScript中，我们通常使用组合继承模式，结合原型链和构造函数：
// 组合继承模式
function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function() {
console.log(this.name);
};
function Child(name, age) {
// 继承属性
Parent.call(this, name);
this.age = age;
}
// 继承方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.sayAge = function() {
console.log(this.age);
};
通过本文的学习，我们已经全面了解了JavaScript原型与原型链的核心概念：
原型与原型链是JavaScript的核心机制，掌握它们对于理解JavaScript的运行原理、实现面向对象编程至关重要。希望本文的详细解析和丰富示例能帮助你彻底理解这一知识点。
instanceof运算符的工作原理（提示：基于原型链）欢迎在评论区分享你的理解和思考，让我们一起进步！
如果你觉得本文对你有帮助，欢迎点赞、收藏、分享，也欢迎关注我，获取更多前端技术干货！
在创建一个 Vue 3 项目时，通常会看到三个核心文件：
main.js:应用入口
index.html:页面入口
App.vue: 根组件
本文将以这三个文件为例，简述 Vue 应用的初始化流程
在 main.js 中，我们导入了 createApp 函数和根组件 App.vue
createApp(App).mount('#app')
createApp(App)调用createApp传入根组件，生成它专属的mount方法
.mount('#app')让createApp(App)这个应用实例挂载到根容器（id为app的盒子），
基于根组件来创建虚拟节点vnode
创建出来的虚拟节点vnode属性如下：
调用 render 函数
- render函数只是一个渲染器的入口，负责接收接收虚拟节点和容器，开启渲染过程
可以看见render函数内部也主要是调用patch函数，
- patch()主要会根据vnode.type以及shapeFlag去判断节点属于什么类型，进而调用相应类型的处理方法processxxxx()
这里App是组件类型，所以用processComponent处理
- 不管是什么类型的节点，都会在这个时候判断，这个节点之前是否存在，是选择初始化节点mountxxx()，还是更新节点
由于这是组件首次渲染，调用patch传下来的第一个参数应该是null，即没有n1，
所以到达processComponent之后，会先进行mountComponent
- 然后进行相应的流程 mountxxx()/更新节点
mountComponent会先去创建 component instance对象，再调用setupComponent设置组件实例，最后调用setupRenderEffect设置渲染效果。
ps：也是可以粗略的看看instance对象的属性
document.getElementById
如果去面试 React 开发岗位，问到 useRef 是干嘛的，90% 的候选人会说：“用来获取 DOM 元素，比如给 input 设置焦点。”
这就好比你买了一台最新的 iPhone 15 Pro Max，结果只用来打电话。
在 React 的函数式组件（Functional Component）世界里，useRef 其实是一个法外之地。
它是你在严格的“不可变数据流”和“频繁重渲染”中，唯一的逃生舱（Escape Hatch）。
今天咱们不聊怎么 input.focus()，咱们来聊聊怎么用 useRef 搞定那些 useState 和 useEffect 搞不定的烂摊子。
首先，你得把 useRef 理解成一个盒子。
useState：是大喇叭。你改了里面的值，React 立马大喊：“数据变了！所有组件起立，重新渲染！”useRef：是静音抽屉。你偷偷把里面的值改了，React 根本不知道，组件该干嘛干嘛，不会触发重渲染。而且，最最重要的是：组件每次重渲染，这个盒子都是同一个盒子（内存地址不变）。
这就赋予了它两个神级能力：“穿越时空” 和 “暗度陈仓”。
这是所有 React 新手的噩梦。
场景：你想写一个定时器，每秒打印一下当前的 count 值。
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
// 💀 恐怖故事：这里永远打印 0
console.log('Current Count:', count);
}, 1000);
return () => clearInterval(timer);
}, []); // 依赖数组为空，effect 只跑一次
为什么？ 因为 useEffect 执行的那一瞬间（Mount 时），它捕获了当时的 count（也就是 0）。就像拍了一张照片，照片里的人永远定格在那一刻。哪怕外面 count 变成了 100，定时器闭包里的 count 还是 0。
✅ useRef 救场：
我们要用 useRef 造一个“时光胶囊”，永远保存最新的值。
// 1. 创建一个胶囊
const countRef = useRef(count);
// 2. 每次渲染，都把最新的值塞进胶囊里
// 注意：修改 ref 不会触发渲染，所以这里很安全
countRef.current = count;
useEffect(() => {
const timer = setInterval(() => {
// 3. 定时器里读胶囊里的值，而不是读外面的快照
console.log('Current Count:', countRef.current);
}, 1000);
return () => clearInterval(timer);
}, []); // 依然不需要依赖 count，定时器也不用重启
这就是 useRef 的“穿透”能力。它打破了闭包的限制，让你在旧的 Effect 里读到了新的 State。
在 Class 组件时代，我们有 componentDidUpdate(prevProps)，可以很方便地对比新旧数据。 到了 Hooks 时代，官方竟然没给这个功能？
别急，useRef 既然能存值，那就能存“前任”。
usePrevious Hook： // 创建一个 ref 来存储值
const ref = useRef();
// 每次渲染后，把当前值存进去
// 注意：useEffect 是在渲染*之后*执行的
useEffect(() => {
ref.current = value;
}, [value]);
// 返回 ref 里的值
// 注意：也就是在本次渲染时，ref.current 还是*上一次*存进去的值
return ref.current;
}
// 使用
const Demo = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
<div>
<p>现在是: {count}</p>
<p>刚才还是: {prevCount}</p>
</div>
);
};
原理分析：
usePrevious 返回 undefined。Render 结束，Effect 运行，ref.current 变为 0。usePrevious 返回 ref.current (也就是 0)。Render 结束，Effect 运行，ref.current 变为 1。你看，不需要任何魔法，只是利用了 React 的执行顺序，就实现了“时光倒流”。
有时候，我们希望 useEffect 只有在依赖变化时执行，而不要在组件刚挂载（Mount）时执行。
比如：用户修改搜索词时发请求，但刚进页面时不要发。
useEffect(() => {
// 如果是第一次，把开关关掉，直接 return，啥也不干
if (isFirstMount.current) {
isFirstMount.current = false;
return;
}
// 从第二次开始，这里的逻辑才会执行
console.log('搜索词变了，发起请求...');
}, [query]);
这简直就是控制 Effect 执行时机的最强“阀门”。
useRef 的红线虽然 useRef 很爽，既能穿透闭包，又能静默更新，但请记住一条铁律：
永远不要在渲染期间（Rendering Logic）读取或写入 ref.current。
const count = useRef(0);
// ❌ 报错警告！这是不纯的操作！
// 在渲染过程中修改 ref，会导致行为不可预测
count.current = count.current + 1;
// ❌ 也不要直接读来做渲染判断
// 因为 ref 变了不会触发重绘，视图可能不会更新
return <div>{count.current}</div>;
};
正确的使用姿势：
useEffect 里读/写。Event Handler（点击事件等）里读/写。useRef 是 React 留给我们的后门，当你发现 useState 让你的组件频繁渲染卡顿，或者 useEffect 的依赖数组让你头秃时，不妨想想这个静音的小盒子。
好了，收工。
下期预告：你真的以为你会写
useCallback和useMemo吗？我打赌你的代码里 80% 的useMemo都在做负优化。下一篇，我们来聊聊 React 性能优化的“安慰剂效应”。
