React和Vue中监听变量变化的方法

2020-06-14 06:31:45易采站长站整理

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下


function scheduleWork(fiber, expirationTime) {
// 获取根 node
var root = scheduleWorkToRoot(fiber, expirationTime);