[reactjs] 전 이적으로 도달 할 수있는 모든 상태를 포함하는 반응 구성 요소를 어떻게 재설정 할 수 있습니까?

Program / 글쓴이

나는 때때로 내가 재설정하고 싶은 개념적으로 상태 저장되는 반응 구성 요소를 가지고 있습니다. 이상적인 동작은 이전 구성 요소를 제거하고 새롭고 깨끗한 구성 요소를 읽는 것과 같습니다.

React는 setState컴포넌트 자체의 명시 적 상태를 설정할 수 있는 방법 을 제공 하지만 브라우저 포커스 및 양식 상태와 같은 암시 적 상태를 제외하고 자식의 상태도 제외합니다. 모든 간접적 상태를 포착하는 것은 까다로운 작업 일 수 있으며, 모든 새로운 놀라운 상태를 가지고 두더지를 치는 것보다 엄격하고 완전하게 해결하는 것이 좋습니다.

이를위한 API 또는 패턴이 있습니까?

편집 : 나는 사소한 예제 시연했다 this.replaceState(this.getInitialState())접근을하고 그것을 대조 this.setState(this.getInitialState())방법 : jsfiddle을 – replaceState더 강력하다.

답변

언급 한 암시 적 브라우저 상태와 자식 상태가 재설정 되도록하려면 ;에서 반환 한 루트 수준 구성 요소에 key속성 을 추가 할 수 있습니다 render. 변경되면 해당 구성 요소는 버려지고 처음부터 생성됩니다.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

개별 구성 요소의 로컬 상태를 재설정하는 바로 가기는 없습니다.

답변

실제로 피하고 대신 replaceState사용해야 setState합니다.

문서에는 replaceState“React의 향후 버전에서 완전히 제거 될 수 있습니다.”라고되어 있습니다. replaceStateReact의 철학에 맞지 않기 때문에 확실히 제거 될 것이라고 생각합니다 . React 구성 요소가 스위스 칼처럼 느껴지기 시작하도록 도와줍니다. 이것은 React 구성 요소가 점점 작아지고 목적에 맞게 자연스럽게 성장하는 것을 방해합니다.

React에서 일반화 또는 전문화에 오류가있는 경우 : 전문화를 목표로합니다. 추론 적으로 구성 요소의 상태 트리에는 특정 간결함이 있어야합니다 (브랜드를 휩쓸고있는 신제품을 비계하는 경우이 규칙을 세련되게 위반하는 것이 좋습니다).

어쨌든 이것이 당신이하는 방법입니다. 위의 Ben의 (허용되는) 답변과 유사하지만 다음과 같습니다.

this.setState(this.getInitialState());

또한 (Ben도 말했듯이) “브라우저 상태”를 재설정하려면 해당 DOM 노드를 제거해야합니다. vdom의 힘을 활용하고 key해당 구성 요소에 대한 새로운 소품을 사용하십시오 . 새 렌더링은 해당 구성 요소 도매를 대체합니다.

참조 : https://facebook.github.io/react/docs/component-api.html#replacestate

답변

key다시 초기화해야하는 요소에 속성을 추가 하면 props또는 state요소가 변경 될 때마다 속성이 다시로드됩니다 .

key = {new Date (). getTime ()}

다음은 예입니다.

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}

답변