1. useRef
2. forwardRef

1. useRef

• useRef
  • 用于在一个组件不断render保持不变的值
  • 初始化: const count = useRef(0)
  • 读取: count.current
• useRef在变化是不会自动render
  • 如果想要当变化重新渲染UI,需要如下写法

    function App(){
        const count = useRef(0)
        const [n,setN] = useState(0)
        const [_,set_] = useState(0)
        const addN =()=>{
            count.current+=1
            set_(Math.random())
        }
        return (
            <div>
                <div>
                    ref:{count.current}
                    <button onClick={addN}>addN</button>
                </div>
​
            </div>
        )
​
    }
​

2. forwardRef

• useRef的props无法传递ref属性
• forwarRef可以实现ref的传递
• 两次ref传递得到button的引用
• 用法
  • 可以用来引用dom对象
  • 也可以用来引用普通对象 基本使用

    function App(){
        const buttonRef = useRef(null)
        return (
            <div>
                <Button3 ref={buttonRef}>button</Button3>
            </div>
        )
    }
​
    const Button3 = React.forwardRef((props,ref)=>{
        return(
            <button ref={ref} {...props}></button>
        )
    })