2016-06-13 3 views
0

그래서 나는 Meteor and React를 배우는 초기 단계에 있으며 Todos list에 대한 튜토리얼을 완성했습니다.todos 튜토리얼 소품 vs 상태

구현시 완성 된 작업과 모든 작업간에 전환 할 수있는 체크 박스가 맨 위에 있습니다. 이것은 상태로 설정됩니다.

또한 완료 또는 완료되지 않은 작업을 표시 할 수있는 각 작업 옆에 확인란이 있습니다.

내 질문에,이 두 확인란은 실시간으로 변경되지만 전자는 상태 변수로 지정됩니까? 작업 확인란이 왜 소품입니까?

답변

1

글로벌 체크 박스는 단지 App 구성 요소의 상태에 연결됩니다.

Task 구성 요소의 로컬 확인란을 사용하면 더 복잡해집니다. 문제는 App 구성 요소가 모든 Task 개체에 대한 글로벌 지식이 필요하다는 것입니다. 완료된 작업을 숨 깁니다.

Task 구성 요소는 확인란 상태를 유지할 수 있지만 React 작동 방식은 아닙니다. React에서 부모 컴포넌트는 일반적으로 자식의 상태를 읽지 않지만 상태 자체를 보유하고 관련 정보를 자식에게 전달하여 렌더링 할 수 있도록합니다.

자식이 일부 상태를 업데이트해야하는 경우 글로벌 수준에서 (toggleCheckeddeleteThisTasktutorial에 있음) 부모가 알림을 받고 자식을 다시 렌더링하도록합니다. 다른 예는 here을 참조하십시오.

+0

감사합니다,하지만 난 각 작업의 확인 (완료 여부) 상태가 상태되지 않는 이유에 대한 자세한 혼란 것 같아. 나는 왜 쇼가 완료되었는지를 알 수 있다고 생각하지만, 각 태스크 옆에있는 체크 박스가 동적 일 때 왜 단지 소품에 불과하지는 않습니다. 두 가지 모두에 대한 코드를 살펴보면 this.state/props.task.property를 toggle 이벤트 핸들러에 바인드합니다.이 핸들러는 변수를 서버로 업데이트합니다. 단, showCompleted는 각 태스크의 체크가 소품을 사용하는 동안 상태를 사용합니다. 어떤 설명? – meteorite104

+0

전역 상태는 일시적입니다 (탭을 닫으면 사라집니다). "로컬"상태는 데이터베이스에 저장되므로 구성 요소에만 표시 될 수 있습니다. 로컬 상태로 저장할 수는 있지만 여기서는 쓸모가 없으므로 어쨌든 데이터베이스를 업데이트해야합니다. –