A system and method for dynamically triggering rendering between multiple components based on React and ahooks

Abstract

The present invention discloses a system and method for dynamically triggering rendering between multiple components based on React and ahooks. An ahooks component monitoring module is used to monitor changes in input global state data in a query input module. If changes occur, the input global state data is updated according to input query parameters of the input query input module, and is transferred to a data processing module through an API interface to update intermediate global state data. The output global state data is then updated through the API interface using the updated intermediate global state data. The output global state data in the query output module is monitored through the ahooks component monitoring module. If changes occur, components in the query output module are dynamically rendered to obtain query results. The present invention realizes direct transmission of data within each component of a React page, across hierarchical components, and between internal components and external data sources, thereby improving communication efficiency between React components.

Description

Technical Field

[0001] The present invention relates to the technical field of component rendering, and in particular to a system and method for dynamically triggering rendering between multiple components based on React and ahooks. Background Art

[0002] React divides the generation principle of page components into two stages, namely the scheduling stage and the rendering stage. In the scheduling stage, React will generate a Fiber node tree and schedule it from top to bottom according to the Fiber node tree; in the rendering stage, React will insert DOM nodes from bottom to top according to the Fiber node tree to generate page components. According to the generation principle of React page components, there are three ways of communication between React components: 1. Parent-child component value transfer. The parent component in the React page passes the data in the attribute to the child component through the Props attribute. The Props attribute is a one-way, unmodifiable data flow from the parent component to the child component. 2. Child-parent component value transfer. The child component passes the data as a parameter to the parent component through the callback function function in the Props attribute. 3. Brother component value transfer and promote the data sharing status of the brother component to the nearest parent component. The parent component provides data through Context.Provider, and the child component receives data through Context.Consumer. In the actual application of React projects, such as Figure 1 , if the communicating components A and C are located at the bottom of different forks of the Fiber node tree, component A needs to pass data from bottom to top to the common parent component, and the parent component then passes data from top to bottom to component C according to the Fiber node tree, resulting in heavy rendering of the React page component. In summary, communication between native React components requires layer-by-layer transmission of data, and existing technologies cannot realize data communication between any two or more components, and cannot realize dynamic trigger rendering between components. Summary of the invention

[0003] In view of the problems existing in the prior art, the present invention provides a system and method for dynamically triggering rendering between multiple components based on React and ahooks, which realizes the communication between any components in the React project and solves the problem of data transmission between native React components through parent-child components.

[0004] To achieve the above technical objectives, the present invention adopts the following technical solutions: a system for dynamically triggering rendering between multiple components based on React and ahooks, comprising: a query input module, a data processing module, an ahooks component monitoring module and a query output module;

[0005] The data processing module is provided with intermediate global state data, and is connected to the query input module and the query output module respectively through an API interface;

[0006] The query input module is provided with input global status data;

[0007] The ahooks component monitoring module is used to monitor the changes of the input global state data in the query input module. If there is a change, the input global state data is updated according to the input query parameters of the query input module, and is passed to the data processing module through the API interface to update the intermediate global state data;

[0008] The query output module is provided with output global status data, and updates the output global status data using updated intermediate global status data through an API interface, and monitors the output global status data in the query output module through the ahooks component monitoring module. If the data changes, the components in the query output module are dynamically rendered to obtain query results.

[0009] Further, the query input module includes: a text box component A1, the text box component A1 sets the input global state data inputValueA1, and sets the trigger method function of the text box component onChange method, inputs the event object of the text box component A1 as a parameter into the trigger method function of the text box component onChange method, and uses the output of the trigger method function of the text box component onChange method to update the input global state data InputValueA1;

[0010] The trigger method function of the onChange method of the text box component is: <input value＝{value}onChange＝{(e:any)＝> {setInputValueA1(e.target.value);}} / >, where e is the event object of the text box component A1.

[0011] Further, the query input module also includes: a drop-down menu component A2, the drop-down menu component A2 sets the input global state data InputValueA2, and sets the trigger method function handleChangeA2 of the drop-down menu component onChange method, inputs the value attribute of the drop-down menu component as a parameter into the trigger method function handleChangeA2, and uses the output of the trigger method function handleChangeA2 to update the input global state data InputValueA2;

