Câu trả lời gần đây hơn với một ví dụ, trong đó sử dụng React.useState
Giữ trạng thái trong thành phần cha mẹ là cách được khuyến nghị. Phụ huynh cần có quyền truy cập vào nó vì nó quản lý nó trên hai thành phần con. Chuyển nó sang trạng thái toàn cầu, giống như trạng thái được quản lý bởi Redux, không được khuyến nghị cho cùng một lý do tại sao biến toàn cầu tồi tệ hơn cục bộ nói chung trong công nghệ phần mềm.
Khi trạng thái nằm trong thành phần cha mẹ, đứa trẻ có thể biến đổi nó nếu cha mẹ cho đứa trẻ valuevà người onChangexử lý trong đạo cụ (đôi khi nó được gọi là liên kết giá trị hoặc mẫu liên kết trạng thái ). Đây là cách bạn sẽ làm điều đó với hook:
function Parent() {
var [state, setState] = React.useState('initial input value');
return <>
<Child1 value={state} onChange={(v) => setState(v)} />
<Child2 value={state}>
</>
}
function Child1(props) {
return <input
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
}
function Child2(props) {
return <p>Content of the state {props.value}</p>
}
Toàn bộ thành phần cha mẹ sẽ kết xuất lại khi thay đổi đầu vào ở con, điều này có thể không thành vấn đề nếu thành phần cha mẹ nhỏ / nhanh để kết xuất lại. Hiệu suất kết xuất lại của thành phần cha mẹ vẫn có thể là một vấn đề trong trường hợp chung (ví dụ như các biểu mẫu lớn). Đây là vấn đề được giải quyết trong trường hợp của bạn (xem bên dưới).
Mẫu liên kết trạng thái và không có kết xuất lại cha mẹ dễ dàng thực hiện hơn bằng thư viện của bên thứ 3, như Hookstate - siêu nạpReact.useState để bao gồm nhiều trường hợp sử dụng, bao gồm cả trường hợp của bạn. (Tuyên bố miễn trừ trách nhiệm: Tôi là tác giả của dự án).
Đây là cách nó sẽ trông như thế nào với Hookstate. Child1sẽ thay đổi đầu vào, Child2sẽ phản ứng với nó. Parentsẽ giữ trạng thái nhưng sẽ không kết xuất lại khi thay đổi trạng thái, chỉ Child1và Child2sẽ.
import { useStateLink } from '@hookstate/core';
function Parent() {
var state = useStateLink('initial input value');
return <>
<Child1 state={state} />
<Child2 state={state}>
</>
}
function Child1(props) {
// to avoid parent re-render use local state,
// could use `props.state` instead of `state` below instead
var state = useStateLink(props.state)
return <input
value={state.get()}
onChange={e => state.set(e.target.value)}
/>
}
function Child2(props) {
// to avoid parent re-render use local state,
// could use `props.state` instead of `state` below instead
var state = useStateLink(props.state)
return <p>Content of the state {state.get()}</p>
}
PS: có nhiều ví dụ khác ở đây bao gồm các kịch bản tương tự và phức tạp hơn, bao gồm dữ liệu lồng nhau sâu, xác thực trạng thái, trạng thái toàn cầu với setStatehook, v.v. Ngoài ra còn có ứng dụng mẫu hoàn chỉnh trực tuyến , sử dụng Hookstate và kỹ thuật được giải thích ở trên.
