跳到主要内容

DOM 实例

分类HooksClasses
DOM 实例ref v0.13ref v0.13
\-获取useRef() v16.8React.createRef() v16.3
this.refs v0.13
\-立即更新-ReactDOM.flushSync() v0.13
\-强制重新渲染useSyncExternalStore() v18.0forceUpdate() v0.13
\-查找-ReactDOM.findDOMNode() v0.13
组件实例useImperativeHandle() v16.8React.forwardRef() v16.3
\-挂载-ReactDOM.createPortal() v16.0

大纲​

  • DOM 实例
    • 引用
    • 获取
    • 立即更新
    • 强制重新渲染
    • 查找
    • 挂载
  • 组件实例
    • 引用
    • 属性公开
    • 挂载

DOM 实例​

引用​

  • ref
// https://zh-hans.react.dev/learn/referencing-values-with-refs
//

获取​

  • useRef()
    • React.createRef()
    • this.refs
// https://zh-hans.react.dev/learn/manipulating-the-dom-with-refs
// https://zh-hans.legacy.reactjs.org/docs/refs-and-the-dom.html

立即更新​

  • ReactDOM.flushSync()
// https://zh-hans.react.dev/learn/manipulating-the-dom-with-refs#when-react-attaches-the-refs
// https://zh-hans.react.dev/reference/react-dom/flushSync

强制重新渲染​

  • useSyncExternalStore()
    • forceUpdate()
    • useReducer() + 递增
// https://zh-hans.react.dev/reference/react/useSyncExternalStore
// https://zh-hans.react.dev/reference/react/Component#forceupdate
// https://zh-hans.legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate

查找​

  • ReactDOM.findDOMNode()
// https://zh-hans.react.dev/reference/react-dom/findDOMNode
// https://zh-hans.legacy.reactjs.org/docs/react-dom.html#finddomnode

组件实例​

引用及属性公开​

  • useImperativeHandle()
  • React.forwardRef()
// https://zh-hans.react.dev/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes
// https://zh-hans.react.dev/reference/react/useImperativeHandle
// https://zh-hans.react.dev/reference/react/forwardRef
// https://zh-hans.legacy.reactjs.org/docs/forwarding-refs.html
// https://zh-hans.legacy.reactjs.org/docs/hooks-reference.html#useimperativehandle

属性公开​

挂载/入口/传送​

  • ReactDOM.createPortal()
// https://zh-hans.react.dev/reference/react-dom/createPortal
// https://zh-hans.legacy.reactjs.org/docs/portals.html