[0012] The trigger method function handleChangeA2 is: <select onchange＝{handlechangea2＝(value1:string)＝> {setInputValueA2(value1)};}>, wherein value1 is the value attribute of the drop-down menu component.

[0013] Further, the query input module also includes: a secondary drop-down menu component A3, the secondary drop-down menu component A3 sets the input global state data InputValueA3, and sets the trigger method function handleChangeA3 of the secondary drop-down menu component onChange event, the value attribute of the secondary drop-down menu component is input as a parameter into the trigger method function handleChangeA3, and the output of the trigger method function handleChangeA3 is updated to the input global state data InputValueA3;

[0014] the trigger method function handleChangeA3 is:< / select>{setInputValueA3(value2)};}>, where value2 is the value attribute of the secondary drop-down menu component.

[0015] Further, the intermediate global state data in the data processing module includes InitSelect and InitSubSelect;

[0016] When there is data in InitSelect, dynamically render the Option menu item of the drop-down menu component A2 in the query input module;

[0017] When the input global state data InputValueA2 changes, InitSubSelect is updated and the Option menu item of the secondary drop-down menu component A3 in the query input module is re-rendered.

[0018] Furthermore, the query output module includes a text display component B1, and the text display component B1 is configured to output global state data OutputDataB1, and continuously displays the input content of the text box component A1 in the query input module in real time according to the output global state data OutputDataB1.

[0019] Furthermore, the query output module also includes a tree list component B2, which is configured to output global status data OutputDataB2, and displays the data of the drop-down menu component A2 and the secondary drop-down menu component A3 in the query input module on the tree list component B2 according to the output global status data OutputDataB2.

[0020] Furthermore, the query output module also includes a query result list component B3, and the query result list component B3 is configured to output global state data OutputDataB3, and displays a result list after querying all input parameters according to the output global state data OutputDataB3.

[0021] Furthermore, the ahooks component monitoring module is provided with a useEffect hook function and a useUpdateEffect hook function. The useEffect hook function is used to monitor the input global state data, intermediate global state data and output global state data during the first execution, and the useUpdateEffect hook function is used to monitor the input global state data, intermediate global state data and output global state data during subsequent executions.

[0022] Furthermore, the present invention also provides a method for dynamically triggering rendering between multiple components of the system for dynamically triggering rendering between multiple components based on React and ahooks. The specific process in different scenarios is as follows:

[0023] (1) The useEffect hook function in the ahooks component monitoring module monitors the intermediate global state data InitSelect. When data exists in InitSelect, the Option menu item of the drop-down menu component A2 in the query input module is dynamically rendered; the useUpdateEffect hook function monitors the input global state data InputValueA2. When the global state data InputValueA2 changes, the global state data InputValueA2 is used as a parameter to input the data processing module through the API interface, and InitSubSelect is updated to re-render the Option menu item of the drop-down menu component A3 in the query input module;

[0024] (2) The input global state data InputValueA1 is monitored through the useEffect hook function in the ahooks component monitoring module. When the input global state data InputValueA1 changes, the output global state data OutputDataB1 is updated through the data processing module. The ahooks component monitoring module monitors the output global state data OutputDataB1 through the useEffect hook function. When the output global state data OutputDataB1 changes, the data in the text display component B1 in the query output module is updated in real time;

[0025] (3) The useUpdateEffect hook function in the ahooks component monitoring module monitors the input global state data InputValueA2 and InputValueA3. When at least one of them changes, the output global state data OutputDataB2 is updated by using InputValueA2 as the key and InputValueA3 as the value through the data processing module. The ahooks component monitoring module monitors the output global state data OutputDataB2 through the useUpdateEffect hook function. When the output global state data OutputDataB2 changes, the tree list component B2 in the query output module is dynamically rendered;

[0026] (4) The input global state data InputValueA1, InputValueA2, and InputValueA3 are monitored through the useUpdateEffect hook function in the ahooks component monitoring module. When at least one of them changes, the input global state data InputValueA1, InputValueA2, and InputValueA3 are passed as parameters through the data processing module to update the output global state data OutputDataB3. The ahooks component monitoring module monitors the output global state data OutputDataB3 through the useUpdateEffect function. When the output global state data OutputDataB3 changes, the list component B3 in the query output module is dynamically rendered.

[0027] Compared with the prior art, the present invention has the following beneficial effects: the system for dynamically triggering rendering between multiple components based on React and ahooks of the present invention uses the useEffect and useUpdateEffect hook functions of ahooks to build a state monitoring module, and realizes the direct transmission of data within each component of the React page, across hierarchical components, and between internal components and external data sources, greatly improving the communication efficiency between React components, realizing dynamic triggering rendering between multiple components, and solving the problem of traditional React components being transmitted layer by layer through parent-child components. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 This is a schematic diagram of the communication principle between native React components;

[0029] Figure 2 It is a framework diagram of the system for dynamically triggering rendering between multiple components based on React and ahooks of the present invention;

[0030] Figure 3 This is a schematic diagram of the communication principle of the system for dynamically triggering rendering between multiple components based on React and Ahooks of the present invention. DETAILED DESCRIPTION

[0031] The technical solution of the present invention is further explained below in conjunction with the accompanying drawings.

[0032] like Figure 2The framework diagram of the system for dynamically triggering rendering between multiple components based on React and ahooks of the present invention comprises: a query input module, a data processing module, an ahooks component monitoring module and a query output module; the data processing module is provided with intermediate global status data, which is respectively connected with the query input module and the query output module through an API interface; the query input module is provided with input global status data; the ahooks component monitoring module is used to monitor the change of the input global status data in the query input module, if it changes, the input global status data is updated according to the input query parameters of the input query input module, and is passed to the data processing module through the API interface to update the intermediate global status data; the query output module is provided with output global status data, the output global status data is updated using the updated intermediate global status data through the API interface, the output global status data in the query output module is monitored through the ahooks component monitoring module, if it changes, the components in the query output module are dynamically rendered to obtain the query result. The ahooks component listening module solves the problem of native React components passing data through parent-child components layer by layer, and realizes the direct transmission of data within each component of the React page, across-level components, and between internal components and external data sources. It greatly improves the communication efficiency between React components and realizes dynamic trigger rendering between multiple components.

[0033] The query input module in the present invention includes: a text box component A1, a drop-down menu component A2 and a secondary drop-down menu component A3. The text box component A1 in the present invention sets the input global state data inputValueA1, and sets the trigger method function of the text box component onChange method, inputs the event object of the text box component A1 as a parameter into the trigger method function of the text box component onChange method, and uses the output of the trigger method function of the text box component onChange method to update the input global state data InputValueA1; the trigger method function of the text box component onChange method in the present invention is: <input value＝{value}onChange＝{(e:any)＝> {setInputValueA1(e.target.value);}} / >, where e is the event object of the text box component A1.

[0034] In the present invention, the drop-down menu component A2 sets the input global state data InputValueA2, and sets the trigger method function handleChangeA2 of the drop-down menu component onChange method, inputs the value attribute of the drop-down menu component as a parameter into the trigger method function handleChangeA2, and uses the output of the trigger method function handleChangeA2 to update the input global state data InputValueA2; the trigger method function handleChangeA2 in the present invention is:<SelectonChange={handleChangeA2=(value1:string)=> {setInputValueA2(value1)};}>, where value1 is the value attribute of the drop-down menu component.

[0035] In the present invention, the secondary drop-down menu component A3 sets the input global state data InputValueA3, and sets the trigger method function handleChangeA3 of the secondary drop-down menu component onChange event, inputs the value attribute of the secondary drop-down menu component as a parameter into the trigger method function handleChangeA3, and updates the input global state data InputValueA3 with the output of the trigger method function handleChangeA3; the trigger method function handleChangeA3 in the present invention is: <select onchange＝{handlechangea3＝(value2:string)＝>{setInputValueA3(value2)};}>, wherein value2 is the value attribute of the secondary drop-down menu component.

[0036] The data in the Option menu item of the native React drop-down menu is obtained through the parent component Select. The present invention includes InitSelect and InitSubSelect in the intermediate global state data in the data processing module; when there is data in InitSelect, the Option menu item of the drop-down menu component A2 in the query input module is dynamically rendered; when the input global state data InputValueA2 changes, InitSubSelect is updated, and the Option menu item of the secondary drop-down menu component A3 in the query input module is re-rendered. The present invention uses the uesEffect hook function to monitor the data in InitSelect and InitSubSelect to dynamically render the Option menu items of the drop-down menu component A2 and the secondary drop-down menu component A3, thereby solving the problem of React components being transmitted layer by layer through parent-child components and improving the efficiency of data transmission.

[0037] The data transmission across hierarchical components in React is implemented through Context.Provider, but it must rely on a common parent component. The query output module of the present invention includes: a text display component B1, a tree list component B2 and a query result list component B3. The text display component B1 is configured to output global state data OutputDataB1, and the input content of the text box component A1 in the query input module is continuously displayed in real time according to the output global state data OutputDataB1. The query output module also includes a tree list component B2, and the tree list component B2 is configured to output global state data OutputDataB2, and the data of the drop-down menu component A2 and the secondary drop-down menu component A3 in the query input module are displayed on the tree list component B2 according to the output global state data OutputDataB2. The query result list component B3 sets the output global state data OutputDataB3, displays the result list after all input parameter queries according to the output global state data OutputDataB3, monitors the input global state data in the query input module through the useUpdateEffect hook function, and directly penetrates the text display component B1, the tree list component B2 and the query result list component B3 in the rendering query output module through the global state data transmission, thereby realizing the cross-component data transmission between non-common parent components in React and improving the flexibility of data transmission between components.

[0038] In the present invention, the ahooks component monitoring module is provided with a useEffect hook function and a useUpdateEffect hook function, and the useEffect hook function is used to monitor the input global state data, the intermediate global state data and the output global state data when it is first executed.The useUpdateEffect hook function is used to monitor the input global state data, intermediate global state data, and output global state data during subsequent execution. The ahooks component monitoring module enables direct data transmission within each component of the React page, across hierarchical components, and between internal components and external data sources, greatly improving the communication efficiency between React components and achieving dynamic trigger rendering between multiple components.

[0039] The present invention also provides a method for dynamic triggering rendering between multiple components of a system for dynamic triggering rendering between multiple components based on React and ahooks. The specific processes in different scenarios are as follows:

[0040] (1) The intermediate global state data InitSelect is monitored through the useEffect hook function in the ahooks component monitoring module. When data exists in InitSelect, the Option menu item of the drop-down menu component A2 in the query input module is dynamically rendered; the input global state data InputValueA2 is monitored through the useUpdateEffect hook function. When the global state data InputValueA2 changes, the global state data InputValueA2 is input as a parameter into the data processing module through the API interface, InitSubSelect is updated, and the Option menu item of the drop-down menu component A3 in the query input module is re-rendered;

[0041] (2) The input global state data InputValueA2 is monitored through the useEffect hook function in the ahooks component monitoring module. eA1, when the input global state data InputValueA1 changes, the output global state data OutputDataB1 is updated through the data processing module, and the ahooks component monitoring module monitors the output global state data OutputDataB1 through the useEffect hook function. When the output global state data OutputDataB1 changes, the data in the text display component B1 in the query output module is updated in real time;

[0042] (3) the input global state data InputValueA2 and InputValueA3 are monitored through the useUpdateEffect hook function in the ahooks component monitoring module. When at least one of them changes, the output global state data OutputDataB2 is updated through the data processing module with InputValueA2 as the key and InputValueA3 as the value. The ahooks component monitoring module monitors the output global state data OutputDataB2 through the useUpdateEffect hook function. When the output global state data OutputDataB2 changes,Dynamically render the tree list component B2 in the query output module;

[0043] (4) monitor the input global state data InputValueA1, InputValueA2, InputValueA3 through the useUpdateEffect hook function in the ahooks component monitoring module. When at least one of them changes, the input global state data InputValueA1, InputValueA2, InputValueA3 is passed as a parameter through the data processing module to update the output global state data OutputDataB3. The ahooks component monitoring module monitors the output global state data OutputDataB3 through the useUpdateEffect function. When the output global state data OutputDataB3 changes, dynamically render the list component B3 in the query output module.

[0044] As shown in Figure 3, according to the generation principle of React page components, when the React page creates a Fiber node tree and performs scheduling, a Fiber.effectTag=Placement state tag is created on the dynamically rendered node as needed, and a trigger rendering linked list of the Fiber node tree is created through the useEffect and useUpdateEffect hook functions of ahooks, and the one-way linked list effectList is linked through the pointer of the linked list. The trigger rendering of the component only needs to traverse the effectList linked list to realize the dynamic trigger rendering between components. By constructing the ahooks component state monitoring module, the communication between any components in the React project is realized, and the problem of data transmission between the parent and child components of the native React components is solved; at the same time, the components such as Input, Select, Tooltip, TreeSelect, List of antd are introduced in the React component interface construction to construct the query input and output modules, and the unified management of component data is realized by defining component initialization data, inputting global state data, and outputting global state data.

[0045] Embodiment

[0046] The existing user name (userName), department name (departmentName), and section name (subDepartmentName) are used as input parameters of the query input module. The user name is an input text box, the department name is a drop-down menu, and the section name is a secondary drop-down menu of section names dynamically constructed by the selected department name. The query output is: 1. Real-time display of the input user name 2. Organization tree list generated according to the department name and section name 3. User list (userList) obtained by cascading query of the above three parameters. The above query function involves the mutual transmission of data within the input module and the penetration transmission of input data, API interface, and output data.It is difficult to solve the problem by wrapping the query component with a conventional Form component to pass data layer by layer or by sharing data through the root parent component (Context.Provider).

[0047] Step 1: Define the query input module

[0048] Step 1.1: Construct the text box component A1

[0049] In this embodiment, the Input component of antd is used to construct the text box component A1, which is used to use the input user name as the parameter of the query input module. Define the input global state data inputValueA1, const[inputValueA1,setInputValueA1]=useState(”), the data structure is character type, used to store the input user name. Define the trigger method function of the onChange method of the Input component,< / select> <input value＝{value}onChange＝{(e:any)＝> {setInputValueA1(e.target.value);}} / >, bring the trigger event e of the Input component as a parameter into the method function, and update the continuously input characters to the input global state data inputValueA1 in real time through the state setting set method.

[0050] Step 1.2: Build the drop-down menu component A2

[0051] Use antd's Select component to build a drop-down menu component A2, which is used to display the department name drop-down menu data. The initialization input global state data of the drop-down menu component A2 is obtained through step 4.2, and the rendering of the component Option menu item is performed in step 4.2. Define the input global state data inputValueA2, const[inputValueA2,setInputValueA2]=useState(”), the data structure is character type, used to store the selected department name. Define the trigger method function handleChangeA2 of the onChange method of the drop-down menu component, <select onchange＝{handlechangea2＝(value:string)＝> {setInputValueA2(value)};}>, bring the value attribute of the drop-down menu component as a parameter into the handleChangeA2 method function, and update the value of the value attribute to the input global state data inputValueA2 through the state setting set method.

[0052] Step 1.3: Construct drop-down menu component A3

[0053] Use antd's Select component to construct a secondary drop-down menu component A3, which is used to display the department name drop-down menu data. The initialization input global state data of the secondary drop-down menu component A3 is obtained through step 4.3, and the rendering of the component Option menu item is performed in step 4.3. Define the input global state data inputValueA3, const[inputValueA3, setInputValue A3] = useState(”), the data structure is character type, used to store the selected department name. Define the trigger method function handleChangeA3 of the secondary drop-down menu component o nChange method,< / select>{setInputValueA3(value)};}>, bring the value attribute of the drop-down menu component as a parameter into the handleChangeA3 method function, and update the value of the value attribute to the input global state data inputValueA3 through the state setting set method.

[0054] Step 2: Define the data processing module

[0055] Step 2.1: Define the intermediate global state data InitSelect, access the API data interface (url:' / api / getSelectData') through the useRequest function, and inject the List type data returned by the interface into the intermediate global state data InitSelect;

[0056] Step 2.2: Define the intermediate global state data InitSubSelect, take the intermediate global state data InputValueA2 as a parameter into the useRequest function to access the API data interface (url:' / api / getSubSelectData?departmentName=${Inp utValueA2}'), and inject the List type data returned by the interface into the intermediate global state data InitSubSelect.

[0057] Step 3: Define the query output module

[0058] Step 3.1: Use antd's Tooltip component to build the text display component B1, define the output global state data Output DataB1, and use the output global state data OutputDataB1 as the data source of component B1. <tooltip> OutputDataB1< / tooltip> , used to continuously display the input content of the text box A1 component in the query input module in real time.

[0059] Step 3.2: Use antd's TreeSelect component to build the tree list component B2, define the output global state data OutputDataB2, and use the output global state data OutputDataB2 as the data source of component B2, which is used to display the data of the drop-down menu component A1 and the secondary drop-down menu component A2 in the query input module as an organizational tree list through the tree list component. The output global state data OutputDataB2 has a data format of key value, the key value is the department name in the String data format, and the value value is the list of department names in the List data format. By bringing the input global state variable inputValueA3 in step 1.3 as a parameter into the state setting set method of the tree list component B2, mark the currently selected department name.

[0060] Step 3.3: Use antd's List component to build the query result list component B3, define the output global state data OutputDataB3, and use the output global state data OutputDataB3 as the data source of component B3.<ListdataSource={Ou tputDataB3}renderItem={(item)=><List.Item> {item}< / List.Item>} / >, output global status data OutputDataB3 data format is List type, used to display the personnel list after querying based on user name, department, and section as parameters.

[0061] Step 4: Define the ahooks component status monitoring module

[0062] Step 4.1: Build a component status monitoring module through ahooks, and implement global status data monitoring through useEffect hook function and useUpdateEffec t hook function;

[0063] Step 4.2: The useEffect function listens to the intermediate global state data InitSelect. When data exists in InitSelect, InitSelect is taken as a parameter to the method function selectBuilder() to dynamically render the drop-down menu component A2 in the query input module. Define the Option menu item rendering method function selectBuilder() of the drop-down menu component A2. The data structure of the input parameter InitSelect is of List type. InitSelect is used as the data source to dynamically render the Option options of the drop-down menu component A2.<Sel ect.Option value={value}> {value}< / Select.Option> .

[0064] Step 4.3: The useUpdateEffect function monitors the input global state data InputValueA2. When the input global state data InputValueA2 changes, the input global state data InputValueA2 is brought into step 2.2 as a parameter to re-execute and update the InitSubSelect global state data. The useUpdateEffect function monitors the global state data InitSubSelec t. When the data in InitSubSelect changes, InitSubSelect is brought into the method function subSelectBuilder() as a parameter to dynamically render the secondary drop-down menu component A3 in the query input module. Define the Option menu item rendering method function subSelectBuilder() of the secondary drop-down menu component A3. The data structure of the input parameter InitSubSelect is of List type. InitSubSelect is used as the data source to dynamically render the Option options of the drop-down menu component A3.<Select.Option value={valu e}> {value}< / Select.Option> .

[0065] Step 4.4: The useEffect function monitors the input global state data InputValueA1. When the input global state data InputValueA1 changes, the input global state data InputValueA1 is brought into the state setting set method as a parameter, and the changed data is continuously updated in real time to the output global state data OutputDataB1.

