소품을 통해 하위 구성 요소의 상태를 초기화하는 것이 맞습니까?

Question

상위 컴포넌트에서 하위 컴포넌트의 상태를 초기화해야합니다. 그래서 다음과 같은 방법으로 처리합니다 :

var Timer = React.createClass({ 
    getInitialState: function() { 
      return {timer: this.props.timer}; 
    }, 
    render() { 
      return <div>{this.state.timer}</div> 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
      return {timer: 1000}; 
    }, 
    render() { 
      return <Timer timer={this.state.timer}> 
    } 
}); 

이 방법으로 타이머 구성 요소의 상태를 초기화하는 것이 맞습니까?

Answer 1

나는 그것을 그렇게하는 것이 좋습니다라고 생각합니다.

귀하의 경우에는 구성 요소 내부에 timer의 값을 변경한다고 가정합니다 (일부 사용자 상호 작용에 의해). state의 값은 일부 instance variable이기 때문에 그 값은 구성 요소 상태를 반영하여 변경 될 수 있습니다. state.timer 값을 변경해도 외부의 timer 값은 변경되지 않습니다. 당신이 구성 요소 내부 this.state.timer의 값을 변경하지 않을 경우

, 당신은 그냥 같이 사용할 수 있습니다

render() { 
     return <div>{this.props.timer}</div> 
} 

Answer 2

참고 :이 정말 반작용 특정 끝없는 , 그러한 안티 패턴은 일반적으로 코드에서 종종 발생하기 때문에; 이 경우, React는 단순히 그것들을 더 분명하게 지적합니다. getInitialState의 상태를 생성하기 위해 사용 소품

종종 실제 데이터, 즉 "source of truth"의 duplication로 이끈다. 이는 getInitialState가 컴포넌트가 처음 생성 될 때만 호출되기 때문입니다.

온 - 더 - 플라이 (on-the-fly) 값을 계산하여 나중에 동기화되지 않고 유지 보수 문제가 발생하지 않도록하십시오.