Function management method and device

Abstract

The present invention discloses a function management method and device, and relates to the field of computer technology. A specific implementation of the method includes: receiving a custom callback function input by a user, and passing the custom callback function into a synchronous call hook in a function component; in the synchronous call hook, creating a state parameter for the custom callback function to mark the execution time of the custom callback function; creating a new custom function and returning it to the user, so that the user can change the value of the state parameter by executing the new custom function to control the execution time of the custom callback function. In this implementation, the user only needs to pass the custom callback function into useSyncCallback, and does not need to care about the specific implementation logic. It is easy to use, improves development efficiency, and solves the problem of complex scenarios caused by value capture in function components.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a function management method and device. Background Art

[0002] React is still the mainstream framework for front-end development. Starting from a certain version of react16, in order to solve the development of using states in function components, react provides react hooks to carry component states in function components, but there are still some differences from class components: hooks in function components have value capture problems, and cannot obtain the latest state immediately after the state changes. It is not possible to obtain the latest state in the second parameter like passing the second parameter in setState of class components. Summary of the invention

[0003] In view of this, an embodiment of the present invention provides a function management method and device, which can at least solve the problem of value capture in the function component of the prior art, and it is impossible to obtain the latest status immediately after the status changes.

[0004] To achieve the above object, according to one aspect of an embodiment of the present invention, a function management method is provided, comprising:

[0005] Receive a custom callback function input by a user, and pass the custom callback function into a synchronous call hook in a function component;

[0006] In the synchronous call hook, a state parameter is created for the custom callback function to mark the execution timing of the custom callback function;

[0007] A new custom function is created and returned to the user, so that the user can change the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function.

[0008] Optionally, the initial value of the state parameter is false;

[0009] The user changes the value of the state parameter by executing the custom new function to control the execution timing of the custom callback function, including: the user switches the value of the state parameter to true by executing the custom new function to trigger the execution of the custom callback function.

[0010] Optionally, before returning the customized new function to the user, it further includes: defining a first side effect hooks;

[0011] The triggering and executing of the custom callback function includes: judging whether the value of the state parameter is true through the first side effect hooks, and if so, executing the custom callback function, otherwise skipping and not executing.

[0012] Optionally, it also includes: defining a second side effect hooks, which is used to determine whether the value of the state parameter is true after the custom callback function is executed, and if so, reset the value of the state parameter to false.

[0013] Optionally, the custom callback function is used to define business logic.

[0014] To achieve the above object, according to another aspect of an embodiment of the present invention, a function management device is provided, comprising:

[0015] A receiving module, used for receiving a custom callback function input by a user, and passing the custom callback function into a synchronous call hook in a function component;

[0016] A creation module, used for creating a state parameter for the custom callback function in the synchronous call hook, so as to mark the execution time of the custom callback function;

[0017] The control module is used to create a new custom function and return it to the user, so that the user can change the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function.

[0018] Optionally, the initial value of the state parameter is false;

[0019] The control module is used for: the user switches the value of the state parameter to true by executing the custom new function, so as to trigger the execution of the custom callback function.

[0020] Optionally, it also includes: defining the first side effect hooks;

[0021] The control module is used to: determine whether the value of the state parameter is true through the first side effect hooks, and if so, execute the custom callback function, otherwise skip and do not execute it.

[0022] Optionally, a reset module is also included, for:

[0023] A second side effect hook is defined to determine whether the value of the state parameter is true after the custom callback function is executed. If so, the value of the state parameter is reset to false.

[0024] Optionally, the custom callback function is used to define business logic.

[0025] To achieve the above objective, according to another aspect of an embodiment of the present invention, a function management electronic device is provided.

[0026] The electronic device of the embodiment of the present invention includes: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement any of the function management methods described above.

[0027] To achieve the above objective, according to another aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored, and when the program is executed by a processor, any of the above-mentioned function management methods is implemented.

[0028] According to the solution provided by the present invention, an embodiment of the above invention has the following advantages or beneficial effects: an implementation method based on custom hooks, which is easy to use and user-friendly. From the user's perspective, there is no need to worry about any implementation logic. Only a black box is provided to the user, which is ready to use out of the box, thereby improving development efficiency; it solves the value capture problem of hooks in function components, allowing the latest value to be obtained immediately when the state changes in the function component.

[0029] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0031] Figure 1 is a main flow chart of a function management method according to an embodiment of the present invention;

[0032] Figure 2 is a schematic diagram of main modules of a function management device according to an embodiment of the present invention;

[0033] Figure 3 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0034] Figure 4 It is a schematic diagram of the structure of a computer system of a mobile device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0035] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0036] Hook is a platform of Windows message processing mechanism. Application can set subroutine on it to monitor certain messages of specified window. The monitored window can be created by other processes. When the message arrives, it is processed before the target window processing function. The hook mechanism allows application to intercept and process Windows messages or specific events.

[0037] Here is a detailed description of the prior art: The existing react provides react hooks to carry the component state in the function component. Although the state can be used in the function component, it is still different from the class component. For example, execute this code in the class component:

[0038]

[0039]

[0040] The print result of the first example is: 12345

[0041] The same logic is performed in a function component:

[0042]

[0043]

[0044] The print result of the second example is: 00000

[0045] It can be seen that the same logic of a piece of code, the output results in the function component and the class component are different, so there is a difference between using hooks in the function component and using states in the class component. For example, when a user enters a text in the search page, the page displays the text entered by the user, and comes with a fuzzy search list for the user to choose.

[0046] If this function is developed in a class component, the process is roughly as follows: the input box obtains the text entered by the user through the onChange event, changes the current page display value to the text entered by the user through setState, and then adds a second parameter to setState, which is a callback. The latest state value can be obtained in this callback. At this time, this value is used for fuzzy query and query of the fuzzy list.

[0047] When using hooks to store state in function components, the same requirement is difficult to achieve because useState hooks does not provide a second parameter callback to save the state. Each time the function executes the context, all variables are reinitialized and then garbage collected after execution. Therefore, in function components, no matter how many times setTimeout is executed, it is executed in the current function context, and num is always 0. After setNumber is executed and the function component is re-executed, num changes, making it difficult to obtain the latest state value in the function component.

[0048] See also Figure 1 , which shows a main flow chart of a function management method provided by an embodiment of the present invention, comprising the following steps:

[0049] S101: receiving a custom callback function input by a user, and passing the custom callback function into a synchronous call hook in a function component;

[0050] S102: In the synchronous call hook, creating a state parameter for the custom callback function to mark the execution timing of the custom callback function;

[0051] S103: Create a new custom function and return it to the user, so that the user can change the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function.

[0052] In the above implementation, for steps S101 to S103, the core idea of ​​React is componentization. The application is built by components, and the most important concept in the component is State. State is the UI data model of a component and the data basis for component rendering.

[0053] The user defines the business logic using a custom callback function callback, and passes the custom callback function callback to the synchronous call hook useSyncCallback of the function component. Then, useState is used in useSyncCallback to create a state parameter for it, which is similar to a standard position, used to mark the execution time of the callback function and indicate whether the callback needs to be executed. The initial value is false, proxyState = {current: false}.

[0054] Then create a new custom function Func in useSyncCallback and return the Func function to the user to control the execution time of the custom callback function callback. When the user calls the Func function returned by useSyncCallback, the current value of the state parameter proxyState is automatically set to true. When the state parameter of the custom callback function callback is true, the business logic in the custom callback function callback is triggered to execute, so as to implement hooks that get the latest state immediately after the state is changed in the function component.

[0055] Furthermore, define a useEffect side effect hooks (i.e., the second side effect hooks), through which it is determined whether the current property of proxyState is true after the custom callback function callback is executed. If it is true, the value of the state parameter needs to be reset to false. The purpose of this step is to reset the state parameter value so that the callback function can be called multiple times.

[0056] In addition, you can define another useEffect side effect hook (i.e. the first side effect hook), which does not add any dependencies. Each time the function component is executed, this useEffect will be executed to determine whether the value of the state parameter is true before the callback is executed. If it is true, the callback function is allowed to be executed, but if it is false, it is skipped and not executed, so as to achieve the whole process of simulating the function call, and the callback function will not be executed because the function is not called.

[0057] Because useEffect is executed after the component renders, as long as the dependencies change, it is impossible to control the function execution. In useSyncCallback, a new function Func is created and returned, and the function call is simulated through this Func.

[0058] It should be noted that the above operations are usually provided to users in a black box form in practice. The useEffect side effect hooks will be executed immediately after the function component is executed. Users can also pass dependencies to useEffect to make the useEffect side effect hooks decide whether to execute after the function component is executed. The previous description is: If you want to get the latest state in a function component, you need to execute this function component after it is executed. Based on these two points, you can implement hooks that get the latest value immediately after changing the state. The immediate acquisition here means to delay the execution of the entire event. The second parameter (callback) of setState in react refers to this method, so to achieve this effect, you need to use useEffect to simulate the scene.

[0059] In the method provided in the above embodiment, the user only needs to pass the custom business logic into useSyncCallback without worrying about the specific implementation logic. It is easy to use, improves development efficiency, and solves the problem of inapplicability to complex scenarios caused by value capture in function components.

[0060] The method provided in the embodiment of the present invention uses custom hooks to obtain the latest state value after changing the function state. Compared with the prior art, it has at least the following beneficial effects:

[0061] 1) React hooks are used to enhance the functionality of function components, so it is better to optimize function components by customizing hooks;

[0062] 2) It is more convenient and user-friendly in usage. It will not change the user's daily coding habits and business logic. When using it, the user only needs to pass a custom callback function to useSyncCallback, and this custom callback function will return a new function Func to the user. From the user's perspective, it is no different from declaring a function. When the function needs to be called, only a function call syntax needs to be executed at the location the user is concerned about, which greatly improves development efficiency;

[0063] 3) The entire hooks solution is a black box for users. If you need to obtain the latest status of a component in a function, you only need to pass the user-defined callback function to useSyncCallback.

[0064] See also Figure 2 , shows a schematic diagram of main modules of a function management device 200 provided in an embodiment of the present invention, including:

[0065] The receiving module 201 is used to receive a custom callback function input by a user, and pass the custom callback function into a synchronous call hook in the function component;

[0066] A creation module 202, used to create a state parameter for the custom callback function in the synchronous call hook to mark the execution time of the custom callback function;

[0067] The control module 203 is used to create a new custom function and return it to the user, so that the user can change the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function.

[0068] In the implementation device of the present invention, the initial value of the state parameter is false;

[0069] The control module 203 is used for: the user switches the value of the state parameter to true by executing the custom new function, so as to trigger the execution of the custom callback function.

[0070] The device for implementing the present invention further includes: defining first side effect hooks;

[0071] The control module 203 is used to: determine whether the value of the state parameter is true through the first side effect hooks, and if so, execute the custom callback function, otherwise skip and do not execute.

[0072] The implementation device of the present invention also includes a reset module, which is used to:

[0073] A second side effect hook is defined to determine whether the value of the state parameter is true after the custom callback function is executed. If so, the value of the state parameter is reset to false.

[0074] In the implementation device of the present invention, the custom callback function is used to define business logic.

[0075] In addition, the specific implementation content of the device described in the embodiment of the present invention has been described in detail in the method described above, so the repeated content will not be described again here.

[0076] Figure 3 An exemplary system architecture 300 to which embodiments of the present invention may be applied is shown, including terminal devices 301 , 302 , 303 , a network 304 and a server 305 (only an example).

[0077] Terminal devices 301, 302, 303 can be various electronic devices with display screens and supporting web browsing, and various communication client applications are installed. Users can use terminal devices 301, 302, 303 to interact with server 305 through network 304 to receive or send messages, etc.

[0078] The network 304 is used to provide a medium for communication links between the terminal devices 301, 302, 303 and the server 305. The network 304 may include various connection types, such as wired, wireless communication links or optical fiber cables.

[0079] Server 305 may be a server that provides various services, and is used to execute operations such as passing a user-defined function into useSyncCallback, creating a state parameter for the function, defining a new function Func to control the value of the state parameter, and defining the first useEffect side effect hooks and the second useEffect side effect hooks.

[0080] It should be noted that the method provided in the embodiment of the present invention is generally executed by the server 305 , and accordingly, the device is generally set in the server 305 .

[0081] It should be understood that Figure 3 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0082] Reference below Figure 4 , which shows a schematic diagram of the structure of a computer system 400 of a terminal device suitable for implementing an embodiment of the present invention. Figure 4 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0083] like Figure 4 As shown, the computer system 400 includes a central processing unit (CPU) 401, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 402 or a program loaded from a storage part 408 into a random access memory (RAM) 403. In the RAM 403, various programs and data required for the operation of the system 400 are also stored. The CPU 401, the ROM 402, and the RAM 403 are connected to each other via a bus 404. An input / output (I / O) interface 405 is also connected to the bus 404.

[0084] The following components are connected to the I / O interface 405: an input section 406 including a keyboard, a mouse, etc.; an output section 407 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 408 including a hard disk, etc.; and a communication section 409 including a network interface card such as a LAN card, a modem, etc. The communication section 409 performs communication processing via a network such as the Internet. A drive 410 is also connected to the I / O interface 405 as needed. A removable medium 411, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 410 as needed, so that a computer program read therefrom is installed into the storage section 408 as needed.

[0085] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 409, and / or installed from the removable medium 411. When the computer program is executed by the central processing unit (CPU) 401, the above-mentioned functions defined in the system of the present invention are executed.

[0086] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0087] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0088] The modules involved in the embodiments of the present invention may be implemented by software or hardware. The modules described may also be set in a processor. For example, they may be described as follows: a processor includes a receiving module, a creating module, and a controlling module. The names of these modules do not, in some cases, constitute limitations on the modules themselves. For example, the controlling module may also be described as a “control executing module”.

[0089] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device includes:

[0090] Receive a custom callback function input by a user, and pass the custom callback function into a synchronous call hook in a function component;

[0091] In the synchronous call hook, a state parameter is created for the custom callback function to mark the execution timing of the custom callback function;

[0092] A new custom function is created and returned to the user, so that the user can change the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function.

[0093] According to the technical solution of the embodiment of the present invention, custom hooks are used to solve the value capture problem in function components, so as to achieve the same function as setState in class components. Its usage is relatively simple. The user customizes the callback function callback, and then returns a new function Func to the user, so that the internal status obtained when Func is called is the latest.

[0094] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A function management method, characterized in that: include: Receive a custom callback function input by a user, and pass the custom callback function into a synchronous call hook in a function component; In the synchronous call hook, a state parameter is created for the custom callback function to mark the execution time of the custom callback function; wherein the initial value of the state parameter is false; A new custom function is created and returned to the user, so that the user changes the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function, including: the user switches the value of the state parameter to true by executing the new custom function to trigger the execution of the custom callback function.

2. The method according to claim 1, characterized in that Before returning the customized new function to the user, the method further includes: defining a first side effect hooks; The triggering and executing of the custom callback function includes: judging whether the value of the state parameter is true through the first side effect hooks, and if so, executing the custom callback function, otherwise skipping and not executing.

3. The method according to claim 2, characterized in that Also includes: A second side effect hook is defined to determine whether the value of the state parameter is true after the custom callback function is executed. If so, the value of the state parameter is reset to false.

4. The method according to any one of claims 1 to 3, characterized in that The custom callback function is used to define business logic.

5. A function management device, characterized in that: include: A receiving module, used for receiving a custom callback function input by a user, and passing the custom callback function into a synchronous call hook in a function component; A creation module, used for creating a state parameter for the custom callback function in the synchronous call hook to mark the execution time of the custom callback function; wherein the initial value of the state parameter is false; A control module is used to create a new custom function and return it to the user, so that the user changes the value of the state parameter by executing the new custom function to control the execution timing of the custom callback function, including: the user switches the value of the state parameter to true by executing the new custom function to trigger the execution of the custom callback function.

6. The device according to claim 5, characterized in that Also includes: Define the first side effect hooks; The control module is used to: determine whether the value of the state parameter is true through the first side effect hooks, and if so, execute the custom callback function, otherwise skip and do not execute it.

7. The device according to claim 6, characterized in that Also includes a reset module for: A second side effect hook is defined to determine whether the value of the state parameter is true after the custom callback function is executed. If so, the value of the state parameter is reset to false.

8. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 4.

9. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images