本地调试React代码的方法
yarn build
场景
假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。
16之前
在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换
16之后
在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedStateFromProps 可以返回 null 或者一个对象，如果是对象，则会更新 state
getDerivedStateFromProps触发条件
我们的目标就是找到 getDerivedStateFromProps 的 触发条件
我们知道，只要调用 setState 就会触发 getDerivedStateFromProps ，并且 props 的值相同，也会触发 getDerivedStateFromProps (16.3版本之后)
setState 在 react.development.js 当中
Component.prototype.setState = function (partialState, callback) { !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0; this.updater.enqueueSetState(this, partialState, callback, 'setState'); }; ReactNoopUpdateQueue { //...部分省略 enqueueSetState: function (publicInstance, partialState, callback, callerName) { warnNoop(publicInstance, 'setState'); } }
执行的是一个警告方法
function warnNoop(publicInstance, callerName) { { // 实例的构造体 var _constructor = publicInstance.constructor; var componentName = _constructor && (_constructor.displayName || _constructor.name) || 'ReactClass'; // 组成一个key 组件名称+方法名（列如setState） var warningKey = componentName + '.' + callerName; // 如果已经输出过警告了就不会再输出 if (didWarnStateUpdateForUnmountedComponent[warningKey]) { return; } // 在开发者工具的终端里输出警告日志 不能直接使用 component.setState来调用 warningWithoutStack$1(false, "Can't call %s on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in the %s component.', callerName, componentName); didWarnStateUpdateForUnmountedComponent[warningKey] = true; } }
看来 ReactNoopUpdateQueue 是一个抽象类，实际的方法并不是在这里实现的，同时我们看下最初 updater 赋值的地方，初始化 Component 时，会传入实际的 updater
function Component(props, context, updater) { this.props = props; this.context = context; // If a component has string refs, we will assign a different object later. this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the // renderer. this.updater = updater || ReactNoopUpdateQueue; }
我们在组件的构造方法当中将 this 进行打印
class App extends Component { constructor(props) { super(props); //..省略 console.log('constructor', this); } }
方法指向的是，在 react-dom.development.js 的 classComponentUpdater
var classComponentUpdater = { // 是否渲染 isMounted: isMounted, enqueueSetState: function(inst, payload, callback) { // inst 是fiber inst = inst._reactInternalFiber; // 获取时间 var currentTime = requestCurrentTime(); currentTime = computeExpirationForFiber(currentTime, inst); // 根据更新时间初始化一个标识对象 var update = createUpdate(currentTime); update.payload = payload; void 0 !== callback && null !== callback && (update.callback = callback); // 排队更新 将更新任务加入队列当中 enqueueUpdate(inst, update); // scheduleWork(inst, currentTime); }, // ..省略 } enqueueUpdate
就是将更新任务加入队列当中
function enqueueUpdate(fiber, update) { var alternate = fiber.alternate; // 如果alternat为空并且更新队列为空则创建更新队列 if (null === alternate) { var queue1 = fiber.updateQueue; var queue2 = null; null === queue1 && (queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState)); } else (queue1 = fiber.updateQueue), (queue2 = alternate.updateQueue), null === queue1 ? null === queue2 ? ((queue1 = fiber.updateQueue = createUpdateQueue( fiber.memoizedState )), (queue2 = alternate.updateQueue = createUpdateQueue( alternate.memoizedState ))) : (queue1 = fiber.updateQueue = cloneUpdateQueue(queue2)) : null === queue2 && (queue2 = alternate.updateQueue = cloneUpdateQueue(queue1)); null === queue2 || queue1 === queue2 ? appendUpdateToQueue(queue1, update) : null === queue1.lastUpdate || null === queue2.lastUpdate ? (appendUpdateToQueue(queue1, update), appendUpdateToQueue(queue2, update)) : (appendUpdateToQueue(queue1, update), (queue2.lastUpdate = update)); }
我们看scheduleWork下