useRef

• useRef 返回一个对象，返回的ref对象在组件的整个生命周期保持不变
• 最常用的ref是两种对象
  • 用法1: 引入DOM（或者组件，组件必须是类组件）元素,因为只有类组件有实例，函数组件是没实例的，如果想获取函数组件的子元素，一般是将ref当作属性传递给函数组件。只有类组件和dom元素才会有ref属性
  • 用饭2: 保存一个数据，这个数据在组件的整个生命周期中可以保存

案例一 ： 引用DOM

import React,{useRef} from 'react'
class TestCpn extends React.Component{
  render() {
    return (
      <h2>TestCpn</h2>
    )
  }
}
export default function RefHookDemo01 () {
  const titleRef = useRef()
  const inputRef = useRef()
  const testRef = useRef() 

  function changeDOM() {
    titleRef.current.innerHTML = 'helloWorld'
    inputRef.current.focus()
    console.log(testRef.current);
  }

  return (
    <div>
      <h2 ref={titleRef}> RefHookDemo01 </h2>
      <input ref={inputRef} type="text" />
      <TestCpn ref={testRef}/>
      <button onClick={e=>changeDOM()} >修改DOM</button>
    </div>
  )

}

案列二： 使用ref保存上一次的某个值

import React, {
  useState,
  useRef,
  useEffect
} from 'react'
export default function RefHookDemo02() {
  const [count, setcount] = useState(0)
  const numRef = useRef(count)

  useEffect(()=> {
    numRef.current = count
  },[count])
  return (
    <div>
      <h2>count 上一次的值： {numRef.current}</h2>
      <h2>count 这一次的值： {count}</h2>
      <button onClick={e=>setcount(count+ 10)}>+10</button>
    </div>
  )
}