예제를 사용하는 최신 답변 React.useState
부모 구성 요소의 상태를 유지하는 것이 좋습니다. 부모는 두 개의 자식 구성 요소를 관리하기 때문에 액세스 권한이 있어야합니다. Redux에서 관리하는 것과 같이 전역 상태로 옮기는 것은 소프트웨어 엔지니어링에서 전역 변수가 일반적으로 로컬보다 나쁜 이유와 같은 이유로 권장 되지 않습니다 .
상태가 부모 구성 요소에있을 때 부모가 자식 value과 onChange처리기를 props (때로는 값 링크 또는 상태 링크 패턴 이라고 함)에 제공하면 자식은이를 변경할 수 있습니다 . 후크로 수행하는 방법은 다음과 같습니다.
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>
}
전체 부모 구성 요소는 자식의 입력 변경시 다시 렌더링되며, 부모 구성 요소가 작거나 다시 렌더링하기에 빠르면 문제가되지 않을 수 있습니다. 부모 구성 요소의 다시 렌더링 성능은 여전히 일반적인 경우에 문제가 될 수 있습니다 (예 : 큰 양식). 이것은 귀하의 경우 해결 된 문제입니다 (아래 참조).
주 링크 패턴 과 부모를 가지지 다시 렌더링 과 같은 제 3 자 라이브러리를 사용하여 구현하기가 쉽다 Hookstate - 슈퍼 React.useState당신의 일을 포함하여 사용 사례 커버 다양한에 있습니다. (면책 조항 : 나는 프로젝트의 저자입니다).
다음은 Hookstate에서 어떻게 보이는지입니다. Child1입력을 변경하고 Child2반응합니다. Parent에만 상태를 유지하지만 상태 변경에 다시 렌더링하지 않습니다 Child1및 Child2것입니다.
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>
}
추신 : 여기 에는 깊게 중첩 된 데이터, 상태 유효성 검사, setState후크가있는 전역 상태 등을 포함하여 유사하고 복잡한 시나리오를 다루는 더 많은 예제 가 있습니다 . Hookstate 및 위에서 설명한 기술을 사용하는 완전한 샘플 응용 프로그램이 온라인 에 있습니다.
