先以下面一段簡單的**舉例:
const greeting = function () `}
;};
可以看出,greeting 是乙個無狀態元件,我們來看看編譯過後的可執行**:
var greeting = function greeting(_ref) ;
我們看到,呼叫 greeting 元件時傳入的 name 屬性,出現在 react.createelement() 方法的第二個引數中,這和前面介紹的 jsx 是一致的,不同的是,react.createelement() 方法的第乙個引數不再是乙個標籤名,而是乙個函式引用,指向了我們宣告的 greeting 元件,而 name 屬性也作為引數的成員出現在元件內部,這個引數名為 _ref,實則是我們熟知的 props。
我們再來看乙個稍微複雜些的例子:
const greeting = function () `}
);};const container = function ()
);};
);
在上面**中,我們定義了兩個無狀態元件,其中 container 用來作為外層的容器,greeting 則用來顯示實際的業務檢視。
現在再來看看編譯後的**結構:
var greeting = function greeting(_ref) ;
var container = function container(_ref2) ,
children
);}; container,
null,
react.createelement(greeting, ),
react.createelement(greeting, ),
react.createelement(greeting, )
);
這次我們主要觀察 container 的結構,它實際上是將 react.createelement() 方法的第三個引數作為 props.children 傳遞到了元件內部,而這個 children 是乙個 greeting,最終是將 greeting 渲染在 container 元件內部。
接下來,我們要改進一下之前實現的 react.createelement() 和 reactdom.render() 方法,使它們支援元件的形式,模擬生成虛擬 dom 和真實 dom。
先來看看 react.createelement() 方法:
const react =
// 結點
let vnode =
};// 掛載元件函式體的虛擬dom
if (typeof type === 'function') );
}return vnode;
}};
上面的**主要對元件做了特殊處理。如果當前處理物件是元件,則對應的 type 就是函式的引用,我們會呼叫這個元件函式,然後將函式體的結果作為 body 屬性掛載到該結點上。需要注意的是,我們在上面方法引數中使用了可變引數的形式,如果直接引用這個 children,它本身就是乙個變引數組,如果元件體內使用了 props.children,那麼在呼叫 react.createelement() 時,變引數組的形式將會是 [[...]],所以我們需要特殊處理一下。
現在,我們執行程式,看看上面**生成的虛擬 dom 結構:
最後,再來看看 reactdom.render() 方法:
const reactdom = ,
// 獲取真實dom
generatedom(vnode)
let elem = document.createelement(vnode.type);
// 特殊key值對映
let specialkeymap = ;
let = vnode;
// 設定dom屬性
props && object.keys(props).foreach(key => else
});} else if (key === 'style') :$`);
});elem.setattribute('style', styleitems.join(';'));
} else
});return elem;
}};
上面**中改動較小,我們只新增了幾行針對元件的處理邏輯,如果是元件函式,則將函式體的虛擬 dom 生成真實 dom。
最後,我們來看看最終生成的 dom 結構:
React 有狀態元件生成真實DOM結點
上次我們分析了無狀態元件生成 dom 的過程,無狀態元件其實就是純函式,它不維護內部的狀態,只是根據外部輸入,輸出乙份檢視資料。而今天我們介紹的有狀態元件,它有內部的狀態,因此在元件的內部,可以自行對狀態進行更改,進而渲染出新的檢視。下面我們就來分析有狀態元件生成真實 dom 結點的過程。我們先來寫...
react無狀態元件
乙個普通元件只有render函式的時候,我們完全可以通過乙個無狀態元件來替換掉這個普通元件。無狀態元件相對於這個普通函式的優勢如下 無狀態元件的效能比較高。因為無狀態元件就是乙個函式。而普通元件是js裡面的乙個類,而這個類生成的物件裡還有生命週期函式,他執行起來既要執行生命週期函式,還要執行rend...
react 中的無狀態元件
其實 有一些 元件 不需要我們做任何 邏輯處理 和 狀態管理 僅僅只是用來展示 ui介面的話 這樣的元件 叫做無狀態元件 舉乙個很簡單的例子 而且無狀態元件 可以直接有乙個函式 封裝 不用 class 繼承component 同時無狀態元件執行起來 效能也比較好 事件 和 資料 都是由父元件傳遞過來...