龚箭

hooks组件详解(下)

hooks组件详解(下)

  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>
          )
      })
      

47

文章

12

标签