superdc / myblogs Goto Github PK

var Constructor = identity(function(props, context, updater) {
  // ...
  // 这里就是实现自动绑定
  if (this.__reactAutoBindPairs.length) {
    bindAutoBindMethods(this);
  }
 // ...
});

function bindAutoBindMethods(component) {
  var pairs = component.__reactAutoBindPairs;
  for (var i = 0; i < pairs.length; i += 2) {
    var autoBindKey = pairs[i];
    var method = pairs[i + 1];
    component[autoBindKey] = bindAutoBindMethod(
      component,
      method
    );
  }
}
// component为当前实例
function bindAutoBindMethod(component, method) {
  var boundMethod = method.bind(component);
  // ...
  return boundMethod;
}

function mixSpecIntoComponent(Constructor, spec) {
  // ...
  var proto = Constructor.prototype;
  var autoBindPairs = proto.__reactAutoBindPairs;

  // 先处理mixins, 因为这里可能会重写React的内部方法
  if (spec.hasOwnProperty(MIXINS_KEY)) {
    RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
  }

  for (var name in spec) {
    if (!spec.hasOwnProperty(name)) {
      continue;
    }

    if (name === MIXINS_KEY) {
      // We have already handled mixins in a special case above.
      continue;
    }

    var property = spec[name];
    var isAlreadyDefined = proto.hasOwnProperty(name);
    validateMethodOverride(isAlreadyDefined, name);

    if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
      RESERVED_SPEC_KEYS[name](Constructor, property);
    } else {
      var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);
      var isFunction = typeof property === 'function';
      /*
       shouldAutoBind的判定如下：
       1. 是函数
       2. 不是ReactClassInterface借口中定义的内部方法
       3. 没有定义过（已经在处理mixins的时候处理了）
       4. 没有将方法的autobind方法显式定义为false
      */
      var shouldAutoBind =
        isFunction &&
        !isReactClassMethod &&
        !isAlreadyDefined &&
        spec.autobind !== false;

      if (shouldAutoBind) {
        autoBindPairs.push(name, property);
        proto[name] = property;
      } else {
        if (isAlreadyDefined) {
          var specPolicy = ReactClassInterface[name];
          // methods before calling the new property, merging if appropriate.
          if (specPolicy === 'DEFINE_MANY_MERGED') {
            proto[name] = createMergedResultFunction(proto[name], property);
          } else if (specPolicy === 'DEFINE_MANY') {
            proto[name] = createChainedFunction(proto[name], property);
          }
        } else {
          proto[name] = property;
        }
      }
    }
  }
}

var ReactClassComponent = function() {};
Object.assign(
  ReactClassComponent.prototype,
  ReactComponent.prototype, // 注意，我们看到`ReactComponent`的身影喽，先按下不表。
  ReactClassMixin
);
var ReactClassMixin = {
  replaceState: function(newState, callback) { //... },  // 要被废弃了
  isMounted: function() { // ... },
};

function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

ReactComponent.prototype.isReactComponent = {};
ReactComponent.prototype.setState = function(partialState, callback) {
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'setState');
  }
};

ReactComponent.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'forceUpdate');
  }
};

var Container = React.createClass({
  // 调用后赋值到构造函数的静态属性defaultProps上
  getDefaultProps: function() {
    // 注意：这里拿不到组件实例
    return { text: 'num' };
  },
  // 实例化时调用，赋值到实例的state属性上
  getInitialState: function() {
    return { num: 0 };
  },
  // 原型属性，this绑定了实例
  handleClick: function() {
    this.setState({
        num: this.state.num + 1
    });
  },
  // 原型属性
  render: function() {
    return (
        <button onClick={this.handleClick}>{this.props.text}: {this.state.num}</button>
    );
  }
});

class Container extends React.Component {
  // 构造函数的静态属性
  static defaultProps = {text: 'num'}; 
  constructor(props) {
    super(props);
    this.state = {num: 0}; // 实例属性
    this.handleClick = this.handleClick.bind(this);
  }
  // 原型属性，this未绑定实例
  handleClick() {
    this.setState({
      num: this.state.num + 1
    });
  }
  // 原型属性
  render() {
    return (
      <button onClick={this.handleClick}>{this.props.text}: {this.state.num}</button>
    );
  }
}

  componentDidMount() {
    this.setState({
      num: this.state.num + 1
    });
    this.setState({
      num: this.state.num + 1
    });
  }

internalInstance._pendingStateQueue.push(1,1)

dispatchEvent: function(topLevelType, nativeEvent) {
    if (!ReactEventListener._enabled) {
      return;
    }
    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
      topLevelType,
      nativeEvent
    );
    try {
      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
    } finally {
      TopLevelCallbackBookKeeping.release(bookKeeping);
    }
  }

button.onclick = function(){
    // this指向当前元素
    alert(this.value); 
    // 可以取到event对象
    alert(event.type);
}
// 这也提醒我们属性内容应该是一个函数调用

<input id="elem" type="button" value="Click me">
<script>
  var elem = document.getElementById('elem');
  // 指定事件处理程序
  elem.onclick = function() {
    // this指向当前元素
    alert(this.value);
    // 可以取到event对象
    alert(event.type);
  };
  // 删除事件处理程序
  elem.onclick = null;
</script>

// 旧语法
target.addEventListener(type, listener[, useCapture]);

// 新语法
target.addEventListener(type, listener[, options]);

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

element.addEventListener("mousedown", handleMouseDown, { passive: true });

element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Succeed
element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Succeed
element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Fail
element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Succeed
element.removeEventListener("mousedown", handleMouseDown, false);                 // Succeed
element.removeEventListener("mousedown", handleMouseDown, true);                  // Fail

//添加事件处理程序
target.attachEvent(eventNameWithOn, callback);

elem.attchEvent('onclick', function(){
  // this是window, 不是element
  console.log(this===window);  // true
});
//删除事件处理程序
target.detachEvent(eventNameWithOn, callback);

class Stack{
  constructor(){
    this.stack = [];
  }
  push(item){
    this.stack.push(item);
  }
  pop(){
    this.stack.pop(item);
  }
  // 返回栈顶元素，但不删除
  peek(){
    return this.stack[this.getCount()-1];
  }
  getCount(){
    return this.stack.length;
  }
  isEmpty(){
    return this.getCount().length === 0;
  }
}

let isValid = function(s) {
    const map = {
        '(': ')',
        '[': ']',
        '{': '}'
    }
    let stack = [];
    let last;
    for(let i = 0,l = s.length; i < l; i++){
        if(map[s[i]]){
            stack.push(map[s[i]]);
        }else{
            last = stack.pop();
            if(last != s[i]) return false;
        }
    }
    if(stack.length != 0) return false;
    return true;
};