Refs 提供了一種訪問(wèn)在 render 方法中創(chuàng)建的 DOM 節(jié)點(diǎn)（小程序原生組件）或 Taro 組件實(shí)例的方式。

在常規(guī)的 Taro 數(shù)據(jù)流中，props 是父組件與子組件交互的唯一方式。要修改子元素，你需要用新的 props 去重新渲染子元素。然而，在少數(shù)情況下，你需要在常規(guī)數(shù)據(jù)流外強(qiáng)制修改子元素。被修改的子元素可以是 Taro 組件實(shí)例，或者是一個(gè) DOM 元素。在這種情況下，Taro 提供了解決辦法。

不要過(guò)度使用 Refs

你可能首先會(huì)想到在你的應(yīng)用程序中使用 refs 來(lái)更新組件。如果是這種情況，請(qǐng)花一點(diǎn)時(shí)間，更多的關(guān)注在組件層中使用 state。在組件層中，通常較高級(jí)別的 state 更為清晰。例如，相比于在 Dialog 組件中暴露 open() 和 close() 方法，最好傳遞 isOpen 屬性。

創(chuàng)建 Refs

Taro 支持使用字符串和函數(shù)兩種方式創(chuàng)建 Ref。

使用字符串創(chuàng)建 ref

通過(guò)字符串創(chuàng)建 ref 只需要把一個(gè)字符串的名稱賦給 ref prop。然后就通過(guò) this.refs 訪問(wèn)到被定義的組件實(shí)例或 DOM 元素（小程序原生組件）。在微信小程序中，如果 ref 的是小程序原生組件，那么相當(dāng)于使用 createSeletorQuery 取到小程序原生組件實(shí)例，如果是在 H5(Web) 環(huán)境中使用，那訪問(wèn)到的將是 @tarojs/components 對(duì)應(yīng)組件的組件實(shí)例。

class MyComponent extends Component {

  componentDidMount () {
    // 如果 ref 的是小程序原生組件，那只有在 didMount 生命周期之后才能通過(guò)
    // this.refs.input 訪問(wèn)到小程序原生組件
    if (process.env.TARO_ENV === 'weapp') {
      // 這里 this.refs.input 訪問(wèn)的時(shí)候通過(guò) `wx.createSeletorQuery` 取到的小程序原生組件
    } else if (process.env.TARO_ENV === 'h5') {
      // 這里 this.refs.input 訪問(wèn)到的是 `@tarojs/components` 的 `Input` 組件實(shí)例
    }
  }

  render () {
    return <Input ref='input' />
  }
}

通過(guò)函數(shù)創(chuàng)建 ref

你也可以通過(guò)傳遞一個(gè)函數(shù)創(chuàng)建 ref, 在函數(shù)中被引用的組件會(huì)作為函數(shù)的第一個(gè)參數(shù)傳遞。如果是被引用的組件是自定義組件，那可以在任意的生命周期訪問(wèn)引用。

不管在任何情況下，Taro 都推薦你使用函數(shù)的方式創(chuàng)建 ref。

class MyComponent extends Component {

  roar () {
    // 會(huì)打印 `miao, miao, miao~`
    this.cat.miao()
  }

  refCat = (node) => this.cat = node // `this.cat` 會(huì)變成 `Cat` 組件實(shí)例的引用

  render () {
    return <Cat ref={this.refCat} />
  }
}

class Cat extends Component {
  miao () {
    console.log('miao, miao, miao~')
  }

  render () {
    return <View />
  }
}

通過(guò) createRef 創(chuàng)建 ref

自 v1.3.0-beta.0 起 支持

Refs 還是使用 Taro.createRef() 創(chuàng)建的，并通過(guò) ref 屬性附加到 Taro 元素。在構(gòu)造組件時(shí)，通常將 Refs 分配給實(shí)例屬性，以便可以在整個(gè)組件中引用它們。

當(dāng) ref 被傳遞給 render 中的元素時(shí)，對(duì)該節(jié)點(diǎn)的引用可以在 ref 的 current 屬性中被訪問(wèn)。

class MyComponent extends Component {

  this.cat = Taro.createRef()

  roar () {
    // 會(huì)打印 `miao, miao, miao~`
    this.cat.current.miao()
  }

  render () {
    return <Cat ref={this.cat} />
  }
}

class Cat extends Component {
  miao () {
    console.log('miao, miao, miao~')
  }

  render () {
    return <View />
  }
}