快捷導(dǎo)航

React 組件渲染和更新的實(shí)現(xiàn)代碼示例

更新時(shí)間：2019年02月21日 08:25:47 作者：柒青衿

這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

組件渲染

渲染時(shí)候，我們會(huì)調(diào)用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"));

結(jié)果：

頁面打印：
say: Hello Cynthia
控制臺(tái)打?。?
I will mount
I have mounted

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

當(dāng)調(diào)用render方法時(shí)，render會(huì)去調(diào)用一個(gè)map方法，根據(jù)傳入?yún)?shù)的不同，把被render的對象分為以下三類：
* 文本
* 原生
* 自定義標(biāo)簽

文本

對于文本，React會(huì)實(shí)例化一個(gè)文本節(jié)點(diǎn)的對象，并且調(diào)用該對象的mount方法。在這個(gè)mount方法中，把文本放到一個(gè)span中，調(diào)用容器組件的innerHTML，進(jìn)行渲染。

原生標(biāo)簽

對于原生標(biāo)簽，React會(huì)實(shí)例化一個(gè)處理原生標(biāo)簽的對象，并且調(diào)用該對象的mount方法。在這個(gè)mount方法中，拼接一個(gè)字符串，并且不斷遞歸上面的map方法，最后把拼接好的字符串放到容器組件的innerHTML中，進(jìn)行渲染。

自定義標(biāo)簽

這個(gè)應(yīng)該是大家最好奇的。自定義標(biāo)簽雖然叫標(biāo)簽，其實(shí)就是一個(gè)類。實(shí)例化一個(gè)處理自定義標(biāo)簽的對象后，首先React會(huì)處理自定義標(biāo)簽的生命周期方法，然后再次遞歸調(diào)用子組件的render方法進(jìn)而調(diào)用map方法，直至把自定義標(biāo)簽分解為前兩種標(biāo)簽。

更新

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

如果我要更新一個(gè)組件，我會(huì)這樣寫。

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í)行結(jié)果：