setState in 현재 상태를 기준으로

Question

React에서 상태 유지 구성 요소를 업데이트하는 경우 구성 요소가 현재 상태를 사용하여 새 상태를 업데이트하는 것은 좋지 않은 것으로 간주됩니다.

예를 들어, 필터가 열려 있는지 여부를 저장하는 클래스가있는 경우 성능면에서 다른 것보다 상태를 업데이트하는 옵션 중 하나입니까?

옵션 1 :

class Container extends Component { 
    state = { 
     show: false 
    } 

    show =() => this.setState({ show: true }) 

    hide =() => this.setState({ show: false }) 

    render() { 
     <ExternalComponent 
      show={this.show} 
      hide={this.hide} 
     /> 
    } 
} 

옵션 2 :

class Container extends Component { 
    state = { 
     show: false 
    } 

    toggleVisibility =() => this.setState({ show: !this.state.show }) 

    render() { 
     <ExternalComponent 
      toggleVisibility={this.toggleVisibility} 
     /> 
    } 
} 

옵션 3 :

구성 요소가 자신의 상태에 접근 아무 문제가 없습니다

class Container extends Component { 
    state = { 
     show: false 
    } 

    setShow = (newVal) => this.setState({ show: newVal }) 

    render() { 
     <ExternalComponent 
      setShow={this.setShow} 
     /> 
    } 
} 

Answer 1

. 쓰기 전용 상태는 대단히 유용하지 않습니다! 그러나 구성 요소 상태 또는 상태 변경 메서드를 다른 구성 요소에 노출 할 때는 매우주의해야합니다. 구성 요소 상태는 내부이며 잘 고려 된 인터페이스를 통해 외부에서 만 건드려야 구성 요소가 얽힌 엉망이되지 않습니다. 그러나,

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isToggleOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
    })); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     {this.state.isToggleOn ? 'ON' : 'OFF'} 
     </button> 
    ); 
    } 
} 

ReactDOM.render(
    <Toggle />, 
    document.getElementById('root') 
); 

참고 귀하의 예제에서 차이 :

는 사실, 당신의 예 # 2 in the React documentation 유사한 예를있다. this이 의미하는 바를 의미하도록하려면 toggle 메서드를 생성자에 바인딩해야합니다.

포장 구성 요소가 자식 ExternalComponent의 가시성을 추적하는 구성 요소 인 경우 하위 구성 요소에 토글 메서드를 전달하지 않고 래퍼가 일부 정렬의 숨김/표시 어포지먼트를 렌더링 할 것으로 기대합니다. 현재 가시성을 하위 구성 요소로 전달하거나 선택적으로 렌더링합니다 (선택적 렌더링을 사용하면 다시 활성화되었을 때 전체 하위 구성 요소가 다시 탑재되므로 값 비쌉니다.) 찢을 때보 다 숨길 수 있습니다. 그것을 아래로 만들고 그것을 재현). 래퍼는 가시성을 알고 있으며, 하위 구성 요소는 어떻게 결정되었는지, 왜 그 결정이 내려 졌는지 알 필요가 없으며 래퍼의 내부 상태를 만질 필요도 없습니다.

Answer 2

현재 상태 값을 사용하여 새 상태 값을 결정하는 데는 아무런 문제가 없습니다.

옵션 2는 코드가 적어 어떤 종류의 매력이 있습니까? 그러나 때로는 타사 구성 요소 (예 : Semantic UI React 모달)를 사용할 때 옵션 1을 사용해야 할 수도 있으며 정의해야하는 표시기와 숨기기 기능이 있습니다.

옵션 3도 좋습니다. 이 쇼/숨기기 이외의 다른 응용 프로그램에 사용합니다 (사실, 항상 입력 구성 요소를 제어 할 때 특히 많이 사용됩니다).