React JS:컴포넌트의 초기 상태를 전달하는 것이 안티패턴인 이유는 무엇입니까?

React JS:컴포넌트의 초기 상태를 전달하는 것이 안티패턴인 이유는 무엇입니까?

소켓을 사용하여 작은 ReactJS 대시보드를 만들었습니다.라이브 업데이트용 IO.대시보드를 업데이트했는데 제대로 했는지 잘 모르겠어요.

가장 신경이 쓰이는 것은 안티패턴 포스트로서 getInitialState의 Proposs입니다.서버로부터 라이브 갱신을 취득하는 대시보드를 작성했습니다.페이지를 로드하는 것 이외에는, 유저의 조작이 필요 없습니다.제가 읽은 바로는this.state하는 내용과 에는 컴포넌트의 재작성 여부를 결정하는 합니다.this.props직은은모모모모모

에 「」를 호출하면, 「」가 됩니다.React.render(<MyComponent />, ...)소품만 건네줄 수 있어요. 제, 든, 든, 든, 든, 모, 져, 져, 져, 져, in으로 끝납니다.따라서 초기 소품은 결국에this.state에는 다음과 같은 것이 모든 컴포넌트에는 다음과 같은 것이 있습니다.

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

내가 앞서 말한 블로그 포스트를 잘못 해석하지 않는 한, 그것은 반패턴이다.컴포넌트에 모든 붙이지 한 왜 수 없습니다.또한 모든 소품에 라벨을 다시 붙이지 않는 한 왜 안티패턴인지 이해할 수 없습니다.initial그 위에 올려놔요.어느 쪽인가 하면, 이것은 안티 패턴이라고 생각됩니다.왜냐하면 이전보다 더 많은 변수를 추적해야 하기 때문입니다(이것들은initial이치노

면책사항:제가 이 질문에 대답했을 때, 저는 바닐라 플럭스를 실장하기 위해 배우고 있었고, 그것에 대해 조금 회의적이었습니다.나중에 저는 모든 것을 Redux로 이행했습니다.조언 하나 하자면Redux 또는 MobX를 선택하시면 됩니다.아마도 당신은 더 이상 이 질문에 대한 답을 필요로 하지 않을 것이다.

를 컴포넌트로 prop'이 되는 이유는 '이기 때문입니다.getInitialState메서드는 컴포넌트가 처음 렌더링할 때만 호출됩니다.즉, 컴포넌트를 재렌더하여 다른 값을 전달하면prop컴포넌트는 처음 렌더링되었을 때부터 상태를 유지하기 때문에 컴포넌트는 이에 따라 반응하지 않습니다.오류가 발생하기 쉽습니다.

그리고 해야 할 일은 다음과 같습니다.

컴포넌트를 가능한 한 스테이트리스로 해 주세요.스테이트리스 컴포넌트는 입력에 근거해 출력을 렌더링하기 때문에 테스트하기 쉬워집니다.그렇게 간단해.

하지만..구성 요소 데이터가 변경됩니다.무국적자로 만들 수 없어

네, 대부분의 경우 가능합니다.그러기 위해서는 상태 홀더가 될 외부 컴포넌트를 선택합니다.이 예제를 사용하면Dashboard데이터를 포함하는 컴포넌트 및Widget완전히 스테이트리스인 컴포넌트.그Dashboard모든 데이터를 가져와서 여러 개를 렌더링하는 역할을 합니다.Widgets필요한 모든 것을 받을 수 있는props.

하지만 내 위젯에는 상태가 있습니다.사용자가 설정할 수 있습니다.스테이트리스로 하려면 어떻게 해야 하나요?

당신의.Widget처리하면, 에 포함되는 상태를 일으키는 이벤트를 개시할 수 있습니다.Dashboard모든 것이 변하다Widget재연계됩니다.'이벤트'를 생성한다.Widget가 있음으로써props기능을 수신할 수 있습니다.

좋습니다. 그러면 대시보드는 상태를 유지하지만 초기 상태를 대시보드에 전달하려면 어떻게 해야 합니까?

두 가지 옵션이 있습니다.가장 추천하는 것은 Ajax 콜을 발신하는 것입니다.Dashboard getInitialStatemethod를 사용하여 서버에서 초기 상태를 가져옵니다.또한 보다 정교한 데이터 관리 방법인 Flux를 사용할 수도 있습니다.플럭스는 구현이라기보다는 패턴에 가깝습니다.Facebook의 구현과 함께 순수한 플럭스를 사용할 수 있습니다.Dispatcher단, Redux, Alt 또는 Fluxor와 같은 타사 구현을 사용할 수 있습니다.

이 초기 를 「1」 「1」 「1」 「1」 「1」 「1」 「1」 「1」 「1」 「1」 「1」 「1」 「2」로서 전달할 수도 .propDashboard에 like likeinitialData를 들어 이 첫 번째 에 나중에할 수 그러나 이 경로를 선택하면 첫 번째 렌더링 이후의 상태를 "기억"하기 때문에 나중에 다른 초기 상태를 전달할 수 없습니다.

옵스

당신의 정의는 완전히 맞지 않습니다.

상태는 가변 데이터, 즉 구성 요소 수명 주기 동안 변경될 데이터를 저장하는 데 사용됩니다.상태 변경은 다음을 통해 수행해야 합니다.setState이치노

소품은 컴포넌트에 양도할 수 없는 데이터를 전달하기 위해 사용됩니다.컴포넌트의 라이프 사이클 중에 변경되어서는 안 됩니다.소품만 사용하는 컴포넌트는 스테이트리스입니다.

이는 "초기 상태를 컴포넌트에 전달하는 방법"에 관한 관련 자료입니다.

언급URL : https://stackoverflow.com/questions/28785106/reactjs-why-is-passing-the-component-initial-state-a-prop-an-anti-pattern