하위 구성 요소 업데이트 상위 구성 요소

Question

하위 구성 요소가 상위 구성 요소를 업데이트하는 것이 좋은지 궁금합니다.

class Parent extends React.Component{ 
    state = { 
    name : '' 
    } 
    changeState = ((state) => { 
    this.setState(state) 
    }) 
    submit = (() => { 
    // send state to api.. 
    }) 
    render(){ 
    return(
     <div> 
     <Child changeState={this.changeState} {...this.state}/> 
     <button onClick={this.submit} /> 
     </div> 
    ) 
    } 
} 



class Child extends React.Component{ 
    change = ((e) => { 
    this.props.changeState({ 
     name : e.target.value 
    }) 
    }) 
    render(){ 
    return(
     <input onChange={this.change} value={this.props.name} /> 
    ) 
    } 
} 

나는이 방법은 방법을 제출한다 사용하는 이유를 다음과 같이 소스 코드에서
.
많은 입력 태그가 있고이를 모두 바인딩하려고합니다.

하지만이 방법이 좋은지 확실하지 않습니다.
입력 할 때 부모 구성 요소는 항상 다시 렌더링됩니다.
좋지 않다고 생각합니다. (실제로 내 생각은 ...)
맞습니까?

Answer 1

나는이 방법으로 아이의 부모 상태를 업데이트했다. 제대로 작동합니다. 하지만 구성 요소가 복잡해집니다.

귀하의 경우 (텍스트 입력 요소에 대해이 작업을 수행한다고 가정) 작은 입력 구성 요소에 대해서는이 방법을 사용하는 것이 좋지 않을 것이라고 생각합니다. 키보드의 키를 누를 때마다 부모 구성 요소가 업데이트를 시도하기 때문입니다.

그러나 입력 요소 집합을 래핑하고 상위 구성 요소에 더 큰 개체를 전달하는 것이 좋습니다. 당신은 사용할 수

는

이 shouldComponentUpdate https://reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) { 
    if (this.props.name != nextProps.name) { 
    return true; 
    } else { 
    return false; 
    } 
} 

다음

nextProps은 당신이받는 소품 (업데이트)하고 참조하는 부모 요소의 렌더링을 제어하기 위해 라이프 사이클 방법 shouldComponentUpdate() 메소드를 반응 "이것으로 현재의 소품 값을 참조 할 수 있습니다.소품 "

그리고 렌더링 true를 반환하고 렌더링을 건너 거짓.

Answer 2

부모의 재 렌더링은 낭비되지 않는 한 문제가되지 않습니다. Redux를 사용하지 않는 한, 이것이 상태를 관리하는 올바른 방법이라고 생각합니다. 즉, 부모 구성 요소 내부에서 자식을 사용하여 상태를 업데이트하는 것입니다. 이 방법으로 양식을 controlled component으로 만들었습니다.
다음 페이지가 유용 할 것이라고 생각합니다. https://scotch.io/courses/getting-started-with-react/parent-child-component-communication

Answer 3

사용자가 입력 할 때 검증을 수행하면 ok입니다. 'onChange'이벤트를 'onBlur'로 변경하십시오.

Answer 4

다른 여러 형제가 동일한 값을 참조하려는 경우 상태를 들어 올려 부모에서 업데이트하는 것이 좋습니다. 복잡하고 깊게 중첩 된 소품 및 상태가없는 한 부모와 자녀 구성 요소를 순수하게 만들 때 최적화 할 수 있습니다. React docs에 따르면

:

React.PureComponent 정확히 React.Component 유사하지만 얕은 소품 및 상태 비교와 shouldComponentUpdate() 구현합니다. React 구성 요소의 render() 함수가 동일한 소품 및 상태로 동일한 결과를 렌더링하는 경우 성능 향상을 위해 React.PureComponent을 사용할 수 있습니다.