React优化技巧——避免state层级过高

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

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

原代码：

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>}
    </>
  );
}

优化后

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更易于阅读。
• 避免不必要的渲染来提高性能。