case case 1: useReactive useReactive : a useState with responsive reason: we know that variables can be defined in the format with useState const [count, setCount] = useState<number>(0) set it through setCount , and get it by count . Only in this way can the view be rendered Let's take a look at the normal operation, like this let count = 0; count = 7 the value of count is 7, that is to say, the data is responsive so can we also write useState as responsive ? I am free to set the value of count, and I can get the latest value of count at any time, instead of setting it through setCount . Let's think about how to implement a useState with responsive characteristics, that is, useRective If you are interested in the following questions, you can think for yourself first: how to set the import and export parameters of this hook? how to make the data responsive (after all, normal operations can't refresh the view)? how do I use TS to write and refine its type? how to optimize it better? analyze the key of the above four small questions is the second . How do we make the data responsive ? if we want to make it responsive, we must monitor the change of the value and make changes, that is to say, when we operate on this number, we need to intercept intercept . Then we need a knowledge point of ES6 : Proxy the points of Proxy and Reflect will be used here…

encapsulate useCreation with useMemo and useRef useCreation : is a substitute for useMemo or useRef . In other words, the useCreation hook enhances useMemo and useRef so that the hook can replace the two hooks. (from ahooks-useCreation) useMemo is not necessarily the latest value, but useCreation ensures that the value you get must be the latest value for the creation of complex constants, useRef is prone to potential performance risks, but useCreation can avoid the performance hazard here refers to: // Every time you re render, the process of instantiating the Subject is executed, even if the instance is immediately thrown away const a = useRef(new Subject()) //Performance hazards can be avoided through the factory function const b = useCreation(() => new Subject(), []) undefined next let's look at how to encapsulate a useCreation . First, we need to understand the following three points: the first point: determine the parameters first. The parameters of useCreation are the same as those of useMemo . The first parameter is a function, and the second parameter is a variable array . second point: our values should be saved in useRef , so that the values can be cached, thus reducing extraneous refreshes the third point: the judgment of updating value, how to determine whether to update the value in useRef by the second parameter. if we understand three things, we can implement a useCreation ourselves. import { useRef } from 'react'; import type { DependencyList } from 'react'; const depsAreSame = (oldDeps: DependencyList, deps: DependencyList):boolean => { if(oldDeps === deps) return true for(let…

play React Hooks in the above, we talked about using useMemo to handle extraneous rendering. Next, let's take a look at the magic use of these hooks of React Hooks (it is recommended to be familiar with and use the corresponding React Hooks before you can make a good hook) useMemo when a child component is called in a parent component, the state of the parent component changes, causing the parent component to update, while the child component is updated even though it has not changed. to put it simply, when the content of a page is very complex and there are many modules, functional components will be updated from beginning to end . As long as there is a change, all modules will be refreshed, which is obviously not necessary. our ideal state is that each module only updates itself and does not influence each other, so using useMemo is the best solution at this time. pay particular attention here. as long as the status of the parent component is updated, the child component will update regardless of whether the self-component is operated or not . useMemo is to prevent this before we talk about useMemo , let's talk about memo , memo . The function of combines the pure components of pureComponent and the function of componentShouldUpdate . It compares the passed props, and then further determines which props needs to be updated according to the return value of the second function. (specific use will be discussed below) The concept of useMemo is similar to that of memo…

React Hooks has been released for more than three years, and it has brought life cycle to functional components. Now, Hooks is gradually replacing class components. I believe that React development partners have a deep understanding, but do you really fully master hooks? Do you know how to make a good custom hooks? We know that React Hooks has useState setting variables, useEffect side effects, useRef to get all the attributes of the element, useMemo , useCallback to optimize performance, and of course a custom Hooks to create the Hooks you want. next let's take a look at the following questions and ask ourselves if we know all of them: What is the origin of Hooks? What is the advanced usage of useRef ? useMemo and useCallback how are they optimized? how to design a good custom Hooks? how to make a custom Hooks that doesn't need useState to modify properties and refresh views directly? how do I make a custom Hooks that can listen for any event? if you have questions and curiosity about the above questions, then this article should be able to help you. this article will answer the above questions by introducing custom Hooks , and demonstrate in the form of case columns with hooks in TS , ahooks . Note: the custom hook described here may be slightly different from that on ahooks , and will not be considered too much. If it is used in a project, it is recommended to directly use the hook on ahooks . what is a custom Hooks? react-hooks…

on March 17, one year after the launch of the Beta version of the new React document, React finally officially released the new React official document! The new document enables a new domain name: react.dev/ . However, at present, the new document has only been released in English at present When accessing Beta documents ( beta.reactjs.org/ ) and English documents ( reactjs.org/ ) Will be redirected to the new domain name ( react.dev/ ). The new document does not currently provide access to documents in other languages. to access the old Chinese version of the document, you can visit zh-hans.reactjs.org/ . to access the old English version, you can visit legacy.reactjs.org/ . the new document mainly contains the following sections: tutorials and guides : a large number of tutorials and guides are available to help developers learn React from scratch or delve into specific topics. Code samples and demos : provides a series of code examples and demos that demonstrate the power and flexibility of React. Best practices and techniques : learn the latest React best practices and techniques and learn how to optimize your code for better performance. Community Forum : contact other React developers to get help on the project or share expertise in the community. News and updates : get the latest versions, updates, and news from the React development team for the first time. Let's take a look at the features of the new React document! full hug Hooks when Hooks was released in 2018, the Hooks document assumed that the reader was already familiar with…