Khi hai component cần chia sẻ cùng một state, bạn di chuyển ("nâng") state đó lên tổ tiên chung gần nhất của chúng và truyền nó xuống qua props, để có một nguồn sự thật duy nhất.
jsx
() {
[query, setQuery] = ();
(
);
}
Khi hai component cần chia sẻ cùng một state, bạn di chuyển ("nâng") state đó lên tổ tiên chung gần nhất của chúng và truyền nó xuống qua props, để có một nguồn sự thật duy nhất.
() {
[query, setQuery] = ();
(
);
}
Nếu mỗi con giữ query riêng, chúng sẽ lệch nhau. Nâng nó lên nghĩa là input và kết quả luôn đồng thuận.
Nâng state lên cao có thể buộc bạn truyền props qua nhiều component trung gian không dùng đến chúng:
<App user={user}>
<Layout user={user}> {/* chỉ chuyển tiếp */}
<Sidebar user={user}> {/* chỉ chuyển tiếp */}
<Avatar user={user} /> {/* cuối cùng dùng ở đây */}
children để dữ liệu ở lại nơi nó được dùng thay vì luồn qua.Nguyên tắc dẫn đường: nâng state chỉ cao đến mức cần — không cao hơn. Nâng quá mức gây render lại rộng và prop drilling; nâng chưa đủ gây các bản sao lệch nhau.