Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use applyDerivedStateFromProps method in Playwright Internal
Best JavaScript code snippet using playwright-internal
ReactFiberClassComponent.new.js
Source:ReactFiberClassComponent.new.js 
...49} from './SchedulingProfiler';50// React.Component uses a shared frozen object by default.51// We'll use it to determine whether we need to initialize legacy refs.52export const emptyRefsObject = new React.Component().refs;53export function applyDerivedStateFromProps(54 workInProgress: Fiber,55 ctor: any,56 getDerivedStateFromProps: (props: any, state: any) => any,57 nextProps: any,58) {59 const prevState = workInProgress.memoizedState;60 const partialState = getDerivedStateFromProps(nextProps, prevState);61 // Merge the partial state and the previous state.62 const memoizedState =63 partialState === null || partialState === undefined64 ? prevState65 : Object.assign({}, prevState, partialState);66 workInProgress.memoizedState = memoizedState;67 // Once the update queue is empty, persist the derived state onto the68 // base state.69 if (workInProgress.lanes === NoLanes) {70 // Queue is always non-null for classes71 const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);72 updateQueue.baseState = memoizedState;73 }74}75const classComponentUpdater = {76 isMounted,77 enqueueSetState(inst, payload, callback) {78 // è·åå½å触åæ´æ°çfiberèç¹ãinstæ¯ç»ä»¶å®ä¾79 const fiber = getInstance(inst);80 // eventTimeæ¯å½å触åæ´æ°çæ¶é´æ³81 const eventTime = requestEventTime();82 // è·åæ¬æ¬¡updateçä¼å
级83 const lane = requestUpdateLane(fiber);84 // å建update对象85 const update = createUpdate(eventTime, lane);86 // payloadå°±æ¯setStateçåæ°ï¼åè°å½æ°æè
æ¯å¯¹è±¡çå½¢å¼ã87 // å¤çæ´æ°æ¶åä¸è®¡ç®æ°ç¶æçè¿ç¨88 update.payload = payload;89 if (callback !== undefined && callback !== null) {90 update.callback = callback;91 }92 // payloadå°±æ¯setStateçåæ°ï¼åè°å½æ°æè
æ¯å¯¹è±¡çå½¢å¼ã93 // å建çupdateå
¥éupdateQueue94 enqueueUpdate(fiber, update);95 // å¼å§è¿è¡è°åº¦96 scheduleUpdateOnFiber(fiber, lane, eventTime);97 if (enableSchedulingProfiler) {98 markStateUpdateScheduled(fiber, lane);99 }100 },101 enqueueReplaceState(inst, payload, callback) {102 const fiber = getInstance(inst);103 const eventTime = requestEventTime();104 const lane = requestUpdateLane(fiber);105 const update = createUpdate(eventTime, lane);106 // ä¸enqueueSetStateçå¯ä¸åºå«107 update.tag = ReplaceState;108 update.payload = payload;109 if (callback !== undefined && callback !== null) {110 update.callback = callback;111 }112 enqueueUpdate(fiber, update);113 scheduleUpdateOnFiber(fiber, lane, eventTime);114 if (enableSchedulingProfiler) {115 markStateUpdateScheduled(fiber, lane);116 }117 },118 enqueueForceUpdate(inst, callback) {119 const fiber = getInstance(inst);120 const eventTime = requestEventTime();121 const lane = requestUpdateLane(fiber);122 const update = createUpdate(eventTime, lane);123 // ä¸enqueueSetStateçå¯ä¸åºå«124 update.tag = ForceUpdate;125 if (callback !== undefined && callback !== null) {126 update.callback = callback;127 }128 enqueueUpdate(fiber, update);129 scheduleUpdateOnFiber(fiber, lane, eventTime);130 if (enableSchedulingProfiler) {131 markForceUpdateScheduled(fiber, lane);132 }133 },134};135// å
é¨ä¼è°ç¨shouldComponentUpdateæ¹æ³ã以åå½è¯¥ClassComponent为PureComponentæ¶ä¼æµ
æ¯è¾stateä¸props136function checkShouldComponentUpdate(137 workInProgress,138 ctor,139 oldProps,140 newProps,141 oldState,142 newState,143 nextContext,144) {145 const instance = workInProgress.stateNode;146 // ä¼å
å¤çshouldComponentUpdate147 if (typeof instance.shouldComponentUpdate === 'function') {148 const shouldUpdate = instance.shouldComponentUpdate(149 newProps,150 newState,151 nextContext,152 );153 return shouldUpdate;154 }155 // å¦æ没æshouldComponentUpdateï¼åå¤çæ¯å¦æPureComponent156 if (ctor.prototype && ctor.prototype.isPureReactComponent) {157 // 该ClassComponent为PureComponentæ¶ä¼æµ
æ¯è¾stateä¸props158 return (159 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)160 );161 }162 // å¦åæ»æ¯è¿åæ´æ°163 return true;164}165function adoptClassInstance(workInProgress: Fiber, instance: any): void {166 instance.updater = classComponentUpdater;167 workInProgress.stateNode = instance;168 // The instance needs access to the fiber so that it can schedule updates169 setInstance(instance, workInProgress);170}171function constructClassInstance(172 workInProgress: Fiber,173 ctor: any,174 props: any,175): any {176 let isLegacyContextConsumer = false;177 let unmaskedContext = emptyContextObject;178 let context = emptyContextObject;179 const contextType = ctor.contextType;180 if (typeof contextType === 'object' && contextType !== null) {181 context = readContext((contextType: any));182 } else {183 unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);184 const contextTypes = ctor.contextTypes;185 isLegacyContextConsumer =186 contextTypes !== null && contextTypes !== undefined;187 context = isLegacyContextConsumer188 ? getMaskedContext(workInProgress, unmaskedContext)189 : emptyContextObject;190 }191 // Instantiate twice to help detect side-effects.192 const instance = new ctor(props, context);193 const state = (workInProgress.memoizedState =194 instance.state !== null && instance.state !== undefined195 ? instance.state196 : null);197 adoptClassInstance(workInProgress, instance);198 // Cache unmasked context so we can avoid recreating masked context unless necessary.199 // ReactFiberContext usually updates this cache but can't for newly-created instances.200 if (isLegacyContextConsumer) {201 cacheContext(workInProgress, unmaskedContext, context);202 }203 return instance;204}205function callComponentWillMount(workInProgress, instance) {206 const oldState = instance.state;207 if (typeof instance.componentWillMount === 'function') {208 instance.componentWillMount();209 }210 if (typeof instance.UNSAFE_componentWillMount === 'function') {211 instance.UNSAFE_componentWillMount();212 }213 if (oldState !== instance.state) {214 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);215 }216}217function callComponentWillReceiveProps(218 workInProgress,219 instance,220 newProps,221 nextContext,222) {223 const oldState = instance.state;224 if (typeof instance.componentWillReceiveProps === 'function') {225 instance.componentWillReceiveProps(newProps, nextContext);226 }227 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {228 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);229 }230 if (instance.state !== oldState) {231 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);232 }233}234// Invokes the mount life-cycles on a previously never rendered instance.235function mountClassInstance(236 workInProgress: Fiber,237 ctor: any,238 newProps: any,239 renderLanes: Lanes,240): void {241 const instance = workInProgress.stateNode;242 instance.props = newProps;243 instance.state = workInProgress.memoizedState;244 instance.refs = emptyRefsObject;245 initializeUpdateQueue(workInProgress);246 const contextType = ctor.contextType;247 if (typeof contextType === 'object' && contextType !== null) {248 instance.context = readContext(contextType);249 } else {250 const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);251 instance.context = getMaskedContext(workInProgress, unmaskedContext);252 }253 processUpdateQueue(workInProgress, newProps, instance, renderLanes);254 instance.state = workInProgress.memoizedState;255 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;256 if (typeof getDerivedStateFromProps === 'function') {257 applyDerivedStateFromProps(258 workInProgress,259 ctor,260 getDerivedStateFromProps,261 newProps,262 );263 instance.state = workInProgress.memoizedState;264 }265 // In order to support react-lifecycles-compat polyfilled components,266 // Unsafe lifecycles should not be invoked for components using the new APIs.267 if (268 typeof ctor.getDerivedStateFromProps !== 'function' &&269 typeof instance.getSnapshotBeforeUpdate !== 'function' &&270 (typeof instance.UNSAFE_componentWillMount === 'function' ||271 typeof instance.componentWillMount === 'function')272 ) {273 callComponentWillMount(workInProgress, instance);274 // If we had additional state updates during this life-cycle, let's275 // process them now.276 processUpdateQueue(workInProgress, newProps, instance, renderLanes);277 instance.state = workInProgress.memoizedState;278 }279 if (typeof instance.componentDidMount === 'function') {280 workInProgress.flags |= Update;281 }282}283function resumeMountClassInstance(284 workInProgress: Fiber,285 ctor: any,286 newProps: any,287 renderLanes: Lanes,288): boolean {289 const instance = workInProgress.stateNode;290 const oldProps = workInProgress.memoizedProps;291 instance.props = oldProps;292 const oldContext = instance.context;293 const contextType = ctor.contextType;294 let nextContext = emptyContextObject;295 if (typeof contextType === 'object' && contextType !== null) {296 nextContext = readContext(contextType);297 } else {298 const nextLegacyUnmaskedContext = getUnmaskedContext(299 workInProgress,300 ctor,301 true,302 );303 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);304 }305 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;306 const hasNewLifecycles =307 typeof getDerivedStateFromProps === 'function' ||308 typeof instance.getSnapshotBeforeUpdate === 'function';309 // Note: During these life-cycles, instance.props/instance.state are what310 // ever the previously attempted to render - not the "current". However,311 // during componentDidUpdate we pass the "current" props.312 // In order to support react-lifecycles-compat polyfilled components,313 // Unsafe lifecycles should not be invoked for components using the new APIs.314 if (315 !hasNewLifecycles &&316 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||317 typeof instance.componentWillReceiveProps === 'function')318 ) {319 if (oldProps !== newProps || oldContext !== nextContext) {320 callComponentWillReceiveProps(321 workInProgress,322 instance,323 newProps,324 nextContext,325 );326 }327 }328 resetHasForceUpdateBeforeProcessing();329 const oldState = workInProgress.memoizedState;330 let newState = (instance.state = oldState);331 processUpdateQueue(workInProgress, newProps, instance, renderLanes);332 newState = workInProgress.memoizedState;333 if (334 oldProps === newProps &&335 oldState === newState &&336 !hasContextChanged() &&337 !checkHasForceUpdateAfterProcessing()338 ) {339 // If an update was already in progress, we should schedule an Update340 // effect even though we're bailing out, so that cWU/cDU are called.341 if (typeof instance.componentDidMount === 'function') {342 workInProgress.flags |= Update;343 }344 return false;345 }346 if (typeof getDerivedStateFromProps === 'function') {347 applyDerivedStateFromProps(348 workInProgress,349 ctor,350 getDerivedStateFromProps,351 newProps,352 );353 newState = workInProgress.memoizedState;354 }355 const shouldUpdate =356 // checkHasForceUpdateAfterProcessingï¼æ¬æ¬¡æ´æ°çUpdateä¸åå¨tag为ForceUpdateï¼åè¿åtrue357 checkHasForceUpdateAfterProcessing() ||358 checkShouldComponentUpdate(359 workInProgress,360 ctor,361 oldProps,362 newProps,363 oldState,364 newState,365 nextContext,366 );367 if (shouldUpdate) {368 // In order to support react-lifecycles-compat polyfilled components,369 // Unsafe lifecycles should not be invoked for components using the new APIs.370 if (371 !hasNewLifecycles &&372 (typeof instance.UNSAFE_componentWillMount === 'function' ||373 typeof instance.componentWillMount === 'function')374 ) {375 if (typeof instance.componentWillMount === 'function') {376 instance.componentWillMount();377 }378 if (typeof instance.UNSAFE_componentWillMount === 'function') {379 instance.UNSAFE_componentWillMount();380 }381 }382 if (typeof instance.componentDidMount === 'function') {383 workInProgress.flags |= Update;384 }385 } else {386 // If an update was already in progress, we should schedule an Update387 // effect even though we're bailing out, so that cWU/cDU are called.388 if (typeof instance.componentDidMount === 'function') {389 workInProgress.flags |= Update;390 }391 // If shouldComponentUpdate returned false, we should still update the392 // memoized state to indicate that this work can be reused.393 workInProgress.memoizedProps = newProps;394 workInProgress.memoizedState = newState;395 }396 // Update the existing instance's state, props, and context pointers even397 // if shouldComponentUpdate returns false.398 instance.props = newProps;399 instance.state = newState;400 instance.context = nextContext;401 return shouldUpdate;402}403// Invokes the update life-cycles and returns false if it shouldn't rerender.404function updateClassInstance(405 current: Fiber,406 workInProgress: Fiber,407 ctor: any,408 newProps: any,409 renderLanes: Lanes,410): boolean {411 const instance = workInProgress.stateNode;412 cloneUpdateQueue(current, workInProgress);413 const unresolvedOldProps = workInProgress.memoizedProps;414 const oldProps =415 workInProgress.type === workInProgress.elementType416 ? unresolvedOldProps417 : resolveDefaultProps(workInProgress.type, unresolvedOldProps);418 instance.props = oldProps;419 const unresolvedNewProps = workInProgress.pendingProps;420 const oldContext = instance.context;421 const contextType = ctor.contextType;422 let nextContext = emptyContextObject;423 if (typeof contextType === 'object' && contextType !== null) {424 nextContext = readContext(contextType);425 } else {426 const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);427 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);428 }429 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;430 const hasNewLifecycles =431 typeof getDerivedStateFromProps === 'function' ||432 typeof instance.getSnapshotBeforeUpdate === 'function';433 // Note: During these life-cycles, instance.props/instance.state are what434 // ever the previously attempted to render - not the "current". However,435 // during componentDidUpdate we pass the "current" props.436 // In order to support react-lifecycles-compat polyfilled components,437 // Unsafe lifecycles should not be invoked for components using the new APIs.438 if (439 !hasNewLifecycles &&440 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||441 typeof instance.componentWillReceiveProps === 'function')442 ) {443 // unresolvedOldProps为ç»ä»¶ä¸æ¬¡æ´æ°æ¶çpropsï¼444 // èunresolvedNewPropsåæ¥èªClassComponentè°ç¨this.renderè¿åçJSXä¸çpropsåæ°ã445 // å¯è§ä»ä»¬çå¼ç¨æ¯ä¸åçãæ以ä»ä»¬å
¨çæ¯è¾ä¸ºfalse446 if (447 unresolvedOldProps !== unresolvedNewProps ||448 oldContext !== nextContext449 ) {450 // ä¼è°ç¨componentWillRecieveProps451 callComponentWillReceiveProps(452 workInProgress,453 instance,454 newProps,455 nextContext,456 );457 }458 }459 resetHasForceUpdateBeforeProcessing();460 const oldState = workInProgress.memoizedState;461 let newState = (instance.state = oldState);462 processUpdateQueue(workInProgress, newProps, instance, renderLanes);463 newState = workInProgress.memoizedState;464 if (465 unresolvedOldProps === unresolvedNewProps &&466 oldState === newState &&467 !hasContextChanged() &&468 !checkHasForceUpdateAfterProcessing()469 ) {470 // If an update was already in progress, we should schedule an Update471 // effect even though we're bailing out, so that cWU/cDU are called.472 if (typeof instance.componentDidUpdate === 'function') {473 if (474 unresolvedOldProps !== current.memoizedProps ||475 oldState !== current.memoizedState476 ) {477 workInProgress.flags |= Update;478 }479 }480 if (typeof instance.getSnapshotBeforeUpdate === 'function') {481 if (482 unresolvedOldProps !== current.memoizedProps ||483 oldState !== current.memoizedState484 ) {485 workInProgress.flags |= Snapshot;486 }487 }488 return false;489 }490 if (typeof getDerivedStateFromProps === 'function') {491 applyDerivedStateFromProps(492 workInProgress,493 ctor,494 getDerivedStateFromProps,495 newProps,496 );497 newState = workInProgress.memoizedState;498 }499 const shouldUpdate =500 checkHasForceUpdateAfterProcessing() ||501 checkShouldComponentUpdate(502 workInProgress,503 ctor,504 oldProps,505 newProps,...
ReactFiberClassComponent.old.js
Source:ReactFiberClassComponent.old.js
...51const isArray = Array.isArray;52// React.Component uses a shared frozen object by default.53// We'll use it to determine whether we need to initialize legacy refs.54export const emptyRefsObject = new React.Component().refs;55export function applyDerivedStateFromProps(56 workInProgress: Fiber,57 ctor: any,58 getDerivedStateFromProps: (props: any, state: any) => any,59 nextProps: any,60) {61 const prevState = workInProgress.memoizedState;62 const partialState = getDerivedStateFromProps(nextProps, prevState);63 // Merge the partial state and the previous state.64 const memoizedState =65 partialState === null || partialState === undefined66 ? prevState67 : Object.assign({}, prevState, partialState);68 workInProgress.memoizedState = memoizedState;69 // Once the update queue is empty, persist the derived state onto the70 // base state.71 if (workInProgress.lanes === NoLanes) {72 // Queue is always non-null for classes73 const updateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);74 updateQueue.baseState = memoizedState;75 }76}77const classComponentUpdater = {78 isMounted,79 enqueueSetState(inst, payload, callback) {80 const fiber = getInstance(inst);81 const eventTime = requestEventTime();82 const lane = requestUpdateLane(fiber);83 const update = createUpdate(eventTime, lane);84 update.payload = payload;85 if (callback !== undefined && callback !== null) {86 update.callback = callback;87 }88 enqueueUpdate(fiber, update);89 scheduleUpdateOnFiber(fiber, lane, eventTime);90 if (enableSchedulingProfiler) {91 markStateUpdateScheduled(fiber, lane);92 }93 },94 enqueueReplaceState(inst, payload, callback) {95 const fiber = getInstance(inst);96 const eventTime = requestEventTime();97 const lane = requestUpdateLane(fiber);98 const update = createUpdate(eventTime, lane);99 update.tag = ReplaceState;100 update.payload = payload;101 if (callback !== undefined && callback !== null) {102 update.callback = callback;103 }104 enqueueUpdate(fiber, update);105 scheduleUpdateOnFiber(fiber, lane, eventTime);106 if (enableSchedulingProfiler) {107 markStateUpdateScheduled(fiber, lane);108 }109 },110 enqueueForceUpdate(inst, callback) {111 const fiber = getInstance(inst);112 const eventTime = requestEventTime();113 const lane = requestUpdateLane(fiber);114 const update = createUpdate(eventTime, lane);115 update.tag = ForceUpdate;116 if (callback !== undefined && callback !== null) {117 update.callback = callback;118 }119 enqueueUpdate(fiber, update);120 scheduleUpdateOnFiber(fiber, lane, eventTime);121 if (enableSchedulingProfiler) {122 markForceUpdateScheduled(fiber, lane);123 }124 },125};126function checkShouldComponentUpdate(127 workInProgress,128 ctor,129 oldProps,130 newProps,131 oldState,132 newState,133 nextContext,134) {135 const instance = workInProgress.stateNode;136 if (typeof instance.shouldComponentUpdate === 'function') {137 const shouldUpdate = instance.shouldComponentUpdate(138 newProps,139 newState,140 nextContext,141 );142 return shouldUpdate;143 }144 if (ctor.prototype && ctor.prototype.isPureReactComponent) {145 return (146 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)147 );148 }149 return true;150}151function adoptClassInstance(workInProgress: Fiber, instance: any): void {152 instance.updater = classComponentUpdater;153 workInProgress.stateNode = instance;154 // The instance needs access to the fiber so that it can schedule updates155 setInstance(instance, workInProgress);156}157function constructClassInstance(158 workInProgress: Fiber,159 ctor: any,160 props: any,161): any {162 let isLegacyContextConsumer = false;163 let unmaskedContext = emptyContextObject;164 let context = emptyContextObject;165 const contextType = ctor.contextType;166 if (typeof contextType === 'object' && contextType !== null) {167 context = readContext((contextType: any));168 } else if (!disableLegacyContext) {169 unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);170 console.log('unmaskedContext', unmaskedContext);171 const contextTypes = ctor.contextTypes;172 isLegacyContextConsumer =173 contextTypes !== null && contextTypes !== undefined;174 context = isLegacyContextConsumer175 ? getMaskedContext(workInProgress, unmaskedContext)176 : emptyContextObject;177 }178 // Instantiate twice to help detect side-effects.179 const instance = new ctor(props, context);180 const state = (workInProgress.memoizedState =181 instance.state !== null && instance.state !== undefined182 ? instance.state183 : null);184 adoptClassInstance(workInProgress, instance);185 // Cache unmasked context so we can avoid recreating masked context unless necessary.186 // ReactFiberContext usually updates this cache but can't for newly-created instances.187 if (isLegacyContextConsumer) {188 cacheContext(workInProgress, unmaskedContext, context);189 }190 return instance;191}192function callComponentWillMount(workInProgress, instance) {193 const oldState = instance.state;194 if (typeof instance.componentWillMount === 'function') {195 instance.componentWillMount();196 }197 if (typeof instance.UNSAFE_componentWillMount === 'function') {198 instance.UNSAFE_componentWillMount();199 }200 if (oldState !== instance.state) {201 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);202 }203}204function callComponentWillReceiveProps(205 workInProgress,206 instance,207 newProps,208 nextContext,209) {210 const oldState = instance.state;211 if (typeof instance.componentWillReceiveProps === 'function') {212 instance.componentWillReceiveProps(newProps, nextContext);213 }214 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {215 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);216 }217 if (instance.state !== oldState) {218 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);219 }220}221// Invokes the mount life-cycles on a previously never rendered instance.222function mountClassInstance(223 workInProgress: Fiber,224 ctor: any,225 newProps: any,226 renderLanes: Lanes,227): void {228 const instance = workInProgress.stateNode;229 instance.props = newProps;230 instance.state = workInProgress.memoizedState;231 instance.refs = emptyRefsObject;232 initializeUpdateQueue(workInProgress);233 const contextType = ctor.contextType;234 if (typeof contextType === 'object' && contextType !== null) {235 instance.context = readContext(contextType);236 } else if (disableLegacyContext) {237 instance.context = emptyContextObject;238 } else {239 const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);240 instance.context = getMaskedContext(workInProgress, unmaskedContext);241 }242 processUpdateQueue(workInProgress, newProps, instance, renderLanes);243 instance.state = workInProgress.memoizedState;244 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;245 if (typeof getDerivedStateFromProps === 'function') {246 applyDerivedStateFromProps(247 workInProgress,248 ctor,249 getDerivedStateFromProps,250 newProps,251 );252 instance.state = workInProgress.memoizedState;253 }254 // In order to support react-lifecycles-compat polyfilled components,255 // Unsafe lifecycles should not be invoked for components using the new APIs.256 if (257 typeof ctor.getDerivedStateFromProps !== 'function' &&258 typeof instance.getSnapshotBeforeUpdate !== 'function' &&259 (typeof instance.UNSAFE_componentWillMount === 'function' ||260 typeof instance.componentWillMount === 'function')261 ) {262 callComponentWillMount(workInProgress, instance);263 // If we had additional state updates during this life-cycle, let's264 // process them now.265 processUpdateQueue(workInProgress, newProps, instance, renderLanes);266 instance.state = workInProgress.memoizedState;267 }268 if (typeof instance.componentDidMount === 'function') {269 workInProgress.flags |= Update;270 }271}272function resumeMountClassInstance(273 workInProgress: Fiber,274 ctor: any,275 newProps: any,276 renderLanes: Lanes,277): boolean {278 const instance = workInProgress.stateNode;279 const oldProps = workInProgress.memoizedProps;280 instance.props = oldProps;281 const oldContext = instance.context;282 const contextType = ctor.contextType;283 let nextContext = emptyContextObject;284 if (typeof contextType === 'object' && contextType !== null) {285 nextContext = readContext(contextType);286 } else if (!disableLegacyContext) {287 const nextLegacyUnmaskedContext = getUnmaskedContext(288 workInProgress,289 ctor,290 true,291 );292 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);293 }294 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;295 const hasNewLifecycles =296 typeof getDerivedStateFromProps === 'function' ||297 typeof instance.getSnapshotBeforeUpdate === 'function';298 // Note: During these life-cycles, instance.props/instance.state are what299 // ever the previously attempted to render - not the "current". However,300 // during componentDidUpdate we pass the "current" props.301 // In order to support react-lifecycles-compat polyfilled components,302 // Unsafe lifecycles should not be invoked for components using the new APIs.303 if (304 !hasNewLifecycles &&305 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||306 typeof instance.componentWillReceiveProps === 'function')307 ) {308 if (oldProps !== newProps || oldContext !== nextContext) {309 callComponentWillReceiveProps(310 workInProgress,311 instance,312 newProps,313 nextContext,314 );315 }316 }317 resetHasForceUpdateBeforeProcessing();318 const oldState = workInProgress.memoizedState;319 let newState = (instance.state = oldState);320 processUpdateQueue(workInProgress, newProps, instance, renderLanes);321 newState = workInProgress.memoizedState;322 if (323 oldProps === newProps &&324 oldState === newState &&325 !hasContextChanged() &&326 !checkHasForceUpdateAfterProcessing()327 ) {328 // If an update was already in progress, we should schedule an Update329 // effect even though we're bailing out, so that cWU/cDU are called.330 if (typeof instance.componentDidMount === 'function') {331 workInProgress.flags |= Update;332 }333 return false;334 }335 if (typeof getDerivedStateFromProps === 'function') {336 applyDerivedStateFromProps(337 workInProgress,338 ctor,339 getDerivedStateFromProps,340 newProps,341 );342 newState = workInProgress.memoizedState;343 }344 const shouldUpdate =345 checkHasForceUpdateAfterProcessing() ||346 checkShouldComponentUpdate(347 workInProgress,348 ctor,349 oldProps,350 newProps,351 oldState,352 newState,353 nextContext,354 );355 if (shouldUpdate) {356 // In order to support react-lifecycles-compat polyfilled components,357 // Unsafe lifecycles should not be invoked for components using the new APIs.358 if (359 !hasNewLifecycles &&360 (typeof instance.UNSAFE_componentWillMount === 'function' ||361 typeof instance.componentWillMount === 'function')362 ) {363 if (typeof instance.componentWillMount === 'function') {364 instance.componentWillMount();365 }366 if (typeof instance.UNSAFE_componentWillMount === 'function') {367 instance.UNSAFE_componentWillMount();368 }369 }370 if (typeof instance.componentDidMount === 'function') {371 workInProgress.flags |= Update;372 }373 } else {374 // If an update was already in progress, we should schedule an Update375 // effect even though we're bailing out, so that cWU/cDU are called.376 if (typeof instance.componentDidMount === 'function') {377 workInProgress.flags |= Update;378 }379 // If shouldComponentUpdate returned false, we should still update the380 // memoized state to indicate that this work can be reused.381 workInProgress.memoizedProps = newProps;382 workInProgress.memoizedState = newState;383 }384 // Update the existing instance's state, props, and context pointers even385 // if shouldComponentUpdate returns false.386 instance.props = newProps;387 instance.state = newState;388 instance.context = nextContext;389 return shouldUpdate;390}391// Invokes the update life-cycles and returns false if it shouldn't rerender.392function updateClassInstance(393 current: Fiber,394 workInProgress: Fiber,395 ctor: any,396 newProps: any,397 renderLanes: Lanes,398): boolean {399 const instance = workInProgress.stateNode;400 cloneUpdateQueue(current, workInProgress);401 const unresolvedOldProps = workInProgress.memoizedProps;402 const oldProps =403 workInProgress.type === workInProgress.elementType404 ? unresolvedOldProps405 : resolveDefaultProps(workInProgress.type, unresolvedOldProps);406 instance.props = oldProps;407 const unresolvedNewProps = workInProgress.pendingProps;408 const oldContext = instance.context;409 const contextType = ctor.contextType;410 let nextContext = emptyContextObject;411 if (typeof contextType === 'object' && contextType !== null) {412 nextContext = readContext(contextType);413 } else if (!disableLegacyContext) {414 const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);415 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);416 }417 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;418 const hasNewLifecycles =419 typeof getDerivedStateFromProps === 'function' ||420 typeof instance.getSnapshotBeforeUpdate === 'function';421 // Note: During these life-cycles, instance.props/instance.state are what422 // ever the previously attempted to render - not the "current". However,423 // during componentDidUpdate we pass the "current" props.424 // In order to support react-lifecycles-compat polyfilled components,425 // Unsafe lifecycles should not be invoked for components using the new APIs.426 if (427 !hasNewLifecycles &&428 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||429 typeof instance.componentWillReceiveProps === 'function')430 ) {431 if (432 unresolvedOldProps !== unresolvedNewProps ||433 oldContext !== nextContext434 ) {435 callComponentWillReceiveProps(436 workInProgress,437 instance,438 newProps,439 nextContext,440 );441 }442 }443 resetHasForceUpdateBeforeProcessing();444 const oldState = workInProgress.memoizedState;445 let newState = (instance.state = oldState);446 processUpdateQueue(workInProgress, newProps, instance, renderLanes);447 newState = workInProgress.memoizedState;448 if (449 unresolvedOldProps === unresolvedNewProps &&450 oldState === newState &&451 !hasContextChanged() &&452 !checkHasForceUpdateAfterProcessing()453 ) {454 // If an update was already in progress, we should schedule an Update455 // effect even though we're bailing out, so that cWU/cDU are called.456 if (typeof instance.componentDidUpdate === 'function') {457 if (458 unresolvedOldProps !== current.memoizedProps ||459 oldState !== current.memoizedState460 ) {461 workInProgress.flags |= Update;462 }463 }464 if (typeof instance.getSnapshotBeforeUpdate === 'function') {465 if (466 unresolvedOldProps !== current.memoizedProps ||467 oldState !== current.memoizedState468 ) {469 workInProgress.flags |= Snapshot;470 }471 }472 return false;473 }474 if (typeof getDerivedStateFromProps === 'function') {475 applyDerivedStateFromProps(476 workInProgress,477 ctor,478 getDerivedStateFromProps,479 newProps,480 );481 newState = workInProgress.memoizedState;482 }483 const shouldUpdate =484 checkHasForceUpdateAfterProcessing() ||485 checkShouldComponentUpdate(486 workInProgress,487 ctor,488 oldProps,489 newProps,...
ReactFiberClassComponent.js
Source:ReactFiberClassComponent.js
...152 processUpdateQueue(workInProgress, newProps, instance, renderLanes);153 instance.state = workInProgress.memoizedState;154 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;155 if (typeof getDerivedStateFromProps === 'function') {156 applyDerivedStateFromProps(157 workInProgress,158 ctor,159 getDerivedStateFromProps,160 newProps161 );162 instance.state = workInProgress.memoizedState;163 }164 if (165 typeof ctor.getDerivedStateFromProps !== 'function' &&166 typeof instance.getSnapshotBeforeUpdate !== 'function' &&167 (typeof instance.UNSAFE_componentWillMount === 'function' ||168 typeof instance.componentWillMount === 'function')169 ) {170 callComponentWillMount(workInProgress, instance);171 processUpdateQueue(workInProgress, newProps, instance, renderLanes);172 instance.state = workInProgress.memoizedState;173 }174 if (typeof instance.componentDidMount === 'function') {175 workInProgress.flags |= Update;176 }177};178const callComponentWillReceiveProps = (179 workInProgress,180 instance,181 newProps,182 nextContext183) => {184 const oldState = instance.state;185 if (typeof instance.componentWillReceiveProps === 'function') {186 instance.componentWillReceiveProps(newProps, nextContext);187 }188 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {189 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);190 }191 if (instance.state !== oldState) {192 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);193 }194};195const checkShouldComponentUpdate = (196 workInProgress,197 ctor,198 oldProps,199 newProps,200 oldState,201 newState,202 nextContext203) => {204 const instance = workInProgress.stateNode;205 if (typeof instance.shouldComponentUpdate === 'function') {206 const shouldUpdate = instance.shouldComponentUpdate(207 newProps,208 newState,209 nextContext210 );211 return shouldUpdate;212 }213 if (ctor.prototype && ctor.prototype.isPureReactComponent) {214 return (215 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)216 );217 }218 return true;219};220const resumeMountClassInstance = (221 workInProgress,222 ctor,223 newProps,224 renderLanes225) => {226 const instance = workInProgress.stateNode;227 const oldProps = workInProgress.memoizedProps;228 instance.props = oldProps;229 const oldContext = instance.context;230 const contextType = ctor.contextType;231 let nextContext = emptyContextObject;232 if (typeof contextType === 'object' && contextType !== null) {233 nextContext = readContext(contextType);234 } else {235 const nextLegacyUnmaskedContext = getUnmaskedContext(236 workInProgress,237 ctor,238 true239 );240 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);241 }242 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;243 const hasNewLifecycles =244 typeof getDerivedStateFromProps === 'function' ||245 typeof instance.getSnapshotBeforeUpdate === 'function';246 if (247 !hasNewLifecycles &&248 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||249 typeof instance.componentWillReceiveProps === 'function')250 ) {251 if (oldProps !== newProps || oldContext !== nextContext) {252 callComponentWillReceiveProps(253 workInProgress,254 instance,255 newProps,256 nextContext257 );258 }259 }260 resetHasForceUpdateBeforeProcessing();261 const oldState = workInProgress.memoizedState;262 let newState = (instance.state = oldState);263 processUpdateQueue(workInProgress, newProps, instance, renderLanes);264 newState = workInProgress.memoizedState;265 if (266 oldProps === newProps &&267 oldState === newState &&268 !hasContextChanged() &&269 !checkHasForceUpdateAfterProcessing()270 ) {271 if (typeof instance.componentDidMount === 'function') {272 workInProgress.flags |= Update;273 }274 return false;275 }276 if (typeof getDerivedStateFromProps === 'function') {277 applyDerivedStateFromProps(278 workInProgress,279 ctor,280 getDerivedStateFromProps,281 newProps282 );283 newState = workInProgress.memoizedState;284 }285 const shouldUpdate =286 checkHasForceUpdateAfterProcessing() ||287 checkShouldComponentUpdate(288 workInProgress,289 ctor,290 oldProps,291 newProps,292 oldState,293 newState,294 nextContext295 );296 if (shouldUpdate) {297 if (298 !hasNewLifecycles &&299 (typeof instance.UNSAFE_componentWillMount === 'function' ||300 typeof instance.componentWillMount === 'function')301 ) {302 if (typeof instance.componentWillMount === 'function') {303 instance.componentWillMount();304 }305 if (typeof instance.UNSAFE_componentWillMount === 'function') {306 instance.UNSAFE_componentWillMount();307 }308 }309 if (typeof instance.componentDidMount === 'function') {310 workInProgress.flags |= Update;311 }312 } else {313 if (typeof instance.componentDidMount === 'function') {314 workInProgress.flags |= Update;315 }316 workInProgress.memoizedProps = newProps;317 workInProgress.memoizedState = newState;318 }319 instance.props = newProps;320 instance.state = newState;321 instance.context = nextContext;322 return shouldUpdate;323};324const updateClassInstance = (325 current,326 workInProgress,327 ctor,328 newProps,329 renderLanes330) => {331 const instance = workInProgress.stateNode;332 cloneUpdateQueue(current, workInProgress);333 const unresolvedOldProps = workInProgress.memoizedProps;334 const oldProps =335 workInProgress.type === workInProgress.elementType336 ? unresolvedOldProps337 : resolveDefaultProps(workInProgress.type, unresolvedOldProps);338 instance.props = oldProps;339 const unresolvedNewProps = workInProgress.pendingProps;340 const oldContext = instance.context;341 const contextType = ctor.contextType;342 let nextContext = emptyContextObject;343 if (typeof contextType === 'object' && contextType !== null) {344 nextContext = readContext(contextType);345 } else if (!disableLegacyContext) {346 const nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);347 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);348 }349 const getDerivedStateFromProps = ctor.getDerivedStateFromProps;350 const hasNewLifecycles =351 typeof getDerivedStateFromProps === 'function' ||352 typeof instance.getSnapshotBeforeUpdate === 'function';353 if (354 !hasNewLifecycles &&355 (typeof instance.UNSAFE_componentWillReceiveProps === 'function' ||356 typeof instance.componentWillReceiveProps === 'function')357 ) {358 if (359 unresolvedOldProps !== unresolvedNewProps ||360 oldContext !== nextContext361 ) {362 callComponentWillReceiveProps(363 workInProgress,364 instance,365 newProps,366 nextContext367 );368 }369 }370 resetHasForceUpdateBeforeProcessing();371 const oldState = workInProgress.memoizedState;372 let newState = (instance.state = oldState);373 processUpdateQueue(workInProgress, newProps, instance, renderLanes);374 newState = workInProgress.memoizedState;375 if (376 unresolvedOldProps === unresolvedNewProps &&377 oldState === newState &&378 !hasContextChanged() &&379 !checkHasForceUpdateAfterProcessing()380 ) {381 if (typeof instance.componentDidUpdate === 'function') {382 if (383 unresolvedOldProps !== current.memoizedProps ||384 oldState !== current.memoizedState385 ) {386 workInProgress.flags |= Update;387 }388 }389 if (typeof instance.getSnapshotBeforeUpdate === 'function') {390 if (391 unresolvedOldProps !== current.memoizedProps ||392 oldState !== current.memoizedState393 ) {394 workInProgress.flags |= Snapshot;395 }396 }397 return false;398 }399 if (typeof getDerivedStateFromProps === 'function') {400 applyDerivedStateFromProps(401 workInProgress,402 ctor,403 getDerivedStateFromProps,404 newProps405 );406 newState = workInProgress.memoizedState;407 }408 const shouldUpdate =409 checkHasForceUpdateAfterProcessing() ||410 checkShouldComponentUpdate(411 workInProgress,412 ctor,413 oldProps,414 newProps,...
reconciler.js
Source:reconciler.js
...110 instance.props = nextProps;111 instance.state = workInProgress.memoizedState;112 instance.refs = EMPTY_REFS;113 processUpdate(workInProgress, instance);114 applyDerivedStateFromProps(workInProgress, Component, nextProps);115 if (typeof instance.componentDidMount === 'function') {116 workInProgress.effectTag |= UPDATE;117 }118 shouldUpdate = true;119 } else {120 shouldUpdate = updateClassInstance(workInProgress, Component, nextProps);121 }122 return finishClassComponent(workInProgress, Component, shouldUpdate);123}124function updateClassInstance(workInProgress, Component, nextProps) {125 const instance = workInProgress.stateNode;126 const oldProps = workInProgress.memoizedProps;127 128 instance.props = oldProps;129 const oldState = workInProgress.memoizedState;130 let newState = instance.state = oldState;131 processUpdate(workInProgress, instance);132 133 newState = workInProgress.memoizedState;134 applyDerivedStateFromProps(workInProgress, Component, nextProps);135 136 let shouldUpdate = checkShouldComponentUpdate(workInProgress, Component, oldProps, nextProps, oldState, newState);137 if (shouldUpdate) {138 if (typeof instance.componentDidUpdate === 'function') {139 workInProgress.effectTag |= UPDATE;140 }141 if (typeof instance.getSnapshotBeforeUpdate === 'function') {142 workInProgress.effectTag |= SNAPSHOT;143 }144 } else {145 if (typeof instance.componentDidUpdate === 'function') {146 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {147 workInProgress.effectTag |= UPDATE;148 }149 }150 if (typeof instance.getSnapshotBeforeUpdate === 'function') {151 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {152 workInProgress.effectTag |= SNAPSHOT;153 }154 }155 workInProgress.memoizedProps = nextProps;156 workInProgress.memoizedState = newState;157 }158 instance.props = nextProps;159 instance.state = newState;160 instance._reactInternalFiber = workInProgress;161 return shouldUpdate;162}163function finishClassComponent(workInProgress, Component, shouldUpdate) {164 const ref = workInProgress.ref;165 if (ref !== null) {166 workInProgress.effectTag |= REF;167 }168 if (!shouldUpdate) {169 return bailoutOnAlreadyFinishedWork(current, workInProgress);170 }171 const instance = workInProgress.stateNode;172 const nextChildren = instance.render();173 174 workInProgress.effectTag |= PERFORMED_WORK;175 // if (current !== null) {176 // workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren);177 // } else {178 // reconcileChildren(current, workInProgress, nextChildren);179 // }180 reconcileChildren(workInProgress, nextChildren);181 workInProgress.memoizedState = instance.state;182 return workInProgress.child;183}184function applyDerivedStateFromProps(workInProgress, Component, nextProps) {185 const getDerivedStateFromProps = Component.getDerivedStateFromProps;186 if (typeof getDerivedStateFromProps === 'function') {187 const memoizedState = workInProgress.memoizedState;188 const nextState = getDerivedStateFromProps(nextProps, memoizedState);189 instance.state = workInProgress.memoizedState = nextState === null || nextState === undefined ? 190 memoizedState : 191 { ...memoizedState, partialState };192 }193}194function processUpdate (195 workInProgress,196 instance197) {198 let resultState = null;...
VueRelayQueryRenderer.js
Source:VueRelayQueryRenderer.js
1import Vue from 'vue'2import VueRelayQueryFetcher from './VueRelayQueryFetcher'3import { VUE_RELAY_PROPS } from './buildVueRelayContainer'4import areEqual from 'fbjs/lib/areEqual'5import {6 createOperationDescriptor,7 deepFreeze,8 getRequest9} from 'relay-runtime'10const requestCache = {}11const NETWORK_ONLY = 'NETWORK_ONLY'12const STORE_THEN_NETWORK = 'STORE_THEN_NETWORK'13const DataFromEnum = {14 NETWORK_ONLY,15 STORE_THEN_NETWORK16}17const VueRelayQueryRenderer = {18 name: 'relay-query-renderer',19 props: {20 cacheConfig: {21 type: Object22 },23 dataFrom: {24 type: String,25 validator (val) {26 return Object.values(DataFromEnum).indexOf(val) !== -127 }28 },29 environment: {30 type: Object,31 required: true32 },33 query: {},34 variables: {35 type: Object,36 default: () => ({})37 }38 },39 data () {40 // Callbacks are attached to the current instance and shared with static41 // lifecyles by bundling with state. This is okay to do because the42 // callbacks don't change in reaction to props. However we should not43 // "leak" them before mounting (since we would be unable to clean up). For44 // that reason, we define them as null initially and fill them in after45 // mounting to avoid leaking memory.46 const retryCallbacks = {47 handleDataChange: null,48 handleRetryAfterError: null49 }50 let queryFetcher51 let requestCacheKey52 if (this.query) {53 const { query } = this54 const request = getRequest(query)55 requestCacheKey = getRequestCacheKey(request.params, this.variables)56 queryFetcher = requestCache[requestCacheKey]57 ? requestCache[requestCacheKey].queryFetcher58 : new VueRelayQueryFetcher()59 } else {60 queryFetcher = new VueRelayQueryFetcher()61 }62 this.state = {63 prevPropsEnvironment: this.environment,64 prevPropsVariables: this.variables,65 prevQuery: this.query,66 queryFetcher,67 retryCallbacks,68 ...fetchQueryAndComputeStateFromProps(69 this.$props,70 queryFetcher,71 retryCallbacks,72 requestCacheKey73 )74 }75 return {}76 },77 methods: {78 applyDerivedStateFromProps () {79 this.setState(this.getDerivedStateFromProps(this.$props, this.state))80 },81 setState (partialState) {82 if (typeof partialState === 'function') {83 partialState = partialState({ ...this.state })84 }85 if (partialState != null) {86 const nextState = {87 ...this.state,88 ...partialState89 }90 const forceUpdate = this.shouldComponentUpdate(this.$props, nextState)91 this.state = nextState92 if (forceUpdate) {93 this.$forceUpdate()94 }95 }96 },97 getDerivedStateFromProps (nextProps, prevState) {98 if (99 prevState.prevQuery !== nextProps.query ||100 prevState.prevPropsEnvironment !== nextProps.environment ||101 !areEqual(prevState.prevPropsVariables, nextProps.variables)102 ) {103 const { query } = nextProps104 const prevSelectionReferences = prevState.queryFetcher.getSelectionReferences()105 prevState.queryFetcher.disposeRequest()106 let queryFetcher107 if (query) {108 const request = getRequest(query)109 const requestCacheKey = getRequestCacheKey(110 request.params,111 nextProps.variables112 )113 queryFetcher = requestCache[requestCacheKey]114 ? requestCache[requestCacheKey].queryFetcher115 : new VueRelayQueryFetcher(prevSelectionReferences)116 } else {117 queryFetcher = new VueRelayQueryFetcher(prevSelectionReferences)118 }119 return {120 prevQuery: nextProps.query,121 prevPropsEnvironment: nextProps.environment,122 prevPropsVariables: nextProps.variables,123 queryFetcher: queryFetcher,124 ...fetchQueryAndComputeStateFromProps(125 nextProps,126 queryFetcher,127 prevState.retryCallbacks128 // passing no requestCacheKey will cause it to be recalculated internally129 // and we want the updated requestCacheKey, since variables may have changed130 )131 }132 }133 return null134 },135 shouldComponentUpdate (_, nextState) {136 return (137 nextState.renderProps !== this.state.renderProps138 )139 }140 },141 watch: {142 environment: 'applyDerivedStateFromProps',143 query: 'applyDerivedStateFromProps',144 variables: {145 handler: 'applyDerivedStateFromProps',146 deep: true147 }148 },149 render (h) {150 const { renderProps, relayContext } = this.state151 // Note that the root fragment results in `renderProps.props` is already152 // frozen by the store; this call is to freeze the renderProps object and153 // error property if set.154 if (process.env.NODE_ENV !== 'production') {155 deepFreeze(renderProps)156 }157 this[VUE_RELAY_PROPS].__relayContext = Object.freeze({158 ...relayContext159 })160 return h('keep-alive', {161 props: {162 include: []163 }164 }, this.$scopedSlots.default(renderProps))165 },166 mounted () {167 const { retryCallbacks, queryFetcher, requestCacheKey } = this.state168 if (requestCacheKey) {169 delete requestCache[requestCacheKey]170 }171 retryCallbacks.handleDataChange = (params) => {172 const error = params.error == null ? null : params.error173 const snapshot = params.snapshot == null ? null : params.snapshot174 this.setState(prevState => {175 const { requestCacheKey: prevRequestCacheKey } = prevState176 if (prevRequestCacheKey) {177 delete requestCache[prevRequestCacheKey]178 }179 // Don't update state if nothing has changed.180 if (snapshot === prevState.snapshot && error === prevState.error) {181 return null182 }183 return {184 renderProps: getRenderProps(185 error,186 snapshot,187 prevState.queryFetcher,188 prevState.retryCallbacks189 ),190 snapshot,191 requestCacheKey: null192 }193 })194 }195 retryCallbacks.handleRetryAfterError = (_) =>196 this.setState(prevState => {197 const { requestCacheKey: prevRequestCacheKey } = prevState198 if (prevRequestCacheKey) {199 delete requestCache[prevRequestCacheKey]200 }201 return {202 renderProps: getLoadingRenderProps(),203 requestCacheKey: null204 }205 })206 // Re-initialize the VueRelayQueryFetcher with callbacks.207 // If data has changed since constructions, this will re-render.208 if (this.$props.query) {209 queryFetcher.setOnDataChange(retryCallbacks.handleDataChange)210 }211 },212 updated () {213 // We don't need to cache the request after the component commits214 const { requestCacheKey } = this.state215 if (requestCacheKey) {216 delete requestCache[requestCacheKey]217 // HACK218 delete this.state.requestCacheKey219 }220 },221 beforeDestroy () {222 this.state.queryFetcher.dispose()223 },224 provide () {225 return {226 [VUE_RELAY_PROPS]: (this[VUE_RELAY_PROPS] = Vue.observable({227 __relayContext: Object.freeze({228 ...this.state.relayContext229 })230 }))231 }232 }233}234function getContext (235 environment,236 variables237) {238 return {239 environment,240 variables241 }242}243function getLoadingRenderProps () {244 return {245 error: null,246 props: null, // `props: null` indicates that the data is being fetched (i.e. loading)247 retry: null248 }249}250function getEmptyRenderProps () {251 return {252 error: null,253 props: {}, // `props: {}` indicates no data available254 retry: null255 }256}257function getRenderProps (258 error,259 snapshot,260 queryFetcher,261 retryCallbacks262) {263 return {264 error: error || null,265 props: snapshot ? snapshot.data : null,266 retry: () => {267 const syncSnapshot = queryFetcher.retry()268 if (269 syncSnapshot &&270 typeof retryCallbacks.handleDataChange === 'function'271 ) {272 retryCallbacks.handleDataChange({ snapshot: syncSnapshot })273 } else if (274 error &&275 typeof retryCallbacks.handleRetryAfterError === 'function'276 ) {277 // If retrying after an error and no synchronous result available,278 // reset the render props279 retryCallbacks.handleRetryAfterError(error)280 }281 }282 }283}284function getRequestCacheKey (285 request,286 variables287) {288 const requestID = request.id || request.text289 return JSON.stringify({290 id: String(requestID),291 variables292 })293}294function fetchQueryAndComputeStateFromProps (295 props,296 queryFetcher,297 retryCallbacks,298 requestCacheKey299) {300 const { environment, query, variables } = props301 const genericEnvironment = (environment)302 if (query) {303 const request = getRequest(query)304 const operation = createOperationDescriptor(request, variables)305 const relayContext = getContext(genericEnvironment, operation.variables)306 if (typeof requestCacheKey === 'string' && requestCache[requestCacheKey]) {307 // This same request is already in flight.308 const { snapshot } = requestCache[requestCacheKey]309 if (snapshot) {310 // Use the cached response311 return {312 error: null,313 relayContext,314 renderProps: getRenderProps(315 null,316 snapshot,317 queryFetcher,318 retryCallbacks319 ),320 snapshot,321 requestCacheKey322 }323 } else {324 // Render loading state325 return {326 error: null,327 relayContext,328 renderProps: getLoadingRenderProps(),329 snapshot: null,330 requestCacheKey331 }332 }333 }334 try {335 const storeSnapshot =336 props.dataFrom === STORE_THEN_NETWORK337 ? queryFetcher.lookupInStore(genericEnvironment, operation)338 : null339 const querySnapshot = queryFetcher.fetch({340 cacheConfig: props.cacheConfig,341 dataFrom: props.dataFrom,342 environment: genericEnvironment,343 onDataChange: retryCallbacks.handleDataChange,344 operation345 })346 // Use network data first, since it may be fresher347 const snapshot = querySnapshot || storeSnapshot348 // cache the request to avoid duplicate requests349 requestCacheKey =350 requestCacheKey || getRequestCacheKey(request.params, props.variables)351 requestCache[requestCacheKey] = { queryFetcher, snapshot }352 if (!snapshot) {353 return {354 error: null,355 relayContext,356 renderProps: getLoadingRenderProps(),357 snapshot: null,358 requestCacheKey359 }360 }361 return {362 error: null,363 relayContext,364 renderProps: getRenderProps(365 null,366 snapshot,367 queryFetcher,368 retryCallbacks369 ),370 snapshot,371 requestCacheKey372 }373 } catch (error) {374 return {375 error,376 relayContext,377 renderProps: getRenderProps(error, null, queryFetcher, retryCallbacks),378 snapshot: null,379 requestCacheKey380 }381 }382 } else {383 queryFetcher.dispose()384 const relayContext = getContext(genericEnvironment, variables)385 return {386 error: null,387 relayContext,388 renderProps: getEmptyRenderProps(),389 requestCacheKey: null // if there is an error, don't cache request390 }391 }392}...
lifecycle.js
Source:lifecycle.js
...26 }27 const getDerivedStateFromProps = Constructor.getDerivedStateFromProps;28 // lifecycle getDervivedStateFromProps29 if (isFunction(getDerivedStateFromProps)) {30 applyDerivedStateFromProps(31 workInProgress, 32 Constructor, 33 getDerivedStateFromProps34 );35 instance.state = workInProgress.memoizedState;36 }37 if (38 !isFunction(Constructor.getDerivedStateFromProps)39 ) {40 callComponentWillMount(workInProgress, instance);41 queue = workInProgress.queue;42 if (queue !== null) {43 processUpdate(workInProgress, queue);44 instance.state = workInProgress.memoizedState;...
useComponent.js
Source:useComponent.js
...20 21 const oldState = workInProgress.memoizedState;22 let newState = instance.state = state;23 24 applyDerivedStateFromProps(workInProgress, Component, props);25 let shouldUpdate = checkShouldComponentUpdate(workInProgress, Component, oldProps, props, oldState, newState);26 27 if (shouldUpdate) {28 debugger;29 return instance.render();30 }31 32 } else {33 const instance = useMemo(() => new Component(props), []);34 const [state, setState] = useState(instance.state);35 workInProgress.stateNode = instance;36 workInProgress.memoizedState = {37 ...workInProgress.memoizedState,38 ...state,39 }40 41 instance.props = props;42 instance.state = state;43 instance.setState = setState;44 45 applyDerivedStateFromProps(workInProgress, Component, props);46 return instance.render();47 }48 49 }50 Wrapper.displayName = Component.name;51 52 return hoistNonReactStatics(Wrapper, Component);53 } else {54 throw new Error(`Must provide react class component`);55 }56}57function applyDerivedStateFromProps(workInProgress, Component, nextProps) {58 const getDerivedStateFromProps = Component.getDerivedStateFromProps;59 if (typeof getDerivedStateFromProps === 'function') {60 const instance = workInProgress.stateNode;61 const memoizedState = workInProgress.memoizedState;62 const nextState = getDerivedStateFromProps(nextProps, memoizedState);63 instance.state = workInProgress.memoizedState = nextState === null || nextState === undefined ? 64 memoizedState : 65 { ...memoizedState, partialState };66 }67}68function checkShouldComponentUpdate(workInProgress, Component, oldProps, newProps, oldState, newState) {69 const instance = workInProgress.stateNode;70 if (typeof instance.shouldComponentUpdate === 'function') {71 const shouldUpdate = instance.shouldComponentUpdate(newProps, newState);...
buildVueRelayContainer.js
Source:buildVueRelayContainer.js
1import Vue from 'vue'2import assertFragmentMap from './assertFragmentMap'3import {4 getComponentName5} from './VueRelayContainerUtils'6import mapObject from 'fbjs/lib/mapObject'7import { getFragment } from 'relay-runtime'8const VUE_RELAY_PROPS = 'vue-relay-props'9const buildVueRelayContainer = function (component, fragmentSpec, createContainerWithFragments) {10 // Sanity-check user-defined fragment input11 assertFragmentMap(getComponentName(component), fragmentSpec)12 const fragments = mapObject(fragmentSpec, getFragment)13 const props = Object.keys(fragments)14 return {15 extends: createContainerWithFragments(component, fragments),16 props,17 methods: {18 applyDerivedStateFromProps () {19 this.setState(this.getDerivedStateFromProps({20 ...this.$props,21 ...this.props22 }, this.state))23 },24 setState (partialState, callback) {25 if (typeof partialState === 'function') {26 partialState = partialState({ ...this.state })27 }28 if (partialState != null) {29 const prevState = this.state30 const nextState = {31 ...prevState,32 ...partialState33 }34 const prevProps = {35 ...this.$props,36 ...this.props37 }38 const forceUpdate = this.shouldComponentUpdate(prevProps, nextState)39 this.state = nextState40 if (typeof callback === 'function') {41 callback()42 }43 if (forceUpdate) {44 this.$nextTick(() => {45 this.componentDidUpdate(prevProps, prevState)46 })47 this.$forceUpdate()48 }49 }50 }51 },52 watch: {53 'props.__relayContext': 'applyDerivedStateFromProps',54 ...props.map(prop => ({ [prop]: 'applyDerivedStateFromProps' }))55 },56 render (h) {57 if (this.state.contextForChildren != null) {58 this[VUE_RELAY_PROPS].__relayContext = Object.freeze({59 ...this.state.contextForChildren60 })61 }62 if (component != null) {63 return h(component, {64 props: {65 ...this.$attrs,66 ...this.state.data,67 relay: this.state.relayProp68 }69 })70 }71 return h('keep-alive', {72 props: {73 include: []74 }75 }, this.$scopedSlots.default({76 ...this.state.data,77 relay: this.state.relayProp78 }))79 },80 inject: {81 'props': { from: VUE_RELAY_PROPS }82 },83 provide () {84 return this.state.contextForChildren != null85 ? {86 [VUE_RELAY_PROPS]: (this[VUE_RELAY_PROPS] = Vue.observable({87 __relayContext: Object.freeze({88 ...this.state.contextForChildren89 })90 }))91 }92 : {}93 }94 }95}96export default buildVueRelayContainer...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.waitForSelector('text=Get Started');6 const state = {7 button: {8 boundingBox: {9 },10 },11 };12 const action = {13 };14 await page.applyDerivedStateFromProps(state, action);15 await browser.close();16})();17module.exports = {18 use: {19 },20 {21 use: {22 },23 },24};
Using AI Code Generation
1const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');2const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');3const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');4const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');5const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');6const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');7const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');8const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');9const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');10const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');11const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');12const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');13const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');14const { applyDerivedStateFromProps } = require('playwright-core/lib/server/dom.js');15const { applyDerivedStateFromProps
Using AI Code Generation
1const { PlaywrightInternal } = require('@playwright/test/lib/server/playwright');2const { Playwright } = require('@playwright/test/lib/server/playwright');3const { BrowserContext } = require('@playwright/test/lib/server/browserContext');4const { Browser } = require('@playwright/test/lib/server/browser');5const { BrowserType } = require('@playwright/test/lib/server/browserType');6const { Page } = require('@playwright/test/lib/server/page');7const { Worker } = require('@playwright/test/lib/server/worker');8const { assert } = require('chai');9const internal = new PlaywrightInternal();10const playwright = new Playwright(internal);11const browserType = new BrowserType(internal, 'chromium');12const browser = new Browser(internal, browserType, 'browserId');13const context = new BrowserContext(internal, browser, 'contextId');14const page = new Page(internal, context, 'pageId');15const worker = new Worker(internal, page, 'workerId');16const derivedState = {17};18PlaywrightInternal.applyDerivedStateFromProps(worker, derivedState);19assert.equal(worker._browserName, 'chromium');20assert.equal(worker._browserVersion, '1.2.3');21assert.equal(worker._isMobile, false);22assert.equal(worker._isAndroid, false);23assert.equal(worker._isChromium, true);24assert.equal(worker._isFirefox, false);25assert.equal(worker._isWebKit, false);26assert.equal(worker._platform, 'linux');27assert.equal(worker._platformName, 'linux');28assert.equal(worker._deviceScaleFactor, 1);29assert.equal(worker._isMobile, false);30assert.equal(worker._isLandscape, false);31assert.equal(worker._hasTouch, false);32console.log('Test Passed');
Using AI Code Generation
1const { Playwright } = require('playwright');2const { Internal } = require('playwright/lib/server/playwright');3const { Page } = require('playwright/lib/server/page');4const { Frame } = require('playwright/lib/server/frames');5const playwright = new Playwright();6const internal = new Internal(playwright);7const page = new Page(internal);8const frame = new Frame(page, 'mainFrame', null);9frame.applyDerivedStateFromProps({
Using AI Code Generation
1const { Playwright } = require('@playwright/test');2const { applyDerivedStateFromProps } = Playwright;3applyDerivedStateFromProps({});4const { Playwright } = require('@playwright/test');5const { applyDerivedStateFromProps } = Playwright;6applyDerivedStateFromProps({});7const { Playwright } = require('@playwright/test');8const { applyDerivedStateFromProps } = Playwright;9applyDerivedStateFromProps({});
Using AI Code Generation
1const { PlaywrightInternal } = require('playwright');2const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;3const { test } = require('playwright-test');4test('test', async ({ page }) => {5 const { PlaywrightInternal } = require('playwright');6 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;7 await page.waitForSelector('input[title="Search"]');8 await page.fill('input[title="Search"]', 'Hello World');9 await page.keyboard.press('Enter');10 const { PlaywrightInternal } = require('playwright');11 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;12 await page.waitForSelector('text=Hello World');13 await page.click('text=Hello World');14 await page.waitForSelector('text=Hello World - Google Search');15 await page.click('text=Hello World - Google Search');16 await page.waitForSelector('text=Hello World - Google Search');17 await page.click('text=Hello World - Google Search');18});19const { PlaywrightInternal } = require('playwright');20const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;21const { test } = require('playwright-test');22test('test', async ({ page }) => {23 const { PlaywrightInternal } = require('playwright');24 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;25 await page.waitForSelector('input[title="Search"]');26 await page.fill('input[title="Search"]', 'Hello World');27 await page.keyboard.press('Enter');28 const { PlaywrightInternal } = require('playwright');29 const { applyDerivedStateFromProps } = PlaywrightInternal.prototype;30 await page.waitForSelector('text=Hello World');31 await page.click('text=Hello World');32 await page.waitForSelector('text=Hello World
Using AI Code Generation
1const { applyDerivedStateFromProps } = require('@playwright/test/lib/test');2const { test } = require('@playwright/test');3test.describe('Test', () => {4 test('test', async ({ page }) => {5 await applyDerivedStateFromProps(page, {6 });7 });8});
Using AI Code Generation
1const { test, expect } = require('@playwright/test');2test('test', async ({ page }) => {3 const google = page.locator('div');4 const google1 = google.locator('div');5 const google2 = google1.locator('div');6 const google3 = google2.locator('div');7 const google4 = google3.locator('div');8 const google5 = google4.locator('div');9 const google6 = google5.locator('div');10 const google7 = google6.locator('div');11 const google8 = google7.locator('div');12 const google9 = google8.locator('div');13 const google10 = google9.locator('div');14 const google11 = google10.locator('div');15 const google12 = google11.locator('div');16 const google13 = google12.locator('div');17 const google14 = google13.locator('div');18 const google15 = google14.locator('div');19 const google16 = google15.locator('div');20 const google17 = google16.locator('div');21 const google18 = google17.locator('div');22 const google19 = google18.locator('div');23 const google20 = google19.locator('div');24 const google21 = google20.locator('div');25 const google22 = google21.locator('div');26 const google23 = google22.locator('div');27 const google24 = google23.locator('div');28 const google25 = google24.locator('div');29 const google26 = google25.locator('div');30 const google27 = google26.locator('div');31 const google28 = google27.locator('div');32 const google29 = google28.locator('div');33 const google30 = google29.locator('div');34 const google31 = google30.locator('div');35 const google32 = google31.locator('div');36 const google33 = google32.locator('div');37 const google34 = google33.locator('div');38 const google35 = google34.locator('div');39 const google36 = google35.locator('div');40 const google37 = google36.locator('div');41 const google38 = google37.locator('
Using AI Code Generation
1const playwrightInternal = require('playwright/lib/server/playwright.js');2const { applyDerivedStateFromProps } = playwrightInternal.helper;3const { helper } = require('playwright/lib/server/helper.js');4const { Page } = require('playwright/lib/server/page.js');5const page = new Page();6const derivedState = {7 viewportSize: { width: 1000, height: 1000 },8};9applyDerivedStateFromProps(page, derivedState);
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
