Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the core principle of ReactHook". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the core principle of ReactHook"?

Basic preparatory work

The use of handwritten useState:useState, the principle of implementation.

React.memo introduction

The use of handwritten useCallback:useCallback, the principle of implementation.

Handwritten useMemo: use, principle.

Handwritten useReducer: use, principle.

Handwritten useContext: use, principle.

Handwritten useEffect: use, principle.

Handwritten useLayoutEffect: use, principle.

Basic preparatory work

Create a project with creact-react-app

Has put the project in github: https://github.com/Sunny-lucking/HowToBuildMyReactHook. Can you humbly ask for a star?

Handwritten useState

The use of useState

UseState can add state Hook to the function component.

Calling useState returns a state variable and a method to update the state variable. The parameter to useState is the initial value of the state variable, which is valid only when rendering for the first time.

The method of updating the state variable does not merge the state as this.setState does. Instead, replace the state variable. The following is a simple example that renders the value of count on the page, and clicking the button of setCount updates the value of count.

Function App () {const [count, setCount] = useState (0); return ({count} {setCount (count + 1);}} > increase);} ReactDOM.render (, document.getElementById ('root'))

Principle realization

Let lastState function useState (initState) {lastState = lastState | | initState; function setState (newState) {lastState = newState} return [lastState,setState]} function App () {/ /. } ReactDOM.render (, document.getElementById ('root'))

As shown in the code, we created a useState method ourselves

When we use this method, if we use it for the first time, we take the value of initState, otherwise we take the value of the last time (laststate).

Internally, we created a setState method that updates the value of state

It then returns a lastSate property and a setState method.

It seems perfect, but we actually overlook a problem: every time you play setState, you should re-render the current component.

So we need to perform a refresh operation in setState

Let lastState function useState (initState) {lastState = lastState | | initState; function setState (newState) {lastState = newState render ()} return [lastState,setState]} function App () {const [count, setCount] = useState (0); return ({count} {setCount (count + 1)) }} > add);} / / add method function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

As shown in the code, we added a render method to setState. The render method executes

ReactDOM.render (, document.getElementById ('root'))

That is, re-rendering.

All right, is it complete now?

No, there is another problem: let's say we only use one useState here, what if we use a lot of them? Do you have to declare a lot of global variables?

This is obviously not possible, so we can design a global array to hold these state

Let lastState = [] let stateIndex = 0 function useState (initState) {lastState [stateIndex] = lastState [stateIndex] | | initState; const currentIndex = stateIndex function setState (newState) {lastState [stateIndex] = newState render ()} return [lastState [stateIndex++], setState]}

The currentIndex here uses the idea of closures to record the corresponding index of a state.

Well, this is the end of the useState method. Isn't it so easyproof!

React.memo introduction

Look at the code below! What problem did you find?

Import React, {useState} from 'react'; import ReactDOM from' react-dom'; import'. / index.css'; function Child ({data}) {console.log ("Oh, my God, I don't want to be rendered") return (child)} function App () {const [count, setCount] = useState (0) Return ({setCount (count + 1)}} > increase);} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Yes, even though the props of a child component is fixed, when the data of the parent component changes, the child component is re-rendered, and we want to re-render the child component when the props passed to the child component changes.

So React.memo is introduced.

Take a look at the introduction

React.memo () is very similar to PureComponent in that it helps us control when the component is re-rendered.

The component is re-rendered only when its props changes. Generally speaking, React components in the component tree will go through the rendering process whenever there is a change. But with PureComponent and React.memo (), we can just have some components render.

Import React, {useState,memo} from 'react'; import ReactDOM from' react-dom'; import'. / index.css'; function Child ({data}) {console.log ("Oh, my God, why am I being rendered? I don't want it") return (child)} Child = memo (Child) function App () {const [count, setCount] = useState (0) Return ({setCount (count + 1)}} > increase);} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Therefore, when the Child is wrapped by memo, it will be re-rendered only when the props changes.

Of course, since React.memo is not part of react-hook, we will not discuss how it is implemented here.

Handwritten useCallback

The use of useCallback

When we try to pass a method to a subcomponent, the following code shows

Import React, {useState,memo} from 'react'; import ReactDOM from' react-dom'; function Child ({data}) {console.log ("Oh, my God, I don't want to be rendered") return (child)} / / eslint-disable-next-line Child = memo (Child) function App () {const [count, setCount] = useState (0) Const addClick = () = > {console.log ("addClick")} return ({setCount (count + 1)}} > increase);} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Found that we passed an addClick method is fixed, but each click of the button sub-component will be re-rendered.

This is because your addClick method does not seem to have changed, but in fact the old addClick is different from the new addClick, as shown in the figure

Insert a picture description here

At this point, if you want to pass in the same method, you need to use useCallBack.

As shown in the code

Import React, {useState,memo,useCallback} from 'react'; import ReactDOM from' react-dom'; function Child ({data}) {console.log ("Oh, my God, I don't want to be rendered") return (child)} / / eslint-disable-next-line Child = memo (Child) function App () {const [count, setCount] = useState (0) / / eslint-disable-next-line const addClick = useCallback (() = > {console.log ("addClick")}, []) return ({setCount (count + 1)}} > increase) } function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

The first parameter of the useCallback hook is the method we want to pass to the subcomponent, and the second parameter is an array that is used to listen for changes in the elements in the array before a new method is returned.

Principle realization

We know that useCallback has two parameters, so we can write first

Function useCallback (callback,lastCallbackDependencies) {}

Like useState, we also need to save callback and dependencies with global variables.

Let lastCallback let lastCallbackDependencies function useCallback (callback,dependencies) {}

First of all, useCallback will determine whether we have passed in a dependency, and if not, it means that the latest callback will be returned every time we execute useCallback.

Let lastCallback let lastCallbackDependencies function useCallback (callback,dependencies) {if (lastCallbackDependencies) {} else {/ / No incoming dependency} return lastCallback}

So when we don't pass in a dependency, we can actually execute it as if it were the first time, so we need to reassign lastCallback and lastCallbackDependencies

Let lastCallback let lastCallbackDependencies function useCallback (callback,dependencies) {if (lastCallbackDependencies) {} else {/ / No incoming dependency lastCallback = callback lastCallbackDependencies = dependencies} return lastCallback}

When there are incoming dependencies, you need to see if each item of the new dependency array is equal to the value of each item of the incoming dependency array

Let lastCallback let lastCallbackDependencies function useCallback (callback,dependencies) {if (lastCallbackDependencies) {let changed =! dependencies.every ((item,index) = > {return item = lastCallbackDependencies [index]})} else {/ / No incoming dependency lastCallback = callback lastCallbackDependencies = dependencies} return lastCallback} function Child ({data}) {console.log ("Oh, my God, how am I rendered? I don't want to. ") return (child)}

When the value of the dependency changes, we need to reassign lastCallback and lastCallbackDependencies

Import React, {useState,memo} from 'react'; import ReactDOM from' react-dom' Let lastCallback / / eslint-disable-next-line let lastCallbackDependencies function useCallback (callback,dependencies) {if (lastCallbackDependencies) {let changed =! dependencies.every ((item Index) = > {return item = lastCallbackDependencies [index]}) if (changed) {lastCallback = callback lastCallbackDependencies = dependencies}} else {/ / No incoming dependency lastCallback = callback lastCallbackDependencies = dependencies} return lastCallback} function Child ({data}) {console.log ("Oh, my God" Why am I being rendered? I don't want to. ") return (child)} / / eslint-disable-next-line Child = memo (Child) function App () {const [count, setCount] = useState (0) / / eslint-disable-next-line const addClick = useCallback (() = > {console.log ("addClick")}, []) return ({setCount (count + 1)}} > increase) } function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Handwritten useMemo

Use

UseMemo is similar to useCallback, except that useCallback is used to cache functions, and useMemo is used to cache function return values

Let data = useMemo (() = > ({number}), [number])

As shown in the code, useMemo is used to cache the return value number of the function, and it is re-executed only when the listening element is [number], that is, when the value of number changes.

() = > ({number})

Then return to the new number

Principle

Therefore, the principle of useMemo is similar to that of useCallback.

Import React, {useState,memo,} from 'react'; import ReactDOM from' react-dom' Let lastMemo / / eslint-disable-next-line let lastMemoDependencies function useMemo (callback,dependencies) {if (lastMemoDependencies) {let changed =! dependencies.every ((item Index) = > {return item = lastMemoDependencies [index]}) if (changed) {lastMemo = callback () lastMemoDependencies = dependencies}} else {/ / No incoming dependency lastMemo = callback () lastMemoDependencies = dependencies} return lastMemo} function Child ({data}) {console.log ("Oh, my God" Why am I being rendered? I don't want to. ") return (child)} / / eslint-disable-next-line Child = memo (Child) function App () {const [count, setCount] = useState (0) / / eslint-disable-next-line const [number, setNumber] = useState (20) let data = useMemo (() = > ({number}), [number]) return ({setCount (count + 1)}} > increase) } function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Handwritten useReducer

Use

Let's start with a brief introduction to useReducer.

Const [state, dispatch] = useReducer (reducer, initState)

UseReducer receives two parameters:

The first argument is the reducer function, and the second argument is the initialized state.

The return value is the latest state and dispatch functions (used to trigger the reducer function and calculate the corresponding state).

According to the official statement: for complex state operation logic, nested state objects, useReducer is recommended.

It sounds abstract, but let's look at a simple example:

/ / official useReducer Demo / / first parameter: initialization const initialState of the application = {count: 0}; / / second parameter: state reducer handler function reducer (state, action) {switch (action.type) {case 'increment': return {count: state.count + 1}; case' decrement': return {count: state.count-1} Default: throw new Error ();}} function Counter () {/ / return value: the latest state and dispatch functions const [state, dispatch] = useReducer (reducer, initialState) Return (/ / useReducer returns the final state based on the action of dispatch, and triggers rerender Count: {state.count} / / dispatch to receive an action parameter "action in reducer" to trigger the reducer function Update the latest status dispatch ({type: 'increment'})} > + dispatch ({type:' decrement'})} > -) }

In fact, the meaning can be simply understood as: when state is a basic data type, you can use useState, when state is an object, you can use reducer, of course, this is just a simple idea. You don't have to take it for granted. The specific situation is analyzed according to the specific scene.

Principle

If you look at the principle, you will find that it is so simple that there is no need for me to say anything, less than ten lines of code. If you do not believe it, you will look at the code directly.

Import React from 'react'; import ReactDOM from' react-dom'; let lastState / / useReducer principle function useReducer (reducer,initialState) {lastState = lastState | | initialState function dispatch (action) {lastState = reducer (lastState,action) render ()} return [lastState,dispatch]} / / official useReducer Demo / / first parameter: initialization const initialState of the application = {count: 0} / / second parameter: state's reducer handler function reducer (state, action) {switch (action.type) {case 'increment': return {count: state.count + 1}; case' decrement': return {count: state.count-1}; default: throw new Error () }} function Counter () {/ / return value: the latest state and dispatch functions const [state, dispatch] = useReducer (reducer, initialState) Return ({/ * / / useReducer returns the final state based on the action of dispatch, and triggers rerender * /} Count: {state.count} {/ * / / dispatch is used to receive an action parameter "action in reducer" to trigger the reducer function Update the latest status * /} dispatch ({type: 'increment'})} > + dispatch ({type:' decrement'})} > -) } function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Handwritten useContext

Use

CreateContext can create a context of a React, and then subscribe to components in that context to get the data or other information provided in the context.

Basic usage:

Const MyContext = React.createContext ()

If you want to use the created context, you need to wrap the component through the outermost layer of the Context.Provider, and you need to pass in the value as shown, specifying the information that the context will expose to the outside world.

During the matching process, subcomponents only match the latest Provider, that is, if there are three components: ContextA.Provider- > A-> ContexB.Provider- > B-> C.

If ContextA and ContextB provide the same method, the C component will only choose the method provided by ContextB.

Through the context created by React.createContext, the content provided by Provider can be obtained through the Hook of useContext in the subcomponents.

Const {funcName} = useContext (MyContext)

As you can see from the above code, useContext needs to pass in the Context instance of MyContext, which is either a string or the instance itself.

There is an awkward place in this usage, where the parent and child components are not in the same directory, so how do you share the Context instance of MyContext?

In this case, I would uniformly manage the instance of the context through Context Manager, then export the instance through export, and import the instance in the subcomponent.

Let's take a look at the code, which is very easy to use.

Import React, {useState, useContext} from 'react'; import ReactDOM from' react-dom'; let AppContext = React.createContext () function Counter () {let {state, setState} = useContext (AppContext) return (Count: {state.count} setState ({number: state.number + 1})} > +) } function App () {let [state, setState] = useState ({number: 0}) return ({state.number})} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

If you have used vue, you will find that this mechanism is somewhat similar to provide and inject provided in vue.

Principle

The principle is very simple, because createContext,Provider is not the content of ReactHook, so here the value needs to implement useContext, as shown in the code, only one line of code is needed.

Import React, {useState} from 'react'; import ReactDOM from' react-dom'; let AppContext = React.createContext () function useContext (context) {return context._currentValue} function Counter () {let {state, setState} = useContext (AppContext) return (setState ({number: state.number + 1})} > +) } function App () {let [state, setState] = useState ({number: 0}) return ({state.number})} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Handwritten useEffect

