回顾React React.forwardRef ref 转发

long time no 写React 项目了，最近有机会又在写react项目，对之前学习过 React.forwardRef ref 有点忘记了，这次来回顾复习一下~

ref 转发 也是高阶组件的一个应用场景,用来解决 函数组件没有办法通过ref获取实例组件对象的问题

首先我们写了一个函数组件 Scroll

import {forwardRef, memo} from "react";
import styled from "styled-components";

const ScrollWrapper = styled.div`
`

const Scroll = () => {
    return <ScrollWrapper>1</ScrollWrapper>
}
export default memo(Scroll)

然后在其他地方使用！我们想通过ref获取这个 Scroll 函数组件的 真实dom，但是你会发现无法获取，而且控制台会报错！

因为 React 不允许直接从函数式组件上面获取内部的dom!

它需要这个组件内部支持，需要允许！，那么如何支持呢_{那么就是这个函数组件支持ref转发}
你传入ref给函数式组件~函数组件内部转发到 它想让你可以控制的dom上！这也能做到对封装组件内部dom的保护！

那么我们在封装 Scroll 组件的时候，就需要使用 React.forwardRef 来转发外部传入的 ref

import {forwardRef, memo} from "react";
import styled from "styled-components";

const ScrollWrapper = styled.div`
`

const Scroll = forwardRef((props, ref) => {
    // styled components 默认支持转发的！
    return <ScrollWrapper ref={ref}>1</ScrollWrapper>
})
export default memo(Scroll)

现在来看看那边能不能拿到函数组件的真实dom啦！

    const scrollRef = useRef(null)
    console.log(scrollRef)
    return (
        <div className="RecommendContainer">
            <Slider bannerList={bannerList}/>
            <RecommendList recommendList={recommendList}/>
            <Scroll ref={scrollRef}/>
        </div>
    )

OK ！ everything is fine ! ！所以这就是回顾一些这个API的用处!