React開發筆記

react FACEBOOK 框架

虛擬DOM 組件化開發 原生JS的框架 (ES6+原生javascript)

優勢

1. 極速的渲染能力 虛擬DOM virtual DOM

2. 高度組件化 組件之間高度複用

3. 經歷大量的測試 有必定的穩定性

虛擬DOM virtual DOM

虛擬DOM 就是在 真實DOM的基礎上創建的一個抽象層

咱們對數據和狀態所作的任何改動，都會被自動且高效的同步到虛擬DOM，最後再批量同步到DOM中

react 遵循MIT 協議 開源框架

diff 算法

React會在內存中維護一個虛擬DOM樹，當咱們對這個樹進行讀或寫的時候，其實是對虛擬DOM進行的。當數據變化時，而後React會自動更新虛擬DOM，而後拿新的虛擬DOM和舊的虛擬DOM進行對比，找到有變動的部分，得出一個Patch，而後將這個Patch放到一個隊列裏，最終批量更新這些Patch到DOM中。

react 和 vue 對比

相同

a. react 和 vue 都有組件化思想 都有虛擬DOM

b. react 和 vue 都提供了組件化視圖 (compoisible) 響應式數據概念

c. react 和 vue 都有核心渲染組件的API (Vue.component/React.createClass) 都有 路由的概念 相同的路由機制 完整對應的組件生命週期 各自成熟的生態圈

不一樣

a. react 經過 javascript xml 來編寫組件 vue 經過 template 模板來嵌套組件

b. vue 比 react 有更快的渲染速度 react比較vue相對複雜的框架 react 適用用業務邏輯超級變態的項目

c. 數據傳遞方式不同 生命週期不同 渲染模板不同 {react} {{vue}}

特色

1.虛擬dom (開發時候不須要在頁面中寫任何dom元素) victure dom

2.jsx語法(寫頁面時候使用javascript xml格式的語法)

3.組件化開發(react最核心的思想是將頁面中任何一個區域或者元素都

當作是一個組件 Component)

4.單向數據流(組件和後端之間的數據是單向的，從後端流動到react組件中)

5.組件生命週期(任何一個組件在dom中都具備一個完整的聲明週期，組件初始化的時候開始，組件被移除的時候消失，從而保證性能的優越)

1.

react.min.js react

react-dom.min.js react-dom

browser.min.js javascript/XML

2.

react.min.js react 核心文件 包含了react diff 算法 虛擬DOM 模型 react事件機制

提供建立組件的API createClass Component

react-dom.min.js 封裝了操做react 組件API 負責把虛擬DOM 渲染 render 成真實DOM

ReactDOM.render()

browser.min.js 負責解析 jsx 代碼 , js內的html代碼解析出來返回給瀏覽器

3. type="text/babel" 容許js 裏面 書寫 html 代碼 (jsx)

4. ReactDOM.render(虛擬DOM,真實DOM)

ReactDOM.render(<Component/>,app);

React.createElement() 建立虛擬DOM

5. data-reactroot 表面當前元素是 該組件的頂層標籤

任何組件都只能有一個頂層標籤

6. jsx 語法規則

遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；

遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析

7. 註釋 組件內部註釋

{ /* <h1>{txt}</h1> */ }

建立組件 component

組件即將一段或幾段完成各自功能的代碼段封裝爲一個或幾個獨立的部分

每一個組件 能完成獨立的功能的，都是獨立的部分

a. React.createClass 老版本 ES5

b. Reac.Component 新版本 ES6 class 類 extends 繼承 React.Component 父類

c. 無狀態組件 stateLess component

組件名首字母必須大寫 任何組件都只有一個頂層標籤

render 組件生命週期鉤子函數 把虛擬DOM 讀取出JS內存 而後等待渲染成真實DOM

生命週期階段 mount(載入) update(更新) unmount(銷燬)

自定義函數 handleClick onClick={this.handleClick}

數據傳遞載體 組件通訊 props(屬性) state(狀態)

react 書寫 樣式

1. 基於class 可是 react 必須 className 代替class

2. 基於內聯樣式 style style = {obj} 遵循 駝峯命名

style = {backgroundColor:"red",fontSize:20}

lineHeight:'20px' 必須帶單位

3. 全局變量 外部樣式 原型鏈掛載

基於原生Js 編寫事件

addEventListener("click",fn,true/false); true/false 冒泡/捕獲

onclick onchange onfocus

<p onclick="get()"></p>

jquery

$("div").on("click") $("div").off("click")

$('div').bind('click') 綁定 $('div').unbind('click')

事件委託 把事件綁定到父元素上 子元素觸發事件 經過事件冒泡 讓父元素代替子元素執行冒泡的事件

$("div").on("click",childnode,fn);

$("div").delegate(childnode,'click',fn)

vue

v-on:click = "get()"

@input = "input($event)" $event 事件對象

react 綁定事件 駝峯命名

onClick

onChange

onInput

onMouseMove

onMouseDown

onMouseUp

onTouchStart

onTouchMove

onTouchEnd

onKeyPress

onKeyDown

onKeyUp

 

綁定事件

1. 全局變量 / 外部函數

2. 組件內部自定義函數

3. 原型鏈掛載

/*

1. react 數據傳遞載體 props 屬性 state 狀態 組件之間數據交互

2. props

a. props 默認從組件外部（父組件）傳入,props 也能在組件內部初始化定義 getDefaultProps

b. 組件內部 經過生命週期鉤子函數 getDefaultProps (ES6已廢棄 ) App.defaultProps = {}

c. props 通常不容許被修改 props 只用來傳遞數據

d. props 接收 對象 常量 函數 數組

e. props 在組件內部 經過 this.props 來獲取 key-value

*/

/*

state 狀態 react 組件數據交互的載體 狀態用來修改的

1. state 不能在組件外部定義 不能在組件外部 修改 只能在組件內部定義聲明 只能在內部修改

2. state 用來被修改的 this.state 獲取 state, this.setState() 來修改 state

3. state 在組件內部的 getInitialState 來初始化定義 state ,必須返回一個對象

4. state 修改 setState 這個方法會修改 state 會從新執行 組件內部的 render方法 , 會觸發頁面的

二次渲染 虛擬DOM 會根據react 的 diff 算法 獲得新的虛擬DOM 最後的批量的更新

*/

/*

組件之間的通訊

 

1. 父子 組件

<A>

<B></B>

</A>

2. 兄弟組件

<A></A><B></B>

props 傳遞數據

state 修改數據

父組件如何修改子組件

父組件把組件的state 當着子組件的props 傳遞給子組件

父組件修改 state 會二次render 子組件接收到變化的 props 從而實現子組件修改

ref this.refs 對象獲取

1. ref 做用於DOM 元素 指向這個真實的DOM元素

2. ref 做用於組件 指向這個組件對象

*/