reactjs this.refs vs document.getElementBy아이디

reactjs this.refs vs document.getElementBy아이디

기본 양식만 있으면 그래도 해야 하나요?this.refs아니면 그냥 가든지document.getElementById?

기본적으로 다음과 같은 것을 의미합니다.

export default class ForgetPasswordComponent extends React.Component {
  constructor(props) {
    super(props);

    this.handleSendEmail = this.handleSendEmail.bind(this);
  }

  handleSendEmail(e) {
    e.preventDefault();

    // this.refs.email.value
    // document.getElementById('email').value
  }

  render() {
    <form onSubmit={this.handleSendEmail}>
      <input id="email" ref="email" type="text" />
      <input type="submit" />
    </form>
  }
}

한쪽을 다른 쪽보다 사용하는 데 단점이 있나요?

일반적으로는refs보다 낫다document.getElementById다른 리액트 코드와 일치하기 때문입니다.

반응에서는 모든 구성 요소 클래스에 여러 구성 요소 인스턴스를 포함할 수 있습니다.
@Isuru가 코멘트에서 지적했듯이:id리액션은 1페이지에 여러 개의 폼을 표시할 수 있으며 DOM에는 동일한 ID의 여러 입력이 포함되어 있기 때문에 위험합니다.그리고 그것은 허용되지 않는다.

참조를 사용하는 또 다른 장점은 설계상 참조를 정의하는 컨텍스트에서만 참조에 액세스할 수 있다는 것입니다.이 콘텍스트 이외의 정보에 액세스 할 필요가 있는 경우는, 소품이나 스테이트(및 스토어)를 사용할 필요가 있습니다.
단방향 데이터 흐름을 끊을 가능성이 적기 때문에 코드 관리가 어려워지기 때문에 이점이 있습니다.

NB: 거의 모든 경우에 레퍼런스를 회피할 수 있습니다.이 동영상에서 스티브 맥과이어(Netflix 선임 사용자 인터페이스 엔지니어)가 reactjs conf 2016(동영상 9:58m)에서 설명한 바와 같이, 넷플릭스는 참조를 사용하지 않는 것이 설계 원칙이다.
이 경우 이메일 입력 값을 폼 상태로 만들고 onChange 핸들러를 추가하여 전송 이벤트에서 상태 값을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/37273876/reactjs-this-refs-vs-document-getelementbyid