ref='string'은 왜 "disclosed"입니까?

ref='string'은 왜 "disclosed"입니까?

React 문서에는 다음과 같이 기술되어 있습니다.

또한 React는 (콜백 대신) 문자열을 모든 컴포넌트에 대한 참조 소품으로 사용할 수 있습니다.단, 이 접근방식은 현시점에서는 거의 레거시입니다.

https://facebook.github.io/react/docs/more-about-refs.html

다음 예를 들어 보겠습니다.

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref={input => (this._input = input)} />;
  }
  action() {
    console.log(this._input.value);
  }
}

왜 다음 대신 이 방법을 사용해야 합니까?

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref='input' />;
  }
  action() {
    console.log(this.refs.input.value);
  }
}

?

두 번째 예는 훨씬 더 깨끗하고 쉬워 보입니다.
스트링 방식이 폐지될 위험이 있습니까?

NB: 문서상의 성명에 대한 "공식적인" 답변을 찾고 있습니다.개인적인 취향을 묻는 것이 아닙니다.

오래된 refs API는 좀 더 단순하지만 콜백에서 사용되는 경우와 같이 일부 엣지 케이스에서는 어려워질 수 있습니다.모든 종류의 정적 분석도 골칫거리입니다.콜백 기반의 API는 약간의 상세함만 더하면 문자열 API가 할 수 있는 모든 것을 할 수 있습니다.

class Repeat extends React.Component {
  render() {
    return <ul> {
      [...Array(+this.props.times)].map((_, i) => {
        return <li key={i}> { this.props.template(i)    } </li>
      })
    } </ul>
  }
}

class Hello extends React.Component {
  constructor() {
    super();
    this.refDict = {};
  }

  render() {
    return <Repeat times="3" template={i => <span ref= {el => this.refDict[i] = el}> Hello {i} </span>} />
           {/*                                    ^^^ Try doing this with the string API          */}
  }
}

string based api에서 발생할 수 있는 문제에 대한 자세한 설명과 보다 포괄적인 목록은 콜백 기반 api가 도입된 문제 #1373에서 확인할 수 있습니다.문제 설명의 목록을 여기에 첨부합니다.

ref API가 깨진 것은 몇 가지 측면입니다.

• Closure Compiler Advanced Mode와 호환되려면 이 .refs ['myname']를 문자열로 참조해야 합니다.

• 단일 인스턴스의 여러 소유자의 개념은 허용되지 않습니다.

• 마법의 동적 문자열은 VM의 최적화를 방해할 수 있습니다.

• 동기적으로 해결되기 때문에 항상 일관성이 있어야 합니다.즉, 렌더링의 비동기 배치가 잠재적인 버그를 발생시킵니다.

• 현재 형제 참조를 가져올 수 있는 후크가 있으므로 한 구성 요소가 해당 형제 참조를 컨텍스트 참조로 참조하도록 할 수 있습니다.이것은 한 단계만 작동합니다.이로 인해 캡슐화로 이들 중 하나를 랩할 수 없게 됩니다.

• 정적으로 입력할 수 없습니다.TypeScript와 같은 언어에서는 언제든지 캐스팅해야 합니다.

• 아이에 의해 호출된 콜백에서 참조를 올바른 "소유자"에게 첨부할 수 있는 방법은 없습니다. <Child renderer={index => <div ref="test">{index}</div>} />-- 이 참조는 현재 소유자가 아닌 콜백이 발행된 곳에 첨부됩니다.

---

이 문서에서는 콜백 기반의 API가 권장되는 접근법임을 명확히 하기 위해 오래된 문자열 API를 "레거시"라고 부릅니다.이 접근법은 이 커밋 및 이 PR에서 설명되고 있습니다.이러한 접근법은 처음에 이들 스테이트먼트를 매뉴얼에 기재한 것입니다.또한 일부 코멘트는 문자열 기반 refs api가 어느 시점에서 폐지될 수 있음을 시사합니다.

원래 danabramov가 https://news.ycombinator.com/edit?id=12093234에 게시했습니다.

1. 문자열 참조는 합성할 수 없습니다.래핑 구성 요소가 기존 문자열 참조를 이미 가지고 있는 경우 참조에서 하위로 "스누핑"할 수 없습니다.한편, 콜백 레퍼런스에는 소유자가 1명도 없기 때문에 언제든지 작성할 수 있습니다.
2. 문자열 참조는 흐름과 같은 정적 분석에서는 작동하지 않습니다. 하는 마법을 수 .this.refs을 하다이치
3. 문자열 참조의 소유자는 현재 실행 중인 구성 요소에 의해 결정됩니다.인 「를 들면, 「렌더 콜백」패턴)에서는,<DataTable renderRow={this.renderRow} />잘못된 컴포넌트가 참조를 소유합니다(결국 참조는DataTable가 ""를 정의하는 renderRow를 참조해 주세요.
4. String refs 리액트.이것은 문제가 된다 왜냐하면 그것은react stateful을하기 때문에 module stateful, module stateful, module stateful, module stateful, module stateful, module stateful, module stateful, module stateful, module , modulereact모듈이 번들 내에 중복되어 있습니다.

언급URL : https://stackoverflow.com/questions/37468913/why-ref-string-is-legacy