问题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,
handleStateChangeOnClient,
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);
参考资料: