useRef共有两种用法，获取子组件的实例(只有类组件可用)，在函数组件中的一个全局变量，不会因为重复 render 重复申明， 类似于类组件的 this.xxx。
1. useRef 在使用的时候，可以传入默认值来指定默认值，需要使用的时候，访问 ref.current 即可访问到组件实例：
// 使用 ref 子组件必须是类组件 class Children extends PureComponent { render () { const { count } = this.props return ( <div>{ count }</div> ) } } function App () { const [ count, setCount ] = useState(0) const childrenRef = useRef(null) const onClick = useMemo(() => { return () => { console.log(childrenRef.current) setCount((count) => count + 1) } }, []) return ( <div> 点击次数: { count } <Children ref={childrenRef} count={count}></Children> <button onClick={onClick}>点我</button> </div> ) }
2. 有些情况下，我们需要保证函数组件每次 render 之后，某些变量不会被重复申明，比如说 Dom 节点，定时器的 id 等等，在类组件中，我们完全可以通过给类添加一个自定义属性来保留，比如说 this.xxx， 但是函数组件没有 this，自然无法通过这种方法使用，有的朋友说，我可以使用useState 来保留变量的值，但是 useState 会触发组件 render，在这里完全是不需要的，我们就需要使用 useRef 来实现了，具体看下面例子：
function App () { const [ count, setCount ] = useState(0) const timer = useRef(null) let timer2 useEffect(() => { let id = setInterval(() => { setCount(count => count + 1) }, 500) timer.current = id timer2 = id return () => { clearInterval(timer.current) } }, []) const onClickRef = useCallback(() => { clearInterval(timer.current) }, []) const onClick = useCallback(() => { clearInterval(timer2) }, []) return ( <div> 点击次数: { count } <button onClick={onClick}>普通</button> <button onClick={onClickRef}>useRef</button> </div> ) }
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值，说简单点就是，子组件可以选择性的暴露给副组件一些方法，这样可以隐藏一些私有方法和属性，官方建议，useImperativeHandle应当与 forwardRef 一起使用，具体如何使用看下面例子
function Child (props, ref) { const child = useRef() const introduce = useCallback (() => { console.log('i can sing, jump, rap, play basketball') }, []) useImperativeHandle(ref, () => ({introduce})); return ( <div ref={child}> { props.count }</div> ) } const ChildChild = forwardRef(Child) function App () { const [ count, setCount ] = useState(0) const childRef = useRef(null) const onClick = useCallback (() => { setCount(count => count + 1) childRef.current.introduce() }, []) return ( <div> 点击次数: { count } <ChildChild ref={childRef} count={count}></ChildChild> <button onClick={onClick}>点我</button> </div> ) }
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。