摘要:組件中有三種構建組件的方式。元素與組件的區別組件是由元素構成的。元素數據結構是普通對象,而組件數據結構是類或純函數。使用才是操作元素的正確姿勢。使用元素可以讓用戶傳入自定義組件的同時,為組件添加屬性。
在初學 React 的時候,分不清 React 組件和 React 元素,著實踩了一些坑。搞清楚 React 中什么是組件,什么是元素,既可以理清楚概念,也可以讓你避免一些不必要的錯誤。
React 元素React 元素(React element),它是 React 中最小基本單位,我們可以使用 JSX 語法輕松地創建一個 React 元素:
const element =I"m element
React 元素不是真實的 DOM 元素,它僅僅是 js 的普通對象(plain objects),所以也沒辦法直接調用 DOM 原生的 API。上面的 JSX 轉譯后的對象大概是這樣的:
{ _context: Object, _owner: null, key: null, props: { className: "element", children: "I"m element" }, ref: null, type: "div" }
只有在這個元素渲染被完成后,才能通過選擇器的方式獲取它對應的 DOM 元素。不過,按照 React 有限狀態機的設計思想,應該使用狀態和屬性來表述組件,要盡量避免 DOM 操作,即便要進行 DOM 操作,也應該使用 React 提供的接口ref和getDOMNode()。一般使用 React 提供的接口就足以應付需要 DOM 操作的場景了,因此像 jQuery 強大的選擇器在 React 中幾乎沒有用武之地了。
除了使用 JSX 語法,我們還可以使用 React.createElement() 和 React.cloneElement() 來構建 React 元素。
React.createElement()JSX 語法就是用React.createElement()來構建 React 元素的。它接受三個參數,第一個參數可以是一個標簽名。如div、span,或者 React 組件。第二個參數為傳入的屬性。第三個以及之后的參數,皆作為組件的子組件。
React.createElement( type, [props], [...children] )React.cloneElement()
React.cloneElement()與React.createElement()相似,不同的是它傳入的第一個參數是一個 React 元素,而不是標簽名或組件。新添加的屬性會并入原有的屬性,傳入到返回的新元素中,而就的子元素獎杯替換。
React.cloneElement( element, [props], [...children] )React 組件
React 中有三種構建組件的方式。React.createClass()、ES6 class和無狀態函數。
React.createClass()React.createClass()是三種方式中最早,兼容性最好的方法。在0.14版本前官方指定的組件寫法。
var Greeting = React.createClass({ render: function() { returnES6 classHello, {this.props.name}
; } });
ES6 class是目前官方推薦的使用方式,它使用了ES6標準語法來構建,但它的實現仍是調用React.createClass()來實現了,ES6 class的生命周期和自動綁定方式與React.createClass()略有不同。
class Greeting extemds React.Component{ render: function() { return無狀態函數Hello, {this.props.name}
; } };
無狀態函數是使用函數構建的無狀態組件,無狀態組件傳入props和context兩個參數,它沒有state,除了render(),沒有其它生命周期方法。
function Greeting (props) { returnHello, {props.name}
; }
React.createClass()和ES6 class構建的組件的數據結構是類,無狀態組件數據結構是函數,它們在 React 被視為是一樣的。
元素與組件的區別組件是由元素構成的。元素數據結構是普通對象,而組件數據結構是類或純函數。除此之外,還有幾點區別要注意:
this.props.children在 JSX 中,被元素嵌套的元素會以屬性 children 的方式傳入該元素的組件。當僅嵌套一個元素時,children 是一個 React 元素,當嵌套多個元素時,children 是一個 React 元素的數組。可以直接把 children 寫入 JSX 的中,但如果要給它們傳入新屬性,就要用到React.cloneElement()來構建新的元素。我曾放過以下錯誤:
render () { var Child = this.props.children return }因為 Child 是一個 React 元素,而不是組件,這樣的寫法是完全錯誤的,正確的方式應該是:
render () { var child = this.props.children return{ React.cloneElement(child, {tip: "right way!"}) }}就這樣,原有屬性和新添加的屬性被一并傳入了子元素。使用React.cloneElement()才是操作元素的正確姿勢。
用戶組件有的時候,組件可以讓用戶以屬性的方式傳入自定義的組件,來提升組件的靈活性。這個屬性傳入的就應該是 React 元素,而非 React 組件。使用 React 元素可以讓用戶傳入自定義組件的同時,為組件添加屬性。同樣,可以使用React.cloneElement()為自定義組件添加更多屬性,或替換子元素。
// 推薦最后} /> // 不推薦 最后,打個不恰當的比喻,React 組件是MyComponent,React 元素就是
AD。 新開博客,更多文章,陸續更新中...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81944.html
相關文章
前端面試題總結(js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源)
摘要:并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題,由基礎到困難循序漸進,適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
前端面試題總結(js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源)
摘要:并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題,由基礎到困難循序漸進,適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
前端面試題總結(js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源)
摘要:并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題,由基礎到困難循序漸進,適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
發表評論
0條評論
lifesimple
男|高級講師
TA的文章
閱讀更多
#私藏項目實操分享# 離線地圖打點解決方案與算法
閱讀 1870·2021-11-25 09:43
C語言——一維數組算法問題
閱讀 3161·2021-11-15 11:38
CSS動畫:有活力的鏈接下劃線
閱讀 2708·2019-08-30 13:04
使用CSS畫三角形
閱讀 483·2019-08-29 11:07
通過focusout事件解決IOS鍵盤收起時界面不歸位的問題
閱讀 1492·2019-08-26 18:37
Untrusted 趣味解法
閱讀 2697·2019-08-26 14:07
promise 與settime 執行順序
閱讀 582·2019-08-26 13:52
好用的ES6方法
閱讀 2278·2019-08-26 12:09