1. 程式人生 > >JavaScript之jsx&react

JavaScript之jsx&react

script size virtual 樹形 操作dom 高效 diff 操作 應該

1.Virtual DOM

1.將網頁所有內容映射到一顆樹形結構的層級對象模型上,瀏覽器提供對dom的支持,用戶可以是用腳本調用dom,api來動態修改dom節點,從而達到修改網頁目的,這種修改是瀏覽器完成的,瀏覽器會根據dom的改變重新繪制改變的dom節點部分
2.修改dom重新繪制渲染的代價太高,前端框架為了提高效率,盡量減少dom的重繪,提出了Virtual DOm,所有的修改都是在Virutal DOM上進行的,通過比較算法,找出瀏覽器dom之間的差別,使用這個差異操作dom,瀏覽器只需要渲染部分變化就可以
react實現了dom diff算法可以高效對比virtual DOM和dom差異

2.jsx語法

jsx是一種javascri和xml混寫的語法,是javascript的擴展
jsx規範
標簽中首字母小寫的就是html標記,首字母大寫就是組建
要求嚴格的html標記,所有標記必須閉合,br應該攜程<br />
單行省略小括號,多行請使用小括號
元素有多行,建以多行,註意縮進
jsx表達式:使用{}括起來,如果大括號使用了引號,會當作字符串處理

  

  

JavaScript之jsx&react