2

阅读react源码--component部分

 2 years ago
source link: https://snayan.github.io/post/react_component_source/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

阅读react源码--component部分

May 09, 2017/「 react 」/ Edit on Github ✏️

今天主要看下React.Component，实际上Component是React对象上一个构造函数。 构造函数接受三个参数，props，context，updater，updater实际是在render中注入的，它是用来实际更新state

function ReactComponent(props, context, updater) {
  this.props = props
  this.context = context
  // emptyObject 是一个空对象{}
  this.refs = emptyObject
  // ReactNoopUpdateQueue is the abstract API for an update queue
  this.updater = updater || ReactNoopUpdateQueue
}

Component 的原型对象上有这么几个属性，分别是isReactComponent，setState，forceUpdate，isMounted，replaceState。其中，isMounted和replaceState不推荐使用了，后续版本会移除的。

  • isReactComponent是一个空对象。
ReactComponent.prototype.isReactComponent = {}
  • setState()方法，改变组件state时应该总是使用这个方法，把state看成一个不可变对象。当调用setState()方法时，不会保证立即执行setState函数，也不会立即改变state对象，因为它的执行是一个异步的。它可以有两个参数，第一个参数是对象或者函数，这个函数返回一个对象，第二个参数是一个callback，当setState实际执行完成时会回调这个callback
ReactComponent.prototype.setState = function(partialState, callback) {
  !(
    typeof partialState === "obejct" ||
    typeof partialState === "function" ||
    partialState == null
  )
    ? "警告或者直接报错....."
    : void 0
  // 将当前更新入队
  this.updater.enqueueSetState(this, partialState)
  if (callback) {
    // 将当前callback入队
    this.updater.enqueueCallback(this, callback, "setState")
  }
}
  • forceUpdate()方法，强制更新，谨慎使用，当你知道某些深成次的state已经发生变化了，但没有调用setState()时，你可以调用forceUpdate()。调用forceUpdate()不会触发shouldComponent，会触发componentWillUpdate和componentDidUpdate方法。
ReactComponent.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this)
  if (callback) {
    this.updater.enqueueCallback(this, callback, "forceUpdate")
  }
}

再来看一下PureComponent，它与Component结构一样，只不过在其原型对象上增加一个isPureComponent=true的属性。

function ComponentDummy() {}
ComponentDummy.prototype = ReactComponent.prototype
ReactPureComponent.prototype = new ComponentDummy()
ReactPureComponent.prototype.constructor = ReactPureComponent
// Avoid an extra prototype jump for these methods.
_assign(ReactPureComponent.prototype, ReactComponent.prototype)
ReactPureComponent.prototype.isPureReactComponent = true

「react 版本 15.5.4」


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK