React 源碼閱讀-5
源碼
import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
import warningWithoutStack from 'shared/warningWithoutStack';
export default function forwardRef<Props, ElementType: React$ElementType>(
render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
// ... 暫時忽略 也看不太懂
//應該這部分代碼是爲了在DevTools中顯示一個自定義名稱 不太確定
return {
$$typeof: REACT_FORWARD_REF_TYPE,
render,
};
}
React.forwardRef
接受一個渲染函數,該函數接收 props
和 ref
參數並返回一個 React
節點
爲了在高階組件中轉發 refs
forwardRef
例子
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 你可以直接獲取 DOM button 的 ref:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
1.我們通過調用 React.createRef
創建了一個 React ref
並將其賦值給 ref
變量。
2.我們通過指定 ref
爲 JSX
屬性,將其向下傳遞給<FancyButton ref={ref}>
。
3.React
傳遞 ref
給 fowardRef
內函數 (props, ref) => ...
,作爲其第二個參數。
4.我們向下轉發該 ref
參數到<button ref={ref}>
,將其指定爲 JSX
屬性。
5.當 ref
掛載完成,ref.current
將指向 <button> DOM
節點。
用法
- 寫高階組件時,返回的無狀態組件用
forwardRef
包裹,並且可以傳遞第二個參數ref
- 無狀態組件中的返回值可將
ref
作爲props
傳入。
import React from 'react'
// 高階組件,注意返回值用 `React.forwardRef` 包裹
// 裏面的無狀態組件接收第二個參數:ref
const paintRed = Component => React.forwardRef(
// 此例中,ref 爲 ForwardRef 中的 textRef
(props, ref) => (
<Component color='red' ref={ref} {...props}></Component>
)
)
class Text extends React.Component {
// 僅用於檢測是否取到 ref
value = 1
render() {
const style = {
color: this.props.color
}
return (
<p style={style}>
我是紅色的!
</p>
)
}
}
const RedText = paintRed(Text)
export default class ForwardRef extends React.Component {
textRef = React.createRef()
componentDidMount() {
// value = 1
console.log(this.textRef.current.value)
}
render() {
// 如果沒有 forwardRef,那麼這個ref只能得到 `RedText`,而不是裏面的 `Text`
return (
<RedText ref={this.textRef}></RedText>
)
}
}
大部分需要使用 forwardRef
的時候都可以用其他方式解決.
https://juejin.im/post/5ad949...