CN114356327A - React visual area rendering method and device - Google Patents
React visual area rendering method and device Download PDFInfo
- Publication number
- CN114356327A CN114356327A CN202111649240.0A CN202111649240A CN114356327A CN 114356327 A CN114356327 A CN 114356327A CN 202111649240 A CN202111649240 A CN 202111649240A CN 114356327 A CN114356327 A CN 114356327A
- Authority
- CN
- China
- Prior art keywords
- level
- page
- component
- data
- visual area
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 53
- 238000009877 rendering Methods 0.000 title claims abstract description 49
- 230000000007 visual effect Effects 0.000 title claims description 91
- 238000004891 communication Methods 0.000 claims abstract description 10
- 230000015654 memory Effects 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 10
- 238000012544 monitoring process Methods 0.000 claims description 9
- 238000005096 rolling process Methods 0.000 claims description 8
- 238000006243 chemical reaction Methods 0.000 claims description 3
- 230000010365 information processing Effects 0.000 claims description 3
- 230000000977 initiatory effect Effects 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 7
- 230000007246 mechanism Effects 0.000 abstract description 5
- 230000002457 bidirectional effect Effects 0.000 abstract description 4
- 230000000903 blocking effect Effects 0.000 abstract description 3
- 238000005457 optimization Methods 0.000 abstract description 3
- 238000004364 calculation method Methods 0.000 description 7
- 230000008859 change Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000007689 inspection Methods 0.000 description 5
- 230000005291 magnetic effect Effects 0.000 description 5
- 238000004422 calculation algorithm Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000003111 delayed effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
- 230000003936 working memory Effects 0.000 description 1
Images
Landscapes
- Image Generation (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention aims to provide a method and equipment for rendering a visible region of a React. The modules use the tips to carry out data communication, the data of the superior module is updated, and the sub-modules can all take the data. The data updating of the lower-level component can inform the parent component through a method on the props, so that a bidirectional updating mechanism of the data is completed while the logical decoupling is carried out, and the phenomena of blocking and delay are relieved when the page is rolled and folded to open the data. The original element is folded and unfolded with a delay of 1 second to 2 seconds, and the invention can be reduced to a delay of 0.2 second to 0.5 second. The screen scrolling is also significantly less jerky. This optimization effect is more obvious in the case of a large amount of data.
Description
Technical Field
The invention relates to the field of computers, in particular to a method and equipment for rendering a visible area of a React.
Background
The fact is one of the most popular front-end development libraries of the current front end, and due to the good compatibility and strong performance of the developed front-end application, the fact is selected by many large and medium-sized projects.
Due to the fact that the React grammar is free, a plurality of JSX components can be customized and used for daily development. In order to make these customized components have high running and showing performance, React embeds many method attributes. Such as: the component WillUpdate life cycle under the class syntax can be updated by self-definition; the useMemo and useCallback of the functional grammar can be updated according to the entries. The method can prevent the performance from being low and the page from being blocked due to frequent updating and redundant updating in the React component.
In addition, the read-virtualized component, for long lists, may support exposing to use the dom elements of the screen's viewable area; and filling the dom elements in the non-visible area with a blank dom without logic. In this way, the part that really has the business logic is only a few elements in the visible area. Even if the data size of the whole page is larger, the elements in the visual area are really displayed to the extent that the browser cannot be jammed. The problems of huge data of pages and poor performance are solved to a great extent.
Under some complex service scenes, some update mechanisms of the fact that the fact itself is provided cannot perfectly complete some high-performance service components. For example, the four-level addresses of province, city, district and county of the multi-level cascade are added with all province, city, district and county data of the whole China and are put into the same page for preview, the cities below the province can be folded, hidden, unfolded and displayed, and the cities and the districts have the folding and unfolding functions in the same way. Due to the fact that the data size is large, when the foldable display device is folded and unfolded, a large diff algorithm can be generated on the read bottom layer, and the width, height and position information of the displayed hidden dom elements are calculated. The folding and hiding actions are blocked and delayed.
Disclosure of Invention
The invention aims to provide a method and equipment for rendering a visible area of a React.
According to an aspect of the present invention, there is provided a read visual area rendering method, including:
step S1, each level of cascade data in each level of cascade data is correspondingly split into a component, wherein the component comprises a higher level component and a lower level component, the higher level component is correspondingly split by the cascade data of the higher level, the lower level component is correspondingly split by the cascade data of the lower level, the higher level component and the lower level component respectively comprise corresponding elements, and the data communication is carried out between the higher level component and the lower level component by using props;
step S2, acquiring the initial height of the element in each level of assembly in the page and the initial position of the datum line relative to the screen; determining whether the elements in each level of components in the page are in a visual area of the screen based on the initial height and the initial position, and displaying the elements determined to be in the visual area after directly rendering the elements in the visual area;
step S3, if an event that an element in the cascade data of a certain upper and lower level on the screen is opened or folded is monitored, calculating a current height of the element in each level of the assembly in the page and a current position of the element relative to a reference line of the screen based on the opened or folded event and an initial height and an initial position of each element in each level of the assembly in the page; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area;
step S4, if the scrolling event of the page is monitored, calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and initial position of each element in each level of assembly in the page; and determining whether the element in each level of component in the page is in a visual area of a screen based on the current position and the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area.
Further, in the above method, after step S3 or step S4, the method further includes:
and rendering the elements outside the visual area into gray color blocks with the same width and height as those of the elements in the visual area, and then displaying the gray color blocks outside the visual area.
Further, in the above method, after step S3 or step S4, the method further includes:
and after the current height of the element in each level of the assembly in the page is taken as the corresponding initial height and the current position of the element in each level of the assembly in the page relative to the reference line of the screen is taken as the corresponding initial position, the operation goes to step S3 or step S4 again to execute.
Further, in the above method, step S2 includes:
acquiring basic field information of elements in each level of assembly in a page, setting the folding state of each piece of cascade data in the cascade data of the upper level and the lower level as unfolding, and setting the folding state of the second piece of cascade data and the folding state of the later piece of cascade data in the cascade data of the upper level and the lower level as folding;
and obtaining the initial height of the element in each level of assembly and the initial position of the reference line relative to the screen based on the basic field information of the element in each level of assembly in the page and the folding state of each piece of cascading data in the cascading data of the upper level and the lower level.
Further, in the above method, in step S3, the monitoring an event that an element in the cascading data of a certain upper and lower level on the screen is opened or folded includes:
and acquiring an event that the Collapse component monitors folding of an element in an upper component or unfolding of an element in a lower component in certain upper and lower cascade data through a hooking tool in the React.
Further, in the above method, in step S4, the monitoring of the scrolling event of the page includes:
and acquiring the rolling event of the page monitored by the javascript through a hooking tool in the React.
According to another aspect of the present invention, there is also provided a read viewable area rendering apparatus, wherein the apparatus includes:
the device comprises a splitting device and a control device, wherein the splitting device is used for correspondingly splitting each level of cascading data in each level of cascading data of an upper level and a lower level into one component, the components comprise an upper level component and a lower level component, the upper level component is correspondingly split by the cascading data of the upper level, the lower level component is correspondingly split by the cascading data of the lower level, the upper level component and the lower level component respectively comprise corresponding elements, and the upper level component and the lower level component are in data communication by using a props;
the initial device is used for acquiring the initial height of the element in each level of assembly in the page and the initial position of a reference line relative to the screen; determining whether the elements in each level of components in the page are in a visual area of the screen based on the initial height and the initial position, and displaying the elements determined to be in the visual area after directly rendering the elements in the visual area;
the folding device is used for calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the opened or folded event and the initial height and the initial position of each element in each level of assembly in the page if the event that a certain element in the cascade data of a certain upper level and a certain lower level on the screen is opened or folded is monitored; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area;
the scrolling device is used for calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and the initial position of each element in each level of assembly in the page if the scrolling event of the page is monitored; and determining whether the element in each level of component in the page is in a visual area of a screen based on the current position and the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area.
Further, the above apparatus further includes:
and the display device outside the visible area is used for rendering the elements outside the visible area into gray color blocks with the same width and height as those of the elements in the visible area, and then displaying the gray color blocks outside the visible area.
Further, the above apparatus further includes:
and the conversion device is used for taking the current height of the element in each level of assembly in the page as a corresponding initial height, taking the current position of the element in each level of assembly in the page relative to the reference line of the screen as a corresponding initial position, and then turning the current position to the folding device or the rolling device again for execution.
Further, in the above apparatus, the initiating device is configured to obtain basic field information of an element in each level of component in the page, set a folding state of each piece of cascade data in the upper and lower levels of cascade data to be unfolded, and set folding states of a second piece of cascade data and later pieces of cascade data in the upper and lower levels of cascade data to be folded; and obtaining the initial height of the element in each level of assembly and the initial position of the reference line relative to the screen based on the basic field information of the element in each level of assembly in the page and the folding state of each piece of cascading data in the cascading data of the upper level and the lower level.
Further, in the above device, the folding device is configured to obtain, through a hooking tool in the React, an event that the Collapse component monitors that an element in an upper component in a certain piece of upper and lower cascade data is folded or an element in a lower component below the Collapse component is unfolded.
Further, in the above device, the scrolling device is configured to obtain a scrolling event of the page monitored by the javascript through a hooking tool in the React.
According to another aspect of the present invention, there is also provided a computer readable medium having computer readable instructions stored thereon, the computer readable instructions being executable by a processor to implement the method of any one of the above.
According to another aspect of the present invention, there is also provided an apparatus for information processing at a network device, the apparatus comprising a memory for storing computer program instructions and a processor for executing the program instructions, wherein the computer program instructions, when executed by the processor, trigger the apparatus to perform the method of any of the above.
Compared with the prior art, each level of cascade data in each upper and lower level of cascade data is correspondingly split into one component, and if an event that a certain element in the certain upper and lower level of cascade data on a screen is opened or folded is monitored, the current height of the element in each level of component in the page and the current position of the element relative to a reference line of the screen are calculated based on the opened or folded event and the initial height and the initial position of each element in each level of component in the page; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area; if the scrolling event of the page is monitored, calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and the initial position of each element in each level of assembly in the page; determining whether the element in each level of assembly in the page is in a visual area of a screen based on the current position and the current position of the element in each level of assembly in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area; the invention can split the N-level cascade data into N components, and a plurality of logics can be multiplexed without logic confusion. The modules use the tips to carry out data communication, the data of the superior module is updated, and the sub-modules can all take the data. The data updating of the lower-level component can inform the parent component through a method on the props, so that a bidirectional updating mechanism of the data is completed while the logical decoupling is carried out, and the phenomena of blocking and delay are relieved when the page is rolled and folded to open the data. The original element is folded and unfolded with a delay of 1 second to 2 seconds, and the invention can be reduced to a delay of 0.2 second to 0.5 second. The screen scrolling is also significantly less jerky. This optimization effect is more obvious in the case of a large amount of data.
Drawings
Other features, objects and advantages of the invention will become more apparent upon reading of the detailed description of non-limiting embodiments made with reference to the following drawings:
FIG. 1 is a flowchart illustrating a method for rendering a React visible area according to an embodiment of the invention;
FIG. 2 illustrates a skeletal screen usage flow in accordance with an embodiment of the present invention;
FIG. 3 is a diagram illustrating a basic effect of a page according to an embodiment of the present invention;
FIG. 4 is a schematic diagram illustrating the effect of a skeletal screen in accordance with an embodiment of the present invention;
FIG. 5 is a diagram illustrating the recursive acquisition of keyMaps containing height according to one embodiment of the invention;
FIG. 6 is a schematic diagram of an algorithm for calculating element position information according to an embodiment of the present invention;
FIG. 7 shows a diagram of the basic functions of snooping, according to an embodiment of the invention.
Detailed Description
The present invention is described in further detail below with reference to the attached drawing figures.
In a typical configuration of the present application, the terminal, the device serving the network, and the trusted party each include one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-transitory computer readable media (transient media), such as modulated data signals and carrier waves.
The invention provides a read visual area rendering method, which comprises the following steps: step S1 to step S4, wherein,
step S1, each level of cascade data in each level of cascade data is correspondingly split into a component, wherein the component comprises a higher level component and a lower level component, the higher level component is correspondingly split by the cascade data of the higher level, the lower level component is correspondingly split by the cascade data of the lower level, the higher level component and the lower level component respectively comprise corresponding elements, and the data communication is carried out between the higher level component and the lower level component by using props;
here, each level of the cascade data is a single-dimensional array, and it is necessary to render dom by using a loop. If the 4-level cascading data is written to a file, a for loop is nested in a for loop, and the nesting of the 2 levels is enough to cause logic confusion;
for example, the cascade data of each upper and lower stage of the 4-stage cascade data correspondingly comprises from top to bottom: the system comprises a level 1 component, a level 2 component, a level 3 component and a level 4 component, wherein the level 1 component is an upper component of the level 2 component, and the corresponding level 2 component is a lower component of the level 1 component; the 2-level component is an upper-level component of the 3-level component, and the 3-level component is a lower-level component of the 2-level component; a level 3 component is an upper level component of a level 4 component, and a level 4 component is a lower level component of the level 3 component.
The 4-level cascade data has similar logic in each level, and the invention can split the 4-level cascade data into 4 components, so that a plurality of logics can be multiplexed and no logic confusion exists. The modules use the tips to carry out data communication, the data of the superior module is updated, and the sub-modules can all take the data. The data updating of the lower-level component can inform the parent component through a method on the props, so that a bidirectional updating mechanism of the data is completed while the logic decoupling is carried out;
step S2, acquiring the initial height (height) of the element in each level of component in the page and the initial position (top) of the reference line relative to the screen; determining whether the elements in each level of components in the page are in a visual area of the screen based on the initial height and the initial position, and displaying the elements determined to be in the visual area after directly rendering the elements in the visual area;
here, the reference line of the screen may be, for example, a top line or a bottom line of the screen, or a reference line of another fixed position on the screen;
after the page comes in, according to the flow shown in fig. 1, the initial height of each dom element and the initial position top of the base line relative to the screen are obtained, so that whether the dom element is in the visible area of the screen can be determined. The initial height and the initial position are the basis of the back monitoring, and the back folding and rolling events are to modify the height and the position top and to re-determine the elements in the visible area;
step S3, if an event that an element in cascade data of a certain upper and lower level on the screen is opened or folded is monitored, calculating the current height (height) of the element in each level of the assembly in the page and the current position (top) of the reference line relative to the screen based on the opened or folded event and the initial height and initial position of each element in each level of the assembly in the page; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area;
step S4, if the scrolling event of the page is monitored, calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and initial position of each element in each level of assembly in the page; and determining whether the element in each level of component in the page is in a visual area of a screen based on the current position and the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area.
Here, for example, as shown in fig. 3, the cascade data at the upper and lower stages includes quality inspection information including quality inspection attribute groups, quality inspection attribute items, quality inspection attribute points, and quality inspection attribute values, and the 4-stage data is in a cascade relationship, and the content area has a folding and unfolding effect, and can be scrolled beyond the content area.
The method comprises the steps that each level of cascade data in each upper level and lower level of cascade data is correspondingly split into one component, and if an event that a certain element in the certain upper level and lower level of cascade data on a screen is opened or folded is monitored, the current height of the element in each level of component in the page and the current position of the element relative to a reference line of the screen are calculated based on the opened or folded event and the initial height and the initial position of each element in each level of component in the page; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area; if the scrolling event of the page is monitored, calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and the initial position of each element in each level of assembly in the page; determining whether the element in each level of assembly in the page is in a visual area of a screen based on the current position and the current position of the element in each level of assembly in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area; the invention can split the N-level cascade data into N components, and a plurality of logics can be multiplexed without logic confusion. The modules use the tips to carry out data communication, the data of the superior module is updated, and the sub-modules can all take the data. The data updating of the lower-level component can inform the parent component through a method on the props, so that a bidirectional updating mechanism of the data is completed while the logical decoupling is carried out, and the phenomena of blocking and delay are relieved when the page is rolled and folded to open the data. The original element is folded and unfolded with a delay of 1 second to 2 seconds, and the invention can be reduced to a delay of 0.2 second to 0.5 second. The screen scrolling is also significantly less jerky. This optimization effect is more obvious in the case of a large amount of data.
In an embodiment of the method for rendering a real visual area, in step S3 or step S4, determining whether an element in each level of components in a page is within a visual area of a screen based on a current position of the element in each level of components in the page, and after the element determined to be within the visual area is directly rendered and displayed in the visual area, the method further includes:
in step S5, after rendering the elements outside the visible region into gray blocks with the same width and height as those of the elements inside the visible region, the elements are displayed outside the visible region.
In the method, through calculation, the Dom elements outside the visual area have the same width, height and relative position as the real Dom in the visual area, and the user can not sense the change of the elements outside the screen.
In addition, if the elements scroll too fast, the speed of replacement of the dom elements is slower than the user's scrolling, and the user can see the white portion of the screen that was off the screen before scrolling.
Therefore, in this embodiment, in order to reduce such a feeling of being obtrusive, a gray block with a size equivalent to that of the screen content area may be used to represent the text picture area in the real dom element, and simulate the real content outside the visual area. And the gray block parts have no user interaction events such as folding, pull-down, input and the like in real content, do not have a large amount of calculation logic and do not influence the page performance. Thus, the performance is improved, and bad experience is not caused.
As shown in fig. 4, when the page is scrolled faster, the effect is displayed outside the visible region. Since elements outside the visible area of the screen are about to quickly enter the visible area, the page is not ready to be replaced with business elements. Therefore, the page has the display time of a few tenths of a second of gray blocks with the same width and height as the elements in the visible area, and a gray block in the content area is similar to the content and does not have too large a pattern interval.
In an embodiment of the method for rendering a visible region of a real of the present invention, in step S3, determining whether an element in each level of components in a page is within a visible region of a screen based on a current position of the element in each level of components in the page, and after directly rendering the element determined to be within the visible region and displaying the element in the visible region, the method further includes:
in step S6, the current height of the element in each level of the assembly in the page is used as the corresponding initial height, and the current position of the element in each level of the assembly in the page relative to the reference line of the screen is used as the corresponding initial position, and then the process goes to step S3 or step S4 again.
In an embodiment of the method for rendering a visible region of a real of the present invention, in step S4, determining whether an element in each level of components in a page is within a visible region of a screen based on a current position of the element in each level of components in the page, and after directly rendering the element determined to be within the visible region and displaying the element in the visible region, the method further includes:
in step S6, the current height of the element in each level of the assembly in the page is used as the corresponding initial height, and the current position of the element in each level of the assembly in the page relative to the reference line of the screen is used as the corresponding initial position, and then the process goes to step S3 or step S4 again.
In an embodiment of the read visual area rendering method of the present invention, in step S2, the obtaining of the initial height of the element in each level of the component in the page and the initial position of the reference line relative to the screen includes:
step S21, acquiring basic field information of elements in each level of assembly in the page, setting the folding state of each piece of cascade data in the cascade data of the upper level and the lower level as unfolding, and setting the folding state of the second cascade data and the later cascade data in the cascade data of the upper level and the lower level as folding;
step S22, obtaining the initial height of the element in each level of the component and the initial position of the reference line relative to the screen based on the basic field information of the element in each level of the component in the page and the folded state of each piece of the cascaded data in the upper and lower levels of the cascaded data.
Specifically, as shown in fig. 1, it can be determined which element has a changed open or folded state according to an element parameter index in the loop, and the keys, the keyMaps, and the final handleedheights object can be dynamically modified in sequence.
As shown in fig. 1, after entering a page, pulling service data; then, simple processing can be performed according to the service data to obtain basic field information Keys corresponding to the data, and the fields contained in the basic field information Keys can be as follows: data primary key id, data name, cascade data level, whether subset data openend is expanded in view, subset data child, whether last level node isLeaf, next level data number child count. These fields can lay a foundation for subsequent height and top value calculation;
then, using keys as a reference, setting the folding state of each piece of cascade data in the cascade data of the upper and lower levels as unfolding, setting the folding state of the second piece of cascade data and the folding state of the later piece of cascade data in the cascade data of the upper and lower levels as folding, and recursively obtaining the keyMaps containing height as shown in fig. 5:
fig. 6 shows an algorithm for calculating position information, i.e. height, top information, of an element:
the algorithm takes the obtained keyMaps as the input parameter, and after calculation, the obtained handleedheights information comprises the following components: besides the fields inherited by keyMaps, height and top values are also used for representing the height of the element and position information relative to a base line at the bottom of the screen. These fields are dynamically altered as the screen is scrolled, and the view is collapsed and expanded.
In an embodiment of the method for rendering a visible region of a fact, in step S3, the monitoring an event that an element in cascade data of a certain upper and lower level on the screen is opened or folded includes:
and acquiring an event that the Collapse component monitors folding of an element in an upper component or unfolding of an element in a lower component in certain upper and lower cascade data through a hooking tool in the React.
Here, the Collapse component of AntDesign has onChange events for listening to element folding in an upper component or element events in a lower component below it. When an element in an upper component expands an element in a lower component below the element, the height of the element becomes larger, and conversely, when an element in an upper component folds an element in a lower component below the element, the height of the element becomes smaller. The height variation of the elements causes the display quantity of data in the visible area to be: when the height of an element is higher, fewer elements are displayed in the visual area, and vice versa. By listening to the folding or unfolding events and by calculating the height of the individual elements, the height of each element, and the position of the element relative to a reference line of the screen, can be determined.
The folding and unfolding process is relatively simple, and mainly uses the Collapse with the antd to monitor the onChange event. The open or folded state of which element is changed can be determined according to the element parameter index in the loop body, and the keys, the keyMaps and the final handledHeight object can be dynamically modified in sequence.
The hooks tool (hooks) of reach, compared with the commonly used useEffect hook, can monitor the change of the variables used in the component. In each level of assembly, the data of whether the element is folded and unfolded, the height of the element, the current position of the reference line relative to the screen and the like are involved, and the data are changed along with the folding and unfolding of the Collapse assembly and the rolling of the page. When the basic data changes, corresponding updates are needed for calculating which elements are in the visual area. The calculation data needs to be updated, which basic data is changed is necessarily known, namely, monitoring is carried out through useEffect, so that the execution of a calculation function taking the basic data as a reference is achieved, and which elements are calculated to be in a visible area or out of the visible area.
In an embodiment of the method for rendering a visible area of a fact of the present invention, in step S4, the monitoring the scrolling event of the page includes:
and acquiring the rolling event of the page monitored by the javascript through a hooking tool in the React.
Here, while the page is scrolling, the element height does not change, but the position top relative to the screen reference line changes. According to the screen scrolling height and the position to of the element relative to the screen reference line before scrolling occurs, the top value after scrolling can be calculated, and then whether each element is in the visual area of the screen or not can be recalculated one by one.
The native javascript can monitor a scrolling event for the scrollable element, and the elements that can be displayed in the visible area change along with the scrolling of the 4-level data body element. By monitoring the scroll event and the height and relative position of each element, which elements are shown in the visual area at a certain moment can be calculated.
During initialization, there will be some height, top values used to calculate the relative position of each element. It is known from the position information whether each element is outside the screen area or within the visible area of the screen. As shown in fig. 2, elements within the visible area of the screen can be rendered directly, completely business logic; elements outside the visible area of the screen can be rendered according to basic layout information of the elements under the service logic, the layout information is the width, the height and the position of the content area, and a gray block is placed at the position.
Shown in fig. 7 is the basic function of snooping:
when the screen is scrolled, the scrolling position is marked dynamically, and the change of the scrollTop is monitored, and the actual position of the element can be determined according to the top value, the height value and the scrollTop value at the position of the rendering dom so as to determine whether the element is in the screen or not.
The same monitoring is carried out, when all levels of views are folded and unfolded, the total height can be changed, and 2 folded and unfolded heights can be respectively calculated according to the respective contents. And correspondingly assigning the 2 heights when the height is changed, and simultaneously processing the change of the height and the top of each element in the lower keyMaps and height Handler calculation object.
According to another aspect of the present invention, there is also provided a read viewable area rendering apparatus, wherein the apparatus includes:
the device comprises a splitting device and a control device, wherein the splitting device is used for correspondingly splitting each level of cascading data in each level of cascading data of an upper level and a lower level into one component, the components comprise an upper level component and a lower level component, the upper level component is correspondingly split by the cascading data of the upper level, the lower level component is correspondingly split by the cascading data of the lower level, the upper level component and the lower level component respectively comprise corresponding elements, and the upper level component and the lower level component are in data communication by using a props;
the initial device is used for acquiring the initial height of the element in each level of assembly in the page and the initial position of a reference line relative to the screen; determining whether the elements in each level of components in the page are in a visual area of the screen based on the initial height and the initial position, and displaying the elements determined to be in the visual area after directly rendering the elements in the visual area;
the folding device is used for calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the opened or folded event and the initial height and the initial position of each element in each level of assembly in the page if the event that a certain element in the cascade data of a certain upper level and a certain lower level on the screen is opened or folded is monitored; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area;
the scrolling device is used for calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and the initial position of each element in each level of assembly in the page if the scrolling event of the page is monitored; and determining whether the element in each level of component in the page is in a visual area of a screen based on the current position and the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area.
Further, the above apparatus further includes:
and the display device outside the visible area is used for rendering the elements outside the visible area into gray color blocks with the same width and height as those of the elements in the visible area, and then displaying the gray color blocks outside the visible area.
Further, the above apparatus further includes:
and the conversion device is used for taking the current height of the element in each level of assembly in the page as a corresponding initial height, taking the current position of the element in each level of assembly in the page relative to the reference line of the screen as a corresponding initial position, and then turning the current position to the folding device or the rolling device again for execution.
Further, in the above apparatus, the initiating device is configured to obtain basic field information of an element in each level of component in the page, set a folding state of each piece of cascade data in the upper and lower levels of cascade data to be unfolded, and set folding states of a second piece of cascade data and later pieces of cascade data in the upper and lower levels of cascade data to be folded; and obtaining the initial height of the element in each level of assembly and the initial position of the reference line relative to the screen based on the basic field information of the element in each level of assembly in the page and the folding state of each piece of cascading data in the cascading data of the upper level and the lower level.
Further, in the above device, the folding device is configured to obtain, through a hooking tool in the React, an event that the Collapse component monitors that an element in an upper component in a certain piece of upper and lower cascade data is folded or an element in a lower component below the Collapse component is unfolded.
Further, in the above device, the scrolling device is configured to obtain a scrolling event of the page monitored by the javascript through a hooking tool in the React.
According to another aspect of the present invention, there is also provided a computer readable medium having computer readable instructions stored thereon, the computer readable instructions being executable by a processor to implement the method of any one of the above.
According to another aspect of the present invention, there is also provided an apparatus for information processing at a network device, the apparatus comprising a memory for storing computer program instructions and a processor for executing the program instructions, wherein the computer program instructions, when executed by the processor, trigger the apparatus to perform the method of any of the above.
For details of embodiments of each device and storage medium of the present invention, reference may be made to corresponding parts of each method embodiment, and details are not described herein again.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present application without departing from the spirit and scope of the application. Thus, if such modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is intended to include such modifications and variations as well.
It should be noted that the present invention may be implemented in software and/or in a combination of software and hardware, for example, as an Application Specific Integrated Circuit (ASIC), a general purpose computer or any other similar hardware device. In one embodiment, the software program of the present invention may be executed by a processor to implement the steps or functions described above. Also, the software programs (including associated data structures) of the present invention can be stored in a computer readable recording medium, such as RAM memory, magnetic or optical drive or diskette and the like. Further, some of the steps or functions of the present invention may be implemented in hardware, for example, as circuitry that cooperates with the processor to perform various steps or functions.
In addition, some of the present invention can be applied as a computer program product, such as computer program instructions, which when executed by a computer, can invoke or provide the method and/or technical solution according to the present invention through the operation of the computer. Program instructions which invoke the methods of the present invention may be stored on a fixed or removable recording medium and/or transmitted via a data stream on a broadcast or other signal-bearing medium and/or stored within a working memory of a computer device operating in accordance with the program instructions. An embodiment according to the invention herein comprises an apparatus comprising a memory for storing computer program instructions and a processor for executing the program instructions, wherein the computer program instructions, when executed by the processor, trigger the apparatus to perform a method and/or solution according to embodiments of the invention as described above.
It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential attributes thereof. The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference sign in a claim should not be construed as limiting the claim concerned. Furthermore, it is obvious that the word "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. A plurality of units or means recited in the apparatus claims may also be implemented by one unit or means in software or hardware. The terms first, second, etc. are used to denote names, but not any particular order.
Claims (14)
1. A method for rendering a real visual area, wherein the method comprises:
step S1, each level of cascade data in each level of cascade data is correspondingly split into a component, wherein the component comprises a higher level component and a lower level component, the higher level component is correspondingly split by the cascade data of the higher level, the lower level component is correspondingly split by the cascade data of the lower level, the higher level component and the lower level component respectively comprise corresponding elements, and the data communication is carried out between the higher level component and the lower level component by using props;
step S2, acquiring the initial height of the element in each level of assembly in the page and the initial position of the datum line relative to the screen; determining whether the elements in each level of components in the page are in a visual area of the screen based on the initial height and the initial position, and displaying the elements determined to be in the visual area after directly rendering the elements in the visual area;
step S3, if an event that an element in the cascade data of a certain upper and lower level on the screen is opened or folded is monitored, calculating a current height of the element in each level of the assembly in the page and a current position of the element relative to a reference line of the screen based on the opened or folded event and an initial height and an initial position of each element in each level of the assembly in the page; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area;
step S4, if the scrolling event of the page is monitored, calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and initial position of each element in each level of assembly in the page; and determining whether the element in each level of component in the page is in a visual area of a screen based on the current position and the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area.
2. The method of claim 1, wherein after step S3 or step S4, further comprising:
and rendering the elements outside the visual area into gray color blocks with the same width and height as those of the elements in the visual area, and then displaying the gray color blocks outside the visual area.
3. The method of claim 1, wherein after step S3 or step S4, further comprising:
and after the current height of the element in each level of the assembly in the page is taken as the corresponding initial height and the current position of the element in each level of the assembly in the page relative to the reference line of the screen is taken as the corresponding initial position, the operation goes to step S3 or step S4 again to execute.
4. The method according to claim 1, wherein step S2 includes:
acquiring basic field information of elements in each level of assembly in a page, setting the folding state of each piece of cascade data in the cascade data of the upper level and the lower level as unfolding, and setting the folding state of the second piece of cascade data and the folding state of the later piece of cascade data in the cascade data of the upper level and the lower level as folding;
and obtaining the initial height of the element in each level of assembly and the initial position of the reference line relative to the screen based on the basic field information of the element in each level of assembly in the page and the folding state of each piece of cascading data in the cascading data of the upper level and the lower level.
5. The method according to claim 1, wherein the step S3, in the event that a certain element in the cascading data of a certain upper and lower level on the screen is opened or folded, includes:
and acquiring an event that the Collapse component monitors folding of an element in an upper component or unfolding of an element in a lower component in certain upper and lower cascade data through a hooking tool in the React.
6. The method according to claim 1, wherein the step S4, monitoring the scrolling event of the page, comprises:
and acquiring the rolling event of the page monitored by the javascript through a hooking tool in the React.
7. A read visual area rendering apparatus, wherein the apparatus comprises:
the device comprises a splitting device and a control device, wherein the splitting device is used for correspondingly splitting each level of cascading data in each level of cascading data of an upper level and a lower level into one component, the components comprise an upper level component and a lower level component, the upper level component is correspondingly split by the cascading data of the upper level, the lower level component is correspondingly split by the cascading data of the lower level, the upper level component and the lower level component respectively comprise corresponding elements, and the upper level component and the lower level component are in data communication by using a props;
the initial device is used for acquiring the initial height of the element in each level of assembly in the page and the initial position of a reference line relative to the screen; determining whether the elements in each level of components in the page are in a visual area of the screen based on the initial height and the initial position, and displaying the elements determined to be in the visual area after directly rendering the elements in the visual area;
the folding device is used for calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the opened or folded event and the initial height and the initial position of each element in each level of assembly in the page if the event that a certain element in the cascade data of a certain upper level and a certain lower level on the screen is opened or folded is monitored; determining whether the element in each level of component in the page is in a visual area of a screen or not based on the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area;
the scrolling device is used for calculating the current height of the element in each level of assembly in the page and the current position of the element relative to the reference line of the screen based on the scrolling operation of the page and the initial height and the initial position of each element in each level of assembly in the page if the scrolling event of the page is monitored; and determining whether the element in each level of component in the page is in a visual area of a screen based on the current position and the current position of the element in each level of component in the page, and directly rendering the element determined to be in the visual area and then displaying the element in the visual area.
8. The apparatus of claim 7, further comprising:
and the display device outside the visible area is used for rendering the elements outside the visible area into gray color blocks with the same width and height as those of the elements in the visible area, and then displaying the gray color blocks outside the visible area.
9. The apparatus of claim 7, further comprising:
and the conversion device is used for taking the current height of the element in each level of assembly in the page as a corresponding initial height, taking the current position of the element in each level of assembly in the page relative to the reference line of the screen as a corresponding initial position, and then turning the current position to the folding device or the rolling device again for execution.
10. The apparatus according to claim 7, wherein the initiating device is configured to obtain basic field information of elements in each level of component in the page, set a folding state of each piece of concatenated data in the upper and lower levels of concatenated data to be unfolded, and set folding states of a second piece of concatenated data and subsequent concatenated data in the upper and lower levels of concatenated data to be folded; and obtaining the initial height of the element in each level of assembly and the initial position of the reference line relative to the screen based on the basic field information of the element in each level of assembly in the page and the folding state of each piece of cascading data in the cascading data of the upper level and the lower level.
11. The device according to claim 7, wherein the folding means is configured to obtain, through the hooking tool in the act, an event that the Collapse component listens to a certain piece of cascade data at a lower level for folding an element in an upper level component or unfolding an element in a lower level component below the Collapse component.
12. The device of claim 7, wherein the scrolling means is configured to obtain a scrolling event of a page monitored by javascript through a hooking tool in React.
13. A computer readable medium having computer readable instructions stored thereon which are executable by a processor to implement the method of any one of claims 1 to 6.
14. An apparatus for information processing at a network device, the apparatus comprising a memory for storing computer program instructions and a processor for executing the program instructions, wherein the computer program instructions, when executed by the processor, trigger the apparatus to perform the method of any of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111649240.0A CN114356327B (en) | 2021-12-29 | 2021-12-29 | Method and equipment for rendering real visible area |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111649240.0A CN114356327B (en) | 2021-12-29 | 2021-12-29 | Method and equipment for rendering real visible area |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114356327A true CN114356327A (en) | 2022-04-15 |
| CN114356327B CN114356327B (en) | 2024-05-17 |
Family
ID=81102435
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111649240.0A Active CN114356327B (en) | 2021-12-29 | 2021-12-29 | Method and equipment for rendering real visible area |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114356327B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117194828A (en) * | 2023-11-08 | 2023-12-08 | 一网互通(北京)科技有限公司 | Table rolling paging method and device in reaction and electronic equipment |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110377851A (en) * | 2019-06-18 | 2019-10-25 | 平安科技（深圳）有限公司 | Implementation method, device and the computer equipment of multistage linking combobox |
| CN111008047A (en) * | 2019-11-19 | 2020-04-14 | 北京字节跳动网络技术有限公司 | Page element conflict processing method and device and electronic equipment |
| CN111381823A (en) * | 2020-03-11 | 2020-07-07 | 四川长虹电器股份有限公司 | Web end long list rendering method |
| CN113110837A (en) * | 2021-04-02 | 2021-07-13 | 北京沃东天骏信息技术有限公司 | Method and device for processing page information |
| CN113590656A (en) * | 2021-07-21 | 2021-11-02 | 上海淇玥信息技术有限公司 | Query data rendering method and device and electronic equipment |
| CN113672320A (en) * | 2021-07-19 | 2021-11-19 | 杭州未名信科科技有限公司 | Method, equipment and storage medium for rendering webpage based on DOM element |
-
2021
- 2021-12-29 CN CN202111649240.0A patent/CN114356327B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110377851A (en) * | 2019-06-18 | 2019-10-25 | 平安科技（深圳）有限公司 | Implementation method, device and the computer equipment of multistage linking combobox |
| WO2020253059A1 (en) * | 2019-06-18 | 2020-12-24 | 平安科技（深圳）有限公司 | Method and apparatus for implementing multi-stage linkage drop-down box, and computer device |
| CN111008047A (en) * | 2019-11-19 | 2020-04-14 | 北京字节跳动网络技术有限公司 | Page element conflict processing method and device and electronic equipment |
| CN111381823A (en) * | 2020-03-11 | 2020-07-07 | 四川长虹电器股份有限公司 | Web end long list rendering method |
| CN113110837A (en) * | 2021-04-02 | 2021-07-13 | 北京沃东天骏信息技术有限公司 | Method and device for processing page information |
| CN113672320A (en) * | 2021-07-19 | 2021-11-19 | 杭州未名信科科技有限公司 | Method, equipment and storage medium for rendering webpage based on DOM element |
| CN113590656A (en) * | 2021-07-21 | 2021-11-02 | 上海淇玥信息技术有限公司 | Query data rendering method and device and electronic equipment |
Non-Patent Citations (2)
| Title |
|---|
| 冯渊，赵琳: "一种实现PIM-SM组播数据线速转发的方案", 计算机应用研究, no. 04, 28 April 2005 (2005-04-28) * |
| 常永宏;姚彦;: "HSUPA快速调度技术研究与算法优化——新的缓冲区状态报告方案及数据传输优化", 电信科学, no. 11, 15 November 2007 (2007-11-15) * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117194828A (en) * | 2023-11-08 | 2023-12-08 | 一网互通(北京)科技有限公司 | Table rolling paging method and device in reaction and electronic equipment |
| CN117194828B (en) * | 2023-11-08 | 2024-02-06 | 一网互通(北京)科技有限公司 | Table rolling paging method and device in reaction and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114356327B (en) | 2024-05-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2021036734A1 (en) | Tree module rendering method and device, data processing equipment and medium | |
| CN107704576B (en) | Data display optimization method and device, terminal equipment and storage medium | |
| JP4945708B2 (en) | Computer input control to specify ranges by explicit exclusion | |
| TW202141300A (en) | Page processing method, device, apparatus and storage medium | |
| CN106033471B (en) | A kind of method and apparatus handling list | |
| US7788599B2 (en) | User interface elements for hierarchical selection of items | |
| US7657830B2 (en) | Layout size sharing in a grid layout for a user interface | |
| US20230115491A1 (en) | Information presentation method and apparatus, electronic device, and storage medium | |
| CN112527288B (en) | Visual system prototype design method, system and storage medium capable of generating codes | |
| CN111258577B (en) | Page rendering method, device, electronic equipment and storage medium | |
| CN110955850A (en) | Processing method of modular tree control | |
| CN113672323A (en) | Page display method and device | |
| US20070150485A1 (en) | Navigating through a displayed hierarchical data structure | |
| CN116955863A (en) | Dynamic tree structure rendering method and device based on virtual tree | |
| CN114356327A (en) | React visual area rendering method and device | |
| CA2686367A1 (en) | Dynamic native editor code view facade | |
| CN117762519A (en) | Component management method, device, computer equipment and storage medium | |
| US7900159B2 (en) | Techniques for representing and organizing user interface data | |
| CN116932829A (en) | Solutions for developer supporting big data tree view components | |
| JP2002259446A (en) | System and method for browsing node-link structure based on estimated degree of interest | |
| CN114722112A (en) | Visual list data display method and device | |
| CN111880889B (en) | Interface display method and device, electronic equipment and storage medium | |
| CN114510671A (en) | Page display method and equipment based on tree-shaped component | |
| CN116628272B (en) | Tree structure node rapid selection method based on vue framework | |
| CN116501318B (en) | Form creation method, form creation device, electronic equipment and computer readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |