上次我們分析了無狀態元件生成 dom 的過程，無狀態元件其實就是純函式，它不維護內部的狀態，只是根據外部輸入，輸出乙份檢視資料。而今天我們介紹的有狀態元件，它有內部的狀態，因此在元件的內部，可以自行對狀態進行更改，進而渲染出新的檢視。下面我們就來分析有狀態元件生成真實 dom 結點的過程。
我們先來寫的乙個 greeting 元件，每次點選問候按鈕，文字部分會更新問候的次數：
class greeting extends react.component ;
} componentdidmount()
greet = () => = this.state;
this.setstate();
};render() = this.props;
return (
hello times
greet
)}}
// 自執行函式變數 _createclass實際上是用來定義props的
var _createclass = function () ]
function defineproperties(target, props)
object.defineproperty(target, descriptor.key, descriptor);
}} return function (constructor, protoprops, staticprops)
// 定義靜態props
if (staticprops)
return constructor;
};}();
function _possibleconstructorreturn(self, call)
// 繼承
function _inherits(subclass, superclass) )來實現繼承
subclass.prototype = object.create(superclass && superclass.prototype,
});if (superclass)
}// 自執行函式變數 表示使用者自定義元件
var greeting = function (_react$component) ;
// 元件內部greet方法
_this.greet = function () );
};return _this;
} // 繼承reactcomponent
_inherits(greeting, _react$component);
// 給greeting定義生命週期方法
_createclass(greeting, [},,
react.createelement(
"div",
null,
"hello ",
name,
" ",
this.state.count,
" times"
),react.createelement(
"button",
,"greet"));
}}
]);return greeting;
}(react.component);
const react =
// 結點
let vnode =
};// 掛載元件函式體的虛擬dom
if (typeof type === 'function') ;
// 有狀態元件
if (type.prototype && type.prototype.render)
// 無狀態元件
else
}return vnode;
}};// reactcomponent基類
function reactcomponent(props) {}
// 實現setstate方法
reactcomponent.prototype.setstate = function (partialsate)
// 模擬react.component基類
react.component = reactcomponent;
const reactdom = ,
// 獲取真實dom結點
generatedom(vnode)
let elem = document.createelement(vnode.type);
vnode.dom = elem;
// 特殊key值對映
let specialkeymap = ;
let = vnode;
// 設定dom屬性
props && object.keys(props).foreach(key => else
});} else if (key === 'style') :$`);
});elem.setattribute('style', styleitems.join(';'));
} else if (['onclick'].includes(key)) );
} else
});return elem;
}};
React 無狀態元件生成真實DOM結點
先以下面一段簡單的 舉例 const greeting function 可以看出，greeting 是乙個無狀態元件，我們來看看編譯過後的可執行 var greeting function greeting ref 我們看到，呼叫 greeting 元件時傳入的 name 屬性，出現在 react...
react無狀態元件
乙個普通元件只有render函式的時候，我們完全可以通過乙個無狀態元件來替換掉這個普通元件。無狀態元件相對於這個普通函式的優勢如下 無狀態元件的效能比較高。因為無狀態元件就是乙個函式。而普通元件是js裡面的乙個類，而這個類生成的物件裡還有生命週期函式，他執行起來既要執行生命週期函式，還要執行rend...
react自動生成React元件命令
好久沒有用vscode了，可以說越來越強大了。但是偶然也要用用，react新建了乙個元件，輸入import，沒有自動補全，還要自動手工輸入，比較麻煩。網上也找了文章處理，發現還是不起作用。解決 rcc 現在來講講，這個命令是哪來的，為什麼我輸入rcc，就自動幫我寫上了以上的 其實是react sni...