Use

It has the same purpose as componentDidMount,componentDidUpdate,componentWillUnmount in the class component, except that it is synthesized into an api.

Import React, {useState, useEffect} from 'react'; import ReactDOM from' react-dom'; function App () {let [number, setNumber] = useState (0) useEffect () = > {console.log (number) }, [number]) return ({number} setNumber (number+1)} > +)} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

As shown in the code, two parameters are supported, and the second parameter is also used for listening. Execute the execution function as the first parameter when the elements in the listening array change

Principle

The principle is found to be similar to useMemo,useCallback, except that the first two have return values, but useEffect does not. (of course, there is also a return value, which is the return value written when performing the componentWillUnmount function, but the return value here is different from the first two, because you can't write

Let xxx = useEffect (() = > {console.log (number);}, [number])

To receive the return value.

So, ignoring the return value, you can look directly at the code, which is really similar, and it can be described as exactly the same.

Import React, {useState} from 'react'; import ReactDOM from' react-dom' Let lastEffectDependencies function useEffect (callback,dependencies) {if (lastEffectDependencies) {let changed =! dependencies.every ((item,index) = > {return item = lastEffectDependencies [index]}) if (changed) {callback () lastEffectDependencies = dependencies}} else {callback () lastEffectDependencies = dependencies} function App () {let [number SetNumber] = useState (0) useEffect () = > {console.log (number) }, [number]) return ({number} setNumber (number+1)} > +)} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

You think this is over, but not yet, because the first parameter is executed at the wrong time, in fact, the function as the first parameter is executed after the browser rendering is finished. And here we do it synchronously.

So it needs to be changed to execute callback asynchronously

Import React, {useState} from 'react'; import ReactDOM from' react-dom' Let lastEffectDependencies function useEffect (callback,dependencies) {if (lastEffectDependencies) {let changed =! dependencies.every ((item,index) = > {return item = lastEffectDependencies [index]}) if (changed) {setTimeout (callback () lastEffectDependencies = dependencies}} else {setTimeout (callback () lastEffectDependencies = dependencies} function App () {let [number) SetNumber] = useState (0) useEffect () = > {console.log (number) }, [number]) return ({number} setNumber (number+1)} > +)} function render () {ReactDOM.render (, document.getElementById ('root'));} render ()

Handwritten useLayoutEffect

Use

According to the official explanation, the two hook are basically the same, and the timing of calling is different. Please use useEffect for all, unless you encounter bug or an unsolvable problem, then consider using useLayoutEffect.

Principle

The principle is the same as useEffect, except that the timing of the call is different.

As mentioned above, the timing of the useEffect call is executed after the browser rendering, while the useLayoutEffect is executed after the DOM construction is completed and before the browser rendering.

So here we need to change the macro task setTimeout to micro task.

Import React, {useState} from 'react'; import ReactDOM from' react-dom' Let lastEffectDependencies function useLayouyEffect (callback,dependencies) {if (lastEffectDependencies) {let changed =! dependencies.every ((item Index) = > {return item = lastEffectDependencies [index]}) if (changed) {Promise.resolve () .then (callback ()) lastEffectDependencies = dependencies}} else {Promise.resolve () .then (callback ()) lastEffectDependencies = dependencies} function App () {let [number SetNumber] = useState (0) useLayouyEffect () = > {console.log (number) }, [number]) return ({number} setNumber (number+1)} > +)} function render () {ReactDOM.render (, document.getElementById ('root'));} render () so far, I believe you have a deeper understanding of "what is the core principle of ReactHook". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.