博客

React源码遨游（二） 组件 Component

在React中，你可以将组件定义为

class

或者

function


用

class

定义的组件会有更多的功能。定义一个组件类，你需要

extend React.Component

。

class Welcome extends React.Component {
   
  render() {
   
    return <h1>Hello, {
   this.props.name}</h1>;
  }
}

今天我们就来看看，源码中的

Component

到底有什么内容，我们可以从中学到什么。

React.Component

源码位于

\react\src\ReactBaseClasses.js

，

说明包含在注释中：


Component


function Component(props, context, updater) {
   
  // 将 props 和 context 分别从参数中赋值到组件属性中
  this.props = props;
  this.context = context;
  // 组件的 refs 赋值为一个空对象，如果组件有字符串 refs ，之后会用不同的对象赋值
  this.refs = emptyObject;
  // 初始化 updater ， 但真正的 updater 会在重渲染的时候注入
  // 如果没有 updater ， 则使用 ReactNoopUpdateQueue
  this.updater = updater || ReactNoopUpdateQueue;
}


ReactNoopUpdateQueue


我们暂时跳出来，看看

ReactNoopUpdateQueue

这个updater是干什么的。

首先看这个名字，Noop的意思是No-Operation，即无操作，所以这个updater意思是

无操作更新队列

。接下来看源码，位于

\react\src\ReactNoopUpdateQueue.js


const ReactNoopUpdateQueue = {
   
  /**
   * 检查该组件是否已被装载
   * @protected
   * @final
   */
  isMounted: function(publicInstance) {
   
    return