1、获取setState异步更新后的结果
1、setState更新后一个回调函数，可以通过回调函数获取更新后的值
this.setState({
counter: this.state.counter + 1
}, () => { //
console.log('更新完成！')
})
2、componentDidUpdate() 生命周期函数可以获取回更新后的值
componentDidUpdate() {
console.log(this.state.counter);
}
2、实现setState同步更新
1、setState用定时器包裹，设置定时器时间为0
setTimeout(() => {
this.setState({
counter: this.state.counter + 1
}, () => {
});
console.log(this.state.counter);
}, 0);
2、通过监听原生的DOM事件会滴
componentDidMount() {
document.getElementById("btn").addEventListener("click", ()=> {
this.setState({
counter: this.state.counter + 1
}, () => {
})
console.log(this.state.counter);
});
}
小结：
- 在组件生命周期或React合成事件中，setState是异步
- 在setTimeout或者原生dom事件中，setState是同步
例如
import React, { Component } from 'react'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
message: "好消息啊"
}
}
componentDidUpdate() {
}
componentDidMount() {
document.getElementById("btn").addEventListener("click", ()=> {
this.setState({
message: "你好啊，领导们"
}, () => {
})
console.log(this.state.message)
})
}
render() {
return (
<div style={{flexDirection: "column"}}>
<h2>{this.state.message}</h2>
{/*react 的合成事件*/}
<button onClick={e => this.changeText()}>改变文本</button>
<button id={"btn"} >改变文本2</button>
</div>
)
}
changeMessage() {
setTimeout(() => {
this.setState({
message: "你好啊，领导们"
}, () => {
})
console.log(this.state.message)
}, 0);
}
}
源码分析setState
平时看源码时主要是看 react、react-dom、react-reconciler 三个文件夹
setState的调用入口
// react/src/ReactBaseClasses.js line 57
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
this.updater调用的是 ReactFiberClassComponent.new.js中的enqueueSetState方法
// react-reconciler/src/forks/ReactFiberClassComponent.new.js line194
const classComponentUpdater = {
isMounted,
enqueueSetState(inst, payload, callback) {
const fiber = getInstance(inst);
const eventTime = requestEventTime();
// line 199 返回确定是使用同步还是异步执行的方式
const lane = requestUpdateLane(fiber)；
const update = createUpdate(eventTime, lane); // 返回记录要更新的内容
update.payload = payload;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'setState');
}
update.callback = callback;
}
enqueueUpdate(fiber, update); // 将本次需要update的内容加入到队列中
scheduleUpdateOnFiber(fiber, lane, eventTime);
... // 省略
},
};
查看requestUpdateLane调用方法，返回SyncLane同步或者SyncBatchedLane批处理
// react-reconciler/src/forks/ReactFiberWorkLoop.new.js line 506
function requestRetryLane(fiber: Fiber) {
// This is a fork of `requestUpdateLane` designed specifically for Suspense
// "retries" — a special update that attempts to flip a Suspense boundary
// from its placeholder state to its primary/resolved state.
// Special cases
const mode = fiber.mode;
if ((mode & BlockingMode) === NoMode) {
return (SyncLane: Lane); // 返回执行方式
} else if ((mode & ConcurrentMode) === NoMode) {
return getCurrentPriorityLevel() === ImmediateSchedulerPriority
? (SyncLane: Lane)
: (SyncBatchedLane: Lane); // 批处理
}
// See `requestUpdateLane` for explanation of `currentEventWipLanes`
if (currentEventWipLanes === NoLanes) {
currentEventWipLanes = workInProgressRootIncludedLanes;
}
return findRetryLane(currentEventWipLanes);
}
查看enqueueUpdate 方法
// react-reconciler/src/forks/ReactUpdateQueue.new.js line 506
export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
const updateQueue = fiber.updateQueue;
if (updateQueue === null) {
// Only occurs if the fiber has been unmounted.
return;
}
const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
const pending = sharedQueue.pending;
if (pending === null) {
// This is the first update. Create a circular list.
update.next = update; // 将需要update的内容组成一个链表
} else {
update.next = pending.next;
pending.next = update;
}
sharedQueue.pending = update;
}
3、setState数据合并
同时执行多条setState的时候底层源码会进行合并操作
1、执行的setState为对象
this.setState({
couner: prevState.couner + 1
})
this.setState({
couner: prevState.couner + 1
})
this.setState({
couner: prevState.couner + 1
})
2、执行setState是一个函数
this.setState((prevState, props) => {
return {
couner: prevState.couner + 1
}
})
this.setState((prevState, props) => {
return {
couner: prevState.couner + 1
}
})
this.setState((prevState, props) => {
return {
couner: prevState.couner + 1
}
})
源码分析
1）、执行的setState为对象时其实是通过do..while循环多次调用getStateFromUpdate方法
执行 Object.assign({}, prevState, partialState)，每次执行的时候prevState都是原来的state，而不是上一条state，因此最终合并成最后一次执行的setState方法。
2）、执行setState是一个函数，getStateFromUpdate会判断typeof payload === 'function'是否是一个函数，如果是一个函数，直接执行方法payload.call(instance, prevState, nextProps);，对每一条count进行+1操作
// react-reconciler/src/forks/ReactUpdateQueue.new.js line 384
// line 311
function getStateFromUpdate<State>(
workInProgress: Fiber,
queue: UpdateQueue<State>,
update: Update<State>,
prevState: State,
nextProps: any,
instance: any,
): any {
switch (update.tag) {
case ReplaceState: {
const payload = update.payload;
if (typeof payload === 'function') {
// Updater function
const nextState = payload.call(instance, prevState, nextProps);
return nextState;
}
// State object
return payload;
}
case CaptureUpdate: {
workInProgress.flags =
(workInProgress.flags & ~ShouldCapture) | DidCapture;
}
// Intentional fallthrough
case UpdateState: {
const payload = update.payload;
let partialState;
if (typeof payload === 'function') {
// Updater function
partialState = payload.call(instance, prevState, nextProps);
} else {
// Partial state object
partialState = payload;
}
if (partialState === null || partialState === undefined) {
// Null and undefined are treated as no-ops.
return prevState;
}
// Merge the partial state and the previous state.
return Object.assign({}, prevState, partialState); // 合并state数据
}
case ForceUpdate: {
hasForceUpdate = true;
return prevState;
}
}
return prevState;
}
processUpdateQueue方法的do..while循环操作
// react-reconciler/src/forks/ReactUpdateQueue.new.js line 394
export function processUpdateQueue<State>(
workInProgress: Fiber,
props: any,
instance: any,
renderLanes: Lanes,
): void {
// This is always non-null on a ClassComponent or HostRoot
const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
hasForceUpdate = false;
let firstBaseUpdate = queue.firstBaseUpdate;
let lastBaseUpdate = queue.lastBaseUpdate;
// Check if there are pending updates. If so, transfer them to the base queue.
let pendingQueue = queue.shared.pending;
if (pendingQueue !== null) {
queue.shared.pending = null;
// The pending queue is circular. Disconnect the pointer between first
// and last so that it's non-circular.
const lastPendingUpdate = pendingQueue;
const firstPendingUpdate = lastPendingUpdate.next;
lastPendingUpdate.next = null;
// Append pending updates to base queue
if (lastBaseUpdate === null) {
firstBaseUpdate = firstPendingUpdate;
} else {
lastBaseUpdate.next = firstPendingUpdate;
}
lastBaseUpdate = lastPendingUpdate;
// If there's a current queue, and it's different from the base queue, then
// we need to transfer the updates to that queue, too. Because the base
// queue is a singly-linked list with no cycles, we can append to both
// lists and take advantage of structural sharing.
// TODO: Pass `current` as argument
const current = workInProgress.alternate;
if (current !== null) {
// This is always non-null on a ClassComponent or HostRoot
const currentQueue: UpdateQueue<State> = (current.updateQueue: any);
const currentLastBaseUpdate = currentQueue.lastBaseUpdate;
if (currentLastBaseUpdate !== lastBaseUpdate) {
if (currentLastBaseUpdate === null) {
currentQueue.firstBaseUpdate = firstPendingUpdate;
} else {
currentLastBaseUpdate.next = firstPendingUpdate;
}
currentQueue.lastBaseUpdate = lastPendingUpdate;
}
}
}
// These values may change as we process the queue.
if (firstBaseUpdate !== null) {
// Iterate through the list of updates to compute the result.
let newState = queue.baseState;
// TODO: Don't need to accumulate this. Instead, we can remove renderLanes
// from the original lanes.
let newLanes = NoLanes;
let newBaseState = null;
let newFirstBaseUpdate = null;
let newLastBaseUpdate = null;
let update = firstBaseUpdate;
do {
const updateLane = update.lane;
const updateEventTime = update.eventTime;
if (!isSubsetOfLanes(renderLanes, updateLane)) {
// Priority is insufficient. Skip this update. If this is the first
// skipped update, the previous update/state is the new base
// update/state.
const clone: Update<State> = {
eventTime: updateEventTime,
lane: updateLane,
tag: update.tag,
payload: update.payload,
callback: update.callback,
next: null,
};
if (newLastBaseUpdate === null) {
newFirstBaseUpdate = newLastBaseUpdate = clone;
newBaseState = newState;
} else {
newLastBaseUpdate = newLastBaseUpdate.next = clone;
}
// Update the remaining priority in the queue.
newLanes = mergeLanes(newLanes, updateLane);
} else {
// This update does have sufficient priority.
if (newLastBaseUpdate !== null) {
const clone: Update<State> = {
eventTime: updateEventTime,
// This update is going to be committed so we never want uncommit
// it. Using NoLane works because 0 is a subset of all bitmasks, so
// this will never be skipped by the check above.
lane: NoLane,
tag: update.tag,
payload: update.payload,
callback: update.callback,
next: null,
};
newLastBaseUpdate = newLastBaseUpdate.next = clone;
}
// Process this update.
// 合并所有的setState方法，将其合并成一个state
newState = getStateFromUpdate(
workInProgress,
queue,
update,
newState,
props,
instance,
);
const callback = update.callback;
if (callback !== null) {
workInProgress.flags |= Callback;
const effects = queue.effects;
if (effects === null) {
queue.effects = [update];
} else {
effects.push(update);
}
}
}
update = update.next;
if (update === null) {
pendingQueue = queue.shared.pending;
if (pendingQueue === null) {
break;
} else {
// An update was scheduled from inside a reducer. Add the new
// pending updates to the end of the list and keep processing.
const lastPendingUpdate = pendingQueue;
// Intentionally unsound. Pending updates form a circular list, but we
// unravel them when transferring them to the base queue.
const firstPendingUpdate = ((lastPendingUpdate.next: any): Update<State>);
lastPendingUpdate.next = null;
update = firstPendingUpdate;
queue.lastBaseUpdate = lastPendingUpdate;
queue.shared.pending = null;
}
}
} while (true);
if (newLastBaseUpdate === null) {
newBaseState = newState;
}
queue.baseState = ((newBaseState: any): State);
queue.firstBaseUpdate = newFirstBaseUpdate;
queue.lastBaseUpdate = newLastBaseUpdate;
// Set the remaining expiration time to be whatever is remaining in the queue.
// This should be fine because the only two other things that contribute to
// expiration time are props and context. We're already in the middle of the
// begin phase by the time we start processing the queue, so we've already
// dealt with the props. Context in components that specify
// shouldComponentUpdate is tricky; but we'll have to account for
// that regardless.
markSkippedUpdateLanes(newLanes);
workInProgress.lanes = newLanes;
workInProgress.memoizedState = newState;
}
}
4、setState的不可变力量
使用延展操作符对数组进行深拷贝
handleClick() {
this.setState(state => ({
words: [...state.words, 'marklar'],
}));
};
网友评论