React源码阅读-5_036

React源码阅读-5源码import{REACT_FORWARD_REF_TYPE,REACT_MEMO_TYPE}from'shared/ReactSymbols';从'shared/warningWithoutStack'导入warningWithoutStack；exportdefaultfunctionforwardRefrender:(props:Props,ref:React$Ref)=>React$Node,){//...暂时忽略不明白it//这部分代码应该是为了在DevTools中显示一个self定义名称不确定在高阶组件中转发refsforwardRef的节点示例constFancyButton=React.forwardRef((props,ref)=>({props.children}));//可以直接获取DOM按钮的ref:constref=React.createRef();Clickme!;1.我们通过调用React.createRef创建了一个Reactref并将其赋值给ref变量。2.我们通过将ref指定为JSX属性将其传递给。3.React将ref传递给forwardRef内部函数(props,ref)=>...作为它的第二个参数。4.我们将ref参数转发给，将其指定为JSX属性。5.当ref挂载后，ref.current会指向DOM节点。Usage写高阶组件时，返回的无状态组件用forwardRef包裹，无状态组件中可以传递第二个参数ref作为返回值。Ref可以作为道具传入。importReactfrom'react'//高阶组件，注意返回值用`React.forwardRef`包裹//里面的stateless组件接收第二个参数：refconstpaintRed=Component=>React.forwardRef(//in在这个例子中，ref是ForwardRef(props,ref)中的textRef=>())classTextextendsReact.Component{//仅用于检测refvalue=1render(){conststyle={color:this.props.color}return(我是红色的！

)}}constRedText=paintRed(Text)exportdefaultclassForwardRefextendsReact.Component{textRef=React.createRef()componentDidMount(){//value=1console.log(this.textRef.current.value)}render(){//如果没有forwardRef,thisref只能获取`RedText`而不是`Text`insidereturn()}}大多数时候需要使用forwardRef，可以使用其他的Solution。https://juejin.im/post/5ad949...