React原始碼解析 四 react ref

2021-09-24 06:56:06 字數 711 閱讀 7667

平時我們可能會有這樣的需求,就是需要獲取某個dom節點或者子元件的例項來更新,而並不是只是通過props等來更新dom節點或者元件。如果沒有乙個好的方法我們可能自己去獲取節點(例:queryselector等)或者去繫結事件來進行一些操作,而且自己還要去管理獲取的一些相關的東西,這樣可能會不方便。那麼,在react當中就為我們提供了這樣的方式,通過ref去獲取子節點的乙個例項。

在react當中有三種使用ref的方式:

看下createref原始碼:

import type  from 'shared/reacttypes';

// an immutable object with a single mutable valueexport

function createref(): refobject ;

if (__dev__)

return refobject;

}複製**

只有這麼短短的幾行**, 看下官方的使用例項:

class mycomponent extends react.component 

render

() />;

} componentdidmount

() }複製**

呼叫react.createref(),會把節點的例項掛載到current屬性上供我們去使用。

React原始碼解析

距離第一篇 react原始碼解析 一 已經過去將近4個月的時間,由於是我第一次進行原始碼解析相關的寫作,思路和文筆還不夠成熟。一百多天以來,我基於讀者反饋反思這幾篇文章中的不足,同時也在不斷學習借鑑其他優秀作者的寫作方法和寫作思路。最終總結出對於自己的原始碼寫作來說,需要改進的幾點 1.示例 太多 ...

React16 2原始碼解析

16.2的原始碼相較與16.4的原始碼生命週期還未改變,但是fiber架構已經實現。本原始碼解析主要是為了弄懂react的渲染流程和執行機制。斷點除錯 看原始碼並console.log react16.2原始碼解析 fiber架構 react16.2原始碼解析 頁面渲染流程 react16.2原始碼...

JDk原始碼解析之四 Vector原始碼解析

具體的三個屬性 解釋看圖中注釋。vector沒有採取arraylist臨界值擴容的辦法,而是每次不夠的時候,直接根據capacity的值來增加。具體怎麼增加後面會說。vector的構造方法如下。簡單粗暴,如果呼叫無參建構函式,直接就將初始容量設定成了10,最終在右側的構造方法裡,將陣列的長度設定為1...