Reactガイドを読んでいくその116

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

レガシーな文字列 ref API の使用に対する警告

これからReactを始める場合はそこまで気にする必要はないが、Reactはrefを管理する方法としてレガシーとコールバックの二つのAPIを提供していた。
文字列refAPIは便利だったが、不都合な点があり、コールバック形式を正式に推奨するようになって行った。

リンク先をざくっと読んだ感じ、refAPI(日本語版は文字列APIって訳してるっぽい)がハングしてしまうらしい。

github.com

React16.3では第３の選択肢として上記の問題を避けてうまく使えるようにしたらしい。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

オブジェクトによる ref は文字列 ref を置きかえるために追加されたので、 strict モードでは文字列 ref の使用に対して警告が出る。

今日はここまで。