[0066] Step 4.5: The useUpdateEffect function monitors the input global state data InputValueA2 and InputValueA3. When any data changes, the data is injected into the global state data OutputDataB2 in the form of InputValueA2 as the key and InputValueA3 as the value. The useUpdateEffect function monitors the output global state data OutputDataB2. When the data in the output global state data OutputDataB2 changes, the output global state data OutputDataB2 is taken as a parameter into the method function treeSelectBuilder() to dynamically render the tree list component B2 in the query input module. Define the rendering method function treeSelectBuilder() of the tree list component B2, input the data structure of the output global state data OutputDataB2 as key value type, where key is String type and value is List type, set the title value in the treeData[] property of the tree list component B2 as key, and the value of child[] as value, and mark the name of the currently selected department by taking the input global state data inputValueA3 as a parameter into the setValue(inputValueA3) method of the B2 component.

[0067] Step 4.6: The useUpdateEffect function monitors the input global state data InputValueA1, InputValueA2, and InputValueA3. When any data changes, InputValueA1, InputValueA2, and InputValueA3 are taken as parameters to the useRequest function to access the API data interface (url:' / api / getUserListData?userName=${InputValueA1}&departmentName=${InputValueA2}&subDepartmentName=${InputValueA3}'), and the List type data returned by the interface is injected into the output global state data OutputDataB3. When the list component B3 defined in step 3.3 finds that the output global state data OutputDataB3 has changed, the list component B3 will automatically update the list content of the component.

[0068] The above are only preferred embodiments of the present invention, and the protection scope of the present invention is not limited to the above embodiments. All technical solutions under the concept of the present invention belong to the protection scope of the present invention. It should be pointed out that for ordinary technicians in this technical field, some improvements and modifications without departing from the principle of the present invention should be regarded as the protection scope of the present invention.

Claims

1. A system for dynamically triggering rendering between multiple components based on React and ahooks, characterized in that: include: Query input module, data processing module, ahooks component monitoring module and query output module; The data processing module is provided with intermediate global state data, and is connected to the query input module and the query output module respectively through an API interface; The query input module is provided with input global status data; The ahooks component monitoring module is used to monitor the changes of the input global state data in the query input module. If there is a change, the input global state data is updated according to the input query parameters of the query input module, and is passed to the data processing module through the API interface to update the intermediate global state data; The query output module is provided with output global status data, and the output global status data is updated by using the updated intermediate global status data through the API interface, and the output global status data in the query output module is monitored by the ahooks component monitoring module, and if it changes, the components in the query output module are dynamically rendered to obtain the query result; The system for dynamically triggering rendering between multiple components based on React and Ahooks implements a method for dynamically triggering rendering between multiple components. The specific process in different scenarios is as follows: The useEffect hook function in the ahooks component monitoring module monitors the intermediate global state data InitSelect. When data exists in InitSelect, the Option menu item of the drop-down menu component A2 in the query input module is dynamically rendered; the useUpdateEffect hook function monitors the input global state data InputValueA2. When the global state data InputValueA2 changes, the global state data InputValueA2 is used as a parameter to input the data processing module through the API interface, the intermediate global state data InitSubSelect is updated, and the Option menu item of the drop-down menu component A3 in the query input module is re-rendered; (2) The input global state data InputValueA1 is monitored through the useEffect hook function in the ahooks component monitoring module. When the input global state data InputValueA1 changes, the output global state data OutputDataB1 is updated through the data processing module. The ahooks component monitoring module monitors the output global state data OutputDataB1 through the useEffect hook function. When the output global state data OutputDataB1 changes, the data in the text display component B1 in the query output module is updated in real time; (3) The useUpdateEffect hook function in the ahooks component monitoring module monitors the input global state data InputValueA2 and InputValueA3. When at least one of them changes, the output global state data OutputDataB2 is updated by using InputValueA2 as the key and InputValueA3 as the value through the data processing module. The ahooks component monitoring module monitors the output global state data OutputDataB2 through the useUpdateEffect hook function. When the output global state data OutputDataB2 changes, the tree list component B2 in the query output module is dynamically rendered; (4) The useUpdateEffect hook function in the ahooks component monitoring module monitors the input global state data InputValueA1, InputValueA2, and InputValueA3. When at least one of them changes, the input global state data InputValueA1, InputValueA2, and InputValueA3 are passed as parameters through the data processing module to update the output global state data OutputDataB3. The ahooks component monitoring module monitors the output global state data OutputDataB3 through the useUpdateEffect function. When the output global state data OutputDataB3 changes, the list component B3 in the query output module is dynamically rendered.

