React 组件渲染和更新的实现代码示例

168 阅读 0 评论 111 点赞

我是靠谱客的博主苗条麦片，最近开发中收集的这篇文章主要介绍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会实例化一个文本节点的对象，并且调用该对象的mount方法。在这个mount方法中，把文本放到一个span中，调用容器组件的innerHTML，进行渲染。

原生标签

对于原生标签，React会实例化一个处理原生标签的对象，并且调用该对象的mount方法。在这个mount方法中，拼接一个字符串，并且不断递归上面的map方法，最后把拼接好的字符串放到容器组件的innerHTML中，进行渲染。

自定义标签

这个应该是大家最好奇的。自定义标签虽然叫标签，其实就是一个类。实例化一个处理自定义标签的对象后，首先React会处理自定义标签的生命周期方法，然后再次递归调用子组件的render方法进而调用map方法，直至把自定义标签分解为前两种标签。

更新

首先，我们统一一下认识。在React里调用this.setState()会使得组件更新，调用this.state = {}只会更改本组件的状态，但是不会使得组件更新。

如果我要更新一个组件，我会这样写。

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"));

执行结果：