How to use shouldUpdateComponent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

UserComponent.js

Source: UserComponent.js Github

copy
1import React from 'react';
2import ShouldUpdateComponent from './ShouldUpdateComponent';
3
4// ShouldUpdateComponent 是一个函数 执行后返回一个新函数 
5// 在当前组件上注入getDerivedStateFromProps静态属性
6@ShouldUpdateComponent(['name'])
7class UserComponent extends React.Component {
8    render() {
9        const { user } = this.props;
10        return (
11            <div>
12                <p>name: {user.name}</p>
13                <p>age: {user.age}</p>
14            </div>
15        );
16    }
17}
18export default UserComponent;
19
Full Screen

Component.js

Source: Component.js Github

copy
1import { isFunction } from "./utils";
2import { _createDom } from "./react-dom";
3// 导出批量更新的对象
4export const updateQueue = {
5  isBatchingUpdates: false, // 是否处于批量更新的状态
6  updaters: [], //更新器的数组 默认是一个空数组
7  add(updater) {
8    if (!this.updaters.includes(updater)) {
9      this.updaters.push(updater);
10    }
11  },
12  batchUpdate() {
13    this.isBatchingUpdates = true;
14    this.updaters.forEach((updater) => updater.updateComponent());
15    this.updaters.length = 0;
16    this.isBatchingUpdates = false;
17  },
18}; 
19function shouldUpdateComponent(classInstance, nextProps, nextState) {
20  // 无论组件视图是否需要更新我们组件内部的转台是最新的
21  classInstance.props = nextProps || classInstance.props;
22  classInstance.state = nextState || classInstance.state;
23  // 进行判断是否需要更新的判断 只有shouldComponentUpdate 存在的时候 并且执行返回结果是TRUE的时候我们才会进行更新 否则的话就直接返回停止执行 这样也进行了我们组件内部如果没有写shouldUpdateComponent的时候默认进行更新
24  if (
25    classInstance.shouldUpdateComponent &&
26    !classInstance.shouldUpdateComponent(nextProps, nextState)
27  ) {
28    return;
29  }
30  classInstance.forceUpdate();
31}
32class Updater {
33  constructor(classInstance) {
34    this.classInstance = classInstance;
35    this.pendingState = [];
36  }
37  addState(partialState) {
38    this.pendingState.push(partialState);
39    this.emitUpdate();
40  }
41  emitUpdate(nextProps) {
42    this.nextProps = nextProps;
43    if (this.nextProps || !updateQueue.isBatchingUpdates) {
44      this.updateComponent();
45    } else {
46      updateQueue.add(this);
47    }
48  }
49  updateComponent() {
50    const { classInstance, pendingState, nextProps } = this;
51    if (nextProps || pendingState.length) {
52      // classInstance.state = this.getState();
53      // classInstance.forceUpdate();
54      shouldUpdateComponent(classInstance, nextProps, this.getState());
55    }
56  }
57  getState() {
58    let { classInstance, pendingState } = this;
59    const { state } = classInstance;
60    let nextState = state;
61    if (pendingState.length) {
62      pendingState.forEach((partialState) => {
63        if (isFunction(partialState)) {
64          nextState = { ...partialState, ...partialState(nextState) };
65        } else {
66          nextState = { ...nextState, ...partialState };
67        }
68      });
69    }
70    return nextState;
71  }
72}
73class Component {
74  constructor(props) {
75    this.props = props;
76    this.state = {};
77    this.$updater = new Updater(this);
78  }
79  setState(partialState) {
80    this.$updater.addState(partialState);
81  }
82  forceUpdate() {
83    if (this.componentWillUpdate) {
84      this.componentWillUpdate();
85    }
86    let oldDom = this.dom;
87    const newVdom = this.render();
88    const newDom = _createDom(newVdom);
89    oldDom.parentNode.replaceChild(newDom, oldDom);
90    this.dom = newDom;
91    if (this.componentDidUpdate) {
92      this.componentDidUpdate();
93    }
94  }
95}
96Component.prototype.isReactComponent = {};
97export default Component;
98
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)