這次帶給大家React中的元素、元件、實例和節點如何使用,React中的元素、元件、實例和節點所使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
React 深入系列,深入解說了React中的重點概念、特性和模式等,旨在幫助大家加深對React的理解,以及在專案中更靈活地使用React。
React 中的元素、元件、實例和節點,是React中關係密切的4個概念,也是很容易讓React 初學者迷惑的4個概念。現在,老幹部就來詳細介紹這4個概念,以及它們之間的聯繫和區別,滿足喜歡咬文嚼字、刨根問底的同學(老幹部就是其中一員)的好奇心。
元素(Element)
React 元素其實就是一個簡單JavaScript物件,一個React 元素和介面上的一部分DOM對應,描述了這部分DOM的結構及渲染效果。一般我們透過JSX語法創建React 元素,例如:
const element = <h1 className='greeting'>Hello, world</h1>;
element是一個React 元素。在編譯環節,JSX 語法會被編譯成對React.createElement()的調用,從這個函式名稱上也可以看出,JSX語法回傳的是一個React 元素。上面的例子編譯後的結果為:
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
最終,element的值是類似下面的一個簡單JavaScript物件:
const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } }
React 元素可以分為兩類:DOM類型的元素和組件類型的元素。 DOM類型的元素使用像h1、p、p等DOM節點來建立React 元素,前面的範例就是一個DOM類型的元素;元件類型的元素使用React 元件來建立React 元素,例如:
const buttonElement = <Button color='red'>OK</Button>;
buttonElement就是一個元件類型的元素,它的值是:
const buttonElement = { type: 'Button', props: { color: 'red', children: 'OK' } }
對於DOM類型的元素,因為和頁面的DOM節點直接對應,所以React知道如何進行渲染。但是對於元件類型的元素,如buttonElement,React是無法直接知道應該把buttonElement渲染成哪種結構的頁面DOM,這時就需要組件自身提供React能夠識別的DOM節點信息,具體實現方式在介紹組件時會詳細介紹。
有了React 元素,我們該如何使用它?其實,絕大多數情況下,我們都不會直接使用React 元素,React 內部會自動根據React 元素,渲染出最終的頁面DOM。更確切地說,React元素描述的是React虛擬DOM的結構,React會根據虛擬DOM渲染出頁面的真實DOM。
元件 (Component)
React 元件,應該是大家最熟悉的React中的概念。 React透過元件的思想,將介面拆分成一個個可以重複使用的模組,每個模組就是一個React 元件。一個React 應用由若干組件組合而成,一個複雜組件也可以由若干簡單組件組合而成。
React元件和React元素關係密切,React元件最核心的作用是傳回React元素。這裡你也許會有疑問:React元素不應該是由React.createElement() 回傳的嗎?但React.createElement()的呼叫本身也是需要有「人」負責的,React元件正是這個「責任人」。 React元件負責呼叫React.createElement(),並傳回React元素,供React內部將其渲染成最終的頁面DOM。
既然元件的核心作用是傳回React元素,那麼最簡單的元件就是一個傳回React元素的函數:
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
Welcome就是一個用函數定義的元件。如果使用類別(class)定義元件,回傳React元素的工作具體就由元件的render方法承擔,例如:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
其實,使用類別定義的元件,render方法是唯一必要的方法,其他元件的生命週期方法都只不過是為render服務而已,都不是必要的。
現在來考慮下面這個例子:
class Home extends React.Component { render() { return ( <p> <Welcome name='老干部' /> <p>Anything you like</p> </p> ) } }
Home 元件使用了Welcome元件,傳回的React元素為:
{ type: 'p', props: { children: [ { type: 'Welcome', props: { name: '老干部' } }, { type: 'p', props: { children: 'Anything you like' } }, ] } }
對於這個結構,React 知道如何渲染type = 'p' 和type = 'p' 的節點,但不知道如何渲染type='Welcome'的節點,當React 發現Welcome 是一個React 元件時(判斷依據是Welcome首字母為大寫),會根據Welcome元件返回的React 元素決定如何渲染Welcome節點。 Welcome元件傳回的React 元素為:
{ type: 'h1', props: { children: 'Hello, 老干部' } }
这个结构中只包含DOM节点,React是知道如何渲染的。如果这个结构中还包含其他组件节点,React 会重复上面的过程,继续解析对应组件返回的React 元素,直到返回的React 元素中只包含DOM节点为止。这样的递归过程,让React 获取到页面的完整DOM结构信息,渲染的工作自然就水到渠成了。
另外,如果仔细思考的话,可以发现,React 组件的复用,本质上是为了复用这个组件返回的React 元素,React 元素是React 应用的最基础组成单位。
实例 (Instance)
这里的实例特指React组件的实例。React 组件是一个函数或类,实际工作时,发挥作用的是React 组件的实例对象。只有组件实例化后,每一个组件实例才有了自己的props和state,才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中,实例化的工作是由开发者自己手动完成的,但在React中,组件的实例化工作是由React自动完成的,组件实例也是直接由React管理的。换句话说,开发者完全不必关心组件实例的创建、更新和销毁。
节点 (Node)
在使用PropTypes校验组件属性时,有这样一种类型:
MyComponent.propTypes = { optionalNode: PropTypes.node, }
PropTypes.node又是什么类型呢?这表明optionalNode是一个React 节点。React 节点是指可以被React渲染的数据类型,包括数字、字符串、React 元素,或者是一个包含这些类型数据的数组。例如:
// 数字类型的节点 function MyComponent(props) { return 1; } // 字符串类型的节点 function MyComponent(props) { return 'MyComponent'; } // React元素类型的节点 function MyComponent(props) { return <p>React Element</p>; } // 数组类型的节点,数组的元素只能是其他合法的React节点 function MyComponent(props) { const element = <p>React Element</p>; const arr = [1, 'MyComponent', element]; return arr; } // 错误,不是合法的React节点 function MyComponent(props) { const obj = { a : 1} return obj; }
最后总结一下,React 元素和组件的概念最重要,也最容易混淆;React 组件实例的概念大家了解即可,几乎使用不到;React 节点有一定使用场景,但看过本文后应该也就不存在理解问题了。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是React中的元素、元件、實例和節點如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!