2. According to claim 1, a system for dynamically triggering rendering between multiple components based on React and ahooks is characterized in that: The query input module includes: a text box component A1, the text box component A1 sets input global state data InputValueA1, and sets a trigger method function of the text box component onChange method, inputs the event object of the text box component A1 as a parameter into the trigger method function of the text box component onChange method, and uses the output of the trigger method function of the text box component onChange method to update the input global state data InputValueA1; The trigger method function of the onChange method of the text box component is: <input value="{value}" onChange="{(e:any)" => { setInputValueA1(e.target.value);}} / >, where e is the event object of the text box component A1.

3. According to claim 2, a system for dynamically triggering rendering between multiple components based on React and ahooks is characterized in that: The query input module also includes: a drop-down menu component A2, the drop-down menu component A2 sets the input global state data InputValueA2, and sets the trigger method function handleChangeA2 of the drop-down menu component onChange method, inputs the value attribute of the drop-down menu component as a parameter into the trigger method function handleChangeA2, and uses the output of the trigger method function handleChangeA2 to update the input global state data InputValueA2; The trigger method function handleChangeA2 is: <select onchange="{" handlechangea2="(value1:" string)>{ setInputValueA2 (value1)};}>, wherein value1 is the value attribute of the drop-down menu component.

4. A system for dynamic triggering rendering between multiple components based on React and ahooks according to claim 3, characterized in that the query input module also includes: a secondary drop-down menu component A3, the secondary drop-down menu component A3 sets the input global state data InputValueA3, and sets the trigger method function handleChangeA3 of the secondary drop-down menu component onChange event, the value attribute of the secondary drop-down menu component is input as a parameter into the trigger method function handleChangeA3, and the output of the trigger method function handleChangeA3 is updated to the input global state data InputValueA3; the trigger method function handleChangeA3 is:< / select> { setInputValueA3 (value2)};}>, where value2 is the value attribute of the secondary drop-down menu component.

5. According to claim 4, a system for dynamically triggering rendering between multiple components based on React and ahooks is characterized in that: The intermediate global state data in the data processing module includes InitSelect and InitSubSelect; When there is data in InitSelect, dynamically render the Option menu item of the drop-down menu component A2 in the query input module; When the input global state data InputValueA2 changes, InitSubSelect is updated and the Option menu item of the drop-down secondary menu component A3 in the query input module is re-rendered.

6. According to claim 5, a system for dynamically triggering rendering between multiple components based on React and ahooks is characterized in that: The query output module includes a text display component B1, and the text display component B1 is configured to output global state data OutputDataB1, and the input content of the text box component A1 in the query input module is continuously displayed in real time according to the output global state data OutputDataB1.

7. According to claim 6, a system for dynamically triggering rendering between multiple components based on React and ahooks, characterized in that: The query output module also includes a tree list component B2, which is configured to output global state data OutputDataB2, and displays the data of the drop-down menu component A2 and the secondary drop-down menu component A3 in the query input module on the tree list component B2 according to the output global state data OutputDataB2.

8. According to claim 7, a system for dynamically triggering rendering between multiple components based on React and ahooks is characterized in that: The query output module further includes a query result list component B3, which is configured to output global state data OutputDataB3, and displays a result list after querying all input parameters according to the output global state data OutputDataB3.

9. According to claim 8, a system for dynamically triggering rendering between multiple components based on React and ahooks, characterized in that: The ahooks component monitoring module is provided with a useEffect hook function and a useUpdateEffect hook function. The useEffect hook function is used to monitor the input global state data, intermediate global state data and output global state data during the first execution, and the useUpdateEffect hook function is used to monitor the input global state data, intermediate global state data and output global state data during subsequent execution.

Images