Hook 第 1 篇

序言：

搞懂Hooks的第一篇，犄角旮旯的也捋清楚，目標(biāo)要打通 React 這塊的源碼！

ref 的使用

普通的類組件有實(shí)例所以可以用過(guò) React.createRef() 掛載到節(jié)點(diǎn)或組件上，然后通過(guò) this 獲取到該節(jié)點(diǎn)或組件。

class RefTest extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    componentDidMount(){
        console.log(this.myRef.current);
    }
    render(){
        return <input ref={this.myRef}/>
    }
}

useImperativeHandle 的使用

正常情況下 ref 是不能掛在到函數(shù)組件上的，因?yàn)楹瘮?shù)組件沒(méi)有實(shí)例，但是 useImperativeHandle 為我們提供了一個(gè)類似實(shí)例的東西。它幫助我們通過(guò) useImperativeHandle 的第 2 個(gè)參數(shù)，所返回的對(duì)象的內(nèi)容掛載到 父組件的 ref.current 上。

forwardRef會(huì)創(chuàng)建一個(gè)React組件，這個(gè)組件能夠?qū)⑵浣邮艿?ref 屬性轉(zhuǎn)發(fā)到其組件樹(shù)下的另一個(gè)組件中。

import React, { forwardRef, useImperativeHandle, useEffect, useRef } from 'react'

const TestRef = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    open() {
      console.log("open")
    }
  }))
})

function App () {
  const ref = useRef()
  useEffect(() => {
    ref.current.open()
  },[])
  
  return(
    <>
      <div>石小陽(yáng)</div>
      <TestRef ref={ref}></TestRef>
    </>
  )
}
export default App

最后結(jié)果打印出了open。

result