React的react-side-effect/react-document.title源码浅析

问题1：基本概念

（1）创建一个组件，该组件的prop的改变会被映射到全局的side effect上（因为如果一个组件的props改变，那么该数组中放的所有的组件实例都会调用emitChange，并根据他们的props得到我们最终的state）
（2）和componentDidMount的不同
他会收集所有当前整棵树的props才会把他传递给side effect（我的理解是handleStateChangeOnClient/mapStateOnServer方法）

（3）API签名：

  withSideEffect: (reducePropsToState,handleStateChangeOnClient,[mapStateOnServer]) -> ReactComponent -> ReactComponent

这是一个高阶组件，当mounting,unmounting or receiving new props等生命周期方法被调用的时候都会调用reducePropsToState，同时传入每一个已经挂载的实例对象的props，你可以操作这些挂载的props然后返回一个state。在客户端，每次这个组件被挂载/卸载或者他的props属性发生变化，reducePropsToState都会被调用，同时这个重新计算得到的state对象会被传入到handleStateChangeOnClient，在这个函数中你可以使用这个state去触发side effect；在服务端handleStateChangeOnClient不会被触发，但是在调用renderToString后你可以调用返回的组件的静态方法rewind去获取当前的state，如果在调用了renderToString后你忘记了调用rewind，那么内部的组件实例对象的调用栈会继续增长，最后会产生内存泄漏和错误的信息，因此在服务端每次调用renderToString后你必须手动调用rewind；在测试环境中，你可以使用返回的组件的静态方法peek,他允许你获取当前的state同时不会重置已经挂载的组件的实例栈，但是在非测试环境中不要使用
（4）调用方式如下，其会返回一个新的组件实例SideEffect

  export default withSideEffect(
        reducePropsToState,//会找到所有的实例对象的props,并得到最终的state
        handleStateChangeOnClient//
      )(BodyStyle);

问题2：源码如下

module.exports = function withSideEffect(
  reducePropsToState,mapStateOnServer
) {
  if (typeof reducePropsToState !== 'function') {
    throw new Error('Expected reducePropsToState to be a function.');
  }
  if (typeof handleStateChangeOnClient !== 'function') {
    throw new Error('Expected handleStateChangeOnClient to be a function.');
  }
  if (typeof mapStateOnServer !== 'undefined' && typeof mapStateOnServer !== 'function') {
   throw new Error('Expected mapStateOnServer to either be undefined or a function.');
  }

  //包裹元素的displayName，name，如果没有这两个属性，那么返回'Component'字符串
  function getdisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  }

  //接受一个包裹组件WrappedComponent,同时返回一个组件，也就是SideEffect组件的实例对象
  return function wrap(WrappedComponent) {
    if (typeof WrappedComponent !== 'function') {
      throw new Error('Expected WrappedComponent to be a React component.');
    }

    let mountedInstances = [];
    //已经挂载的组件的实例

    let state;

    //如果组件已经更新，那么对每一个组件实例都调用我们的reducePropsToState方法并得到最终的state
    //如果可以操作DOM，那么我们调用handleStateChangeOnClient方法并传入我们的最终的state，否则
    //调用mapStateOnServer并传入我们的state
    function emitChange() {
      state = reducePropsToState(mountedInstances.map(function (instance) {
        return instance.props;
      }));

      if (SideEffect.canUseDOM) {
        handleStateChangeOnClient(state);
      } else if (mapStateOnServer) {
        state = mapStateOnServer(state);
      }
    }

    //这个类实际上是一个函数，其可以访问我们外部定义的mountedInstances数组，这样每个WrappedComponent实例
    //都是有一个自己的私有的实例数组的！
    class SideEffect extends Component {
      // Try to use displayName of wrapped component
      static displayName = `SideEffect(${getdisplayName(WrappedComponent)})`;
      //静态属性

      // Expose canUseDOM so tests can monkeypatch it
      static canUseDOM = ExecutionEnvironment.canUseDOM;
      //是否可以使用DOM

      //获取当前的state，同时不会重置当前已经挂载的组件实例栈，不要在非测试环境中使用
      static peek() {
        return state;
      }

      //在服务端handleStateChangeOnClient不会被触发，但是在调用renderToString后你可以调用返回的组件的静态方法rewind去获取当前的state，如果在调用了renderToString后你忘记了调用rewind，那么内部的组件实例对象的调用栈会
      //继续增长，最后会产生内存泄漏和错误的信息，因此在服务端每次调用renderToString后你必须手动调用rewind
      static rewind() {
        //服务端才能调用
        if (SideEffect.canUseDOM) {
          throw new Error('You may only call rewind() on the server. Call peek() to read the current state.');
        }
        let recordedState = state;
        state = undefined;
        mountedInstances = [];
        //返回state,但是已经挂载的实例会全部被重置，同时state被重置为null
        return recordedState;
      }
      
      //接受SideEffect的新的props属性，如果属性值不相同那么才会更新组件
      shouldComponentUpdate(nextProps) {
        return !shallowEqual(nextProps,this.props);
      }

      //你每次实例化SideEffect这个类的时候，就会在数组中放入我们的this对象并遍历所有的实例对象得到最终的state
      componentwillMount() {
        mountedInstances.push(this);
        emitChange();
      }
    
      //如果组件已经更新
      componentDidUpdate() {
        emitChange();
      }
      
      //找到卸载的这个组件在数组中的下标并删除，同时调用emitChange
      componentwillUnmount() {
        const index = mountedInstances.indexOf(this);
        mountedInstances.splice(index,1);
        emitChange();
      }

      //此处的SideEffect实例化传入的props会被传入到我们的包裹组件WrappedComponent中，此处就是高阶组件
      //每一个实例对象都会调用一次render方法
      render() {
        return <WrappedComponent {...this.props} />;
      }
    }

    return SideEffect;
  }
}

问题3：在react-document-title中的使用

'use strict';

var React = require('react'),withSideEffect = require('react-side-effect');

//传入每一个被挂载的组件的props属性，然后让开发者自己控制应该返回的state属性
function reducePropsToState(propsList) {
  var innermostProps = propsList[propsList.length - 1];
  if (innermostProps) {
    return innermostProps.title;
  }
}

//重新计算得到的state会被传入到这个函数
function handleStateChangeOnClient(title) {
  var nextTitle = title || '';
  if (nextTitle !== document.title) {
    document.title = nextTitle;
  }
}

//接受一个DocumentTitle组件，返回一个SideEffect实例
var DocumentTitle = React.createClass({
  displayName: 'DocumentTitle',propTypes: {
    title: React.PropTypes.string.isrequired
  },//每次实例化一个DocumentTitle都会调用该render方法
  render: function render() {
    if (this.props.children) {
      return React.Children.only(this.props.children);
    } else {
      return null;
    }
  }
});

//调用方式如下：
/*
 <DocumentTitle title='Home'>
    <h1>Home,sweet home.</h1>
  </DocumentTitle>
*/ 
module.exports = withSideEffect(
  reducePropsToState,handleStateChangeOnClient
)(DocumentTitle);

参考资料：

React-side-effect

react-document-title

React的react-side-effect/react-document.title源码浅析

相关推荐