深入react技術棧記錄（一）

1. react.component

react 的所有元件都繼承自頂層類 react.component。它的定義非常簡潔，只是初始化了

react.component 方法，宣告了 props、context、refs 等，並在原型上定義了 setstate 和

forceupdate 方法.

2. 無狀態函式

示例**如下：

function button() );}

期方法，元件本身即上面兩種 react 元件構建方法中的 render 方法。不過，像 proptypes 和

defaultprops 還是可以通過向方法設定靜態屬性來實現的。

在適合的情況下，我們都應該且必須使用無狀態元件。無狀態元件不像上述兩種方法在呼叫

時會建立新例項，它建立時始終保持了乙個例項，避免了不必要的檢查和記憶體分配，做到了內部

優化。3.props與state

state 與 props 是 react 元件中最重要的概念。如果頂層元件初始化 props，那麼 react 會向下

遍歷整棵元件樹，重新嘗試渲染所有相關的子元件。而 state 只關心每個元件自己內部的狀態，

這些狀態只能在元件內改變。把元件看成乙個函式，那麼它接受了 props 作為引數，內部由 state

作為函式的內部引數，返回乙個 virtual dom 的實現。

4. 生命週期

componentwillmount 方法會在 render 方法之前執行，而componentdidmount方法會在render之後執行，分別代表了渲染前後的時刻。

如果我們在 componentwillmount 中執行 setstate 方法，會發生什麼呢？元件會更新 state，

但元件只渲染一次。因此，這是無意義的執行，初始化時的 state 都可以放在 this.state。

如果我們在 componentdidmount 中執行 setstate 方法，又會發生什麼呢？元件當然會再次更

新，不過在初始化過程就渲染了兩次元件，這並不是一件好事。但實際情況是，有一些場景不得

不需要 setstate，比如計算元件的位置或寬高時，就不得不讓元件先渲染，更新必要的資訊後，

再次渲染。

shouldcomponentupdate 是乙個特別的方法，它接收需要更新的 props 和 state，讓開發者增加

必要的條件判斷，讓其在需要時更新，不需要時不更新。因此，當方法返回 false 的時候，元件

不再向下執行生命週期方法。

5. 計算dom的尺寸

react 中使用 dom 最多的還是計算 dom 的尺寸（即位置資訊）。我們可以提供像 width 或

height 這樣的工具函式：

function

width(el) 
const borderleftwidth =parsefloat(styles.borderleftwidth);
const borderrightwidth =parsefloat(styles.borderrightwidth);
const paddingleft =parsefloat(styles.paddingleft);
const paddingright =parsefloat(styles.paddingright);
return width - borderrightwidth - borderleftwidth - paddingleft -　paddingright;
} 

componentdidmount 會在元件已經完成安裝並且在瀏覽器

中存在真實的 dom 後呼叫，此時我們就可以完成原生事件的繫結。比如：

import react,  from 'react';

class nativeeventdemo extends component );
}handleclick(e) 
componentwillunmount() 
render() 
} 

可能出現記憶體洩漏的問題。而使用合成事件系統時則不需要，因為 react 內部已經幫你妥善地處

理了。7. 使用原生事件時冒泡的問題

用 reactevent.nativeevent.stoppropagation() 來阻止冒泡是不行的。阻止 react 事件冒泡的行為只能用於 react 合成事件系統

中，且沒辦法阻止原生事件的冒泡。反之，在原生事件中的阻止冒泡行為，卻可以阻止 react 合成事件的傳播。

消除冒泡例子, 點選***外的位置收起***

componentdidmount() 

this
.setstate();
});} 

深入React技術棧 筆記

1.初入react世界 可以說，函式式程式設計才是react的精髓。react的生命週期可以分為兩類，當元件在掛載或解除安裝時，當元件接收新組建時，即元件更新時。react的生命週期 2.漫談react react基於virtual dom實現了乙個syntheticevent 合成事件 react...

react技術棧實踐（1）

最近開發乙個全新ab測試平台，思考了下正好可以使用react技術開發。首先遇到乙個概念，redux。這貨還真不好理解，大體的理解 store包含所有資料，檢視觸發乙個action，store收到action後，返回乙個新的 state，這樣檢視就發生變化，state計算過程叫做 reducer，re...

react技術棧實踐（1）

最近開發乙個全新ab測試平台，思考了下正好可以使用react技術開發。首先遇到乙個概念，redux。這貨還真不好理解，大體的理解 store包含所有資料，檢視觸發乙個action，store收到action後，返回乙個新的 state，這樣檢視就發生變化，state計算過程叫做 reducer，re...