소품 대 메소드 호출을 통해 데이터 전달하기

Question

텍스트 입력란과 하위 구성 요소 인 Y를 렌더링하는 구성 요소 X가 있다고 가정 해보십시오. Y는 입력란의 텍스트를 사용하여 다른 것을 렌더링합니다.

데이터를 가져 오기 위해 X는 텍스트 필드에서 변경 이벤트를 수신 한 다음 ref를 통해 업데이트 된 내용을 가져옵니다.

이제 데이터를 두 가지 방법으로 어린이 Y에게 전달할 수 있습니다. <Y something={data}/> 등

의 렌더링 방법은 트리거되고, 여기서 I는 Y에 데이터를 전달

1) X 저장 상태에있는 새로운 데이터 있도록하여 소품

2) X가 (REF)를 사용하여 Y에 대한 메소드 호출 this.refs.y.setSomething(data)입니다. 이 경우 X의 상태로 데이터를 저장할 필요가 없습니다.

X에 상태를 저장하는 것과 별개로 하나를 선택하는 이유는 무엇입니까?

Answer 1

documentation에서와 같이 소품을 사용하여 하위 구성 요소에 데이터를 전달해야합니다. 소포를 하위 구성 요소의 함수 인수로 생각할 수 있습니다.

React에서이 작업을 수행하는 관용적 인 방법 이외에도 몇 가지 이유를 생각해 볼 수 있습니다. 첫째, this.refs.y.setSomething(data)과 같은 메소드를 호출하면 Y에 상태를 저장하는 코드를 구현해야합니다. 따라서 X에서 상태를 설정하지 않아도되지만 대신 Y에서 상태를 수행해야합니다.

무엇보다 X가 다시 렌더링하는 동안 Y를 마운트 해제 한 다음 나중에 다시 마운트하면 Y에서 상태가 손실됩니다.하지만 소품을 전달하는 경우 Y는 전에 동일한 소품을받습니다. 마운트 해제 된 후에