你是非常可爱的人,真应该遇到最好的人,我也希望我就是。——《爱你就像爱生命》

今天从Cory House @housecor看到一个优化技巧随笔记一下,希望下次编写时候可以考虑

原代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Product() {
const [rating, setRating] = useState(null);

return (
<>
<h1>Product</h1>
<ProductRating rating={rating} setRating={setRating} />
</>
);
}

function ProductRating({ rating, setRating }) {
return (
<>
<label htmlFor="rating">Rating</label>
<input
type="number"
id="rating"
onChange={(e) => setRating(parseInt(e.target.value))}
/>
{rating && <p>Rating is {rating}</p>}
</>
);
}

优化后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Product() {
return (
<>
<h1>Product</h1>
<ProductRating />
</>
);
}

function ProductRating() {
const [rating, setRating] = useState(null);

return (
<>
<label htmlFor="rating">Rating</label>
<input
type="number"
id="rating"
onChange={(e) => setRating(parseInt(e.target.value))}
/>
{rating && <p>Rating is {rating}</p>}
</>
);
}

如果state仅传递给一个子组件,那么级别太高了。应该将其下移给子组件。
好处:

  • 消除不必要的props
  • 使state更易于阅读。
  • 避免不必要的渲染来提高性能。