React 組件渲染和更新的實現代碼示例

最近一直寫React，慢慢就對里面的一些實現很好奇。最好奇的就是自定義標簽的實現和this.setState的實現。這里不分析JSX是如何解析的，所有組件都用ES5方式編寫。

組件渲染

渲染時候，我們會調用render方法。類似下面這樣：

var SayHi = React.createClass({
 getInitialState: function() {
  return {verb: 'say:'};
 },
 componentWillMount: function() {
  console.log('I will mount');
 },
 componentDidMount: function() {
  console.log('I have mounted');
 },
 render: function() {
  return React.createElement("div", null,this.state.verb, "Hello ", this.props.name);
 }
});

React.render(React.createElement(SayHi, {name: "Cynthia"}), document.getElementById("container"));

結果：

頁面打?。?
say: Hello Cynthia
控制臺打?。?
I will mount
I have mounted

這是我畫的React對象上的一些屬性和方法。

當調用render方法時，render會去調用一個map方法，根據傳入參數的不同，把被render的對象分為以下三類：
* 文本
* 原生
* 自定義標簽

文本

對于文本，React會實例化一個文本節(jié)點的對象，并且調用該對象的mount方法。在這個mount方法中，把文本放到一個span中，調用容器組件的innerHTML，進行渲染。

原生標簽

對于原生標簽，React會實例化一個處理原生標簽的對象，并且調用該對象的mount方法。在這個mount方法中，拼接一個字符串，并且不斷遞歸上面的map方法，最后把拼接好的字符串放到容器組件的innerHTML中，進行渲染。

自定義標簽

這個應該是大家最好奇的。自定義標簽雖然叫標簽，其實就是一個類。實例化一個處理自定義標簽的對象后，首先React會處理自定義標簽的生命周期方法，然后再次遞歸調用子組件的render方法進而調用map方法，直至把自定義標簽分解為前兩種標簽。

更新

首先，我們統一一下認識。在React里調用this.setState()會使得組件更新，調用this.state = {}只會更改本組件的狀態(tài)，但是不會使得組件更新。

如果我要更新一個組件，我會這樣寫。

var SayHi = React.createClass({
 getInitialState: function() {
  return {verb: 'say:'};
 },
 componentWillMount: function() {
  console.log('I will mount');
 },
 componentDidMount: function() {
  console.log('I have mounted');
 },
 changeVerb: function(){
  this.setState({verb: 'write:'});
 }
 render: function() {
  return React.createElement("div", this.changeVerb.bind(this),this.state.verb, "Hello ", this.props.name);
 }
});

React.render(React.createElement(SayHi, {name: "Cynthia"}), document.getElementById("container"));

執(zhí)行結果：

頁面打印：
say: Hello Cynthia
點擊文本，頁面內容更新成：
write: Hello Cynthia

與更新相關的屬性和方法如下：

在調用this.setState()以后，也是調用了一個map方法，根據傳入參數不同，依然把要更新的標簽分為文本、原生標簽、自定義標簽三類。具體處理過程如下。

文本

文本節(jié)點處理很簡單，判斷要更新后的文本與當前文本是否===，不是全等就刪除原來文本，插入新文本。

自定義標簽

對于自定義標簽，首先根據對象的引用、key是否相同，判斷是否需要更新。如果需要更新，就繼續(xù)調用上述map方法進行子組件的更新。又是一個遞歸。但是注意，這里的map方法和渲染部分的map方法不是一個方法喲。

原生標簽

對于原生標簽，首先更新組件的屬性，然后update子樹，用diff算法來比較新的子樹與目前標簽的子樹的不同，形成一個差異樹，然后用patch方法，把這個差異樹更新到真正的DOM樹上。

總結

很復雜的過程，讓我用流水賬寫了一遍。沒能道出其中精華。以后繼續(xù)探索，寫的詳細一些。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。