Hookes is a new feature of React. It lets you use state and other React features without having to write a class.

A, Hooks API

Hooks API is divided into base Hooks, additional Hooks

Based on Hooke

1. useState

Usestate: UseState returns an array. The first value is our state. The second value is a function. To change the state, so why are they called count and setCount? Do you have to call this one? It uses es6’s destruct assignment, so you can call it anything: updateCount, doCount, any thing. Of course, for coding purposes, it is recommended to use one naming convention, especially for the second value

2. useEffect

Effect Hook allows you to perform side effects in function components. What are side effects, in addition to state-related logic, such as network requests, listening for events, and dom lookup

3. useContext

UseContext: Provider and Consumer in context can be used in both class components and function components. ContextType can only be used in class components because it is a static property of the class

Additional Hooke

1. useReducer

An alternative to useState. It receives a Reducer of the form (state, action) => newState and returns the current state and its accompanying dispatch method. (If you’re familiar with Redux, you already know how it works.)

2. useCallback

UseCallback is the syntax of useMemo, and useCallback is the syntax of useMemo, useCallback is the syntax of useMemo, useCallback is the syntax of useMemo, useCallback is the syntax of useMemo, useCallback is the syntax of useMemo, useCallback is the syntax of useMemo, useCallback is the syntax of useMemo, useCallback is the syntax of useMemo. Every time render creates a new function, resulting in unnecessary rendering of sub-components and wasted performance, this is where useCallback comes in. UseCallback can guarantee that no matter how many times render, our function is the same function, reducing the overhead of continuous creation. Again, the second argument to useCallback is the same as useMemo

3. useMemo

What is useMemo? Does it have anything to do with memo? Memo is the PureComponent of a function that does performance optimization, and so is useMemo. UseMemo is similar to Vue’s computed attributes in my mind, The result is calculated according to the value of the dependency. When the value of the dependency does not change, the state change is not triggered

4. useRef

So what does useRef do, which is pretty simple, and there are two ways to use it

  1. Get instances of child components (only class components are available)
  2. A global variable in a function component that does not duplicaterenderRepeat declaration, similar to class componentthis.xxx

Gets the child component instance

5. useImperativeHandle

UseImperativeHandle allows you to customize the instance value that is exposed to the parent component when using a ref. In simple terms, the child component can optionally expose methods to its subcomponents, thus hiding private methods and attributes

6. useLayoutEffect

Its function signature is the same as useEffect, but it calls Effect synchronously after all DOM changes. You can use it to read DOM layouts and trigger rerenders synchronously. The update schedule inside useLayoutEffect is refreshed synchronously before the browser performs the drawing.

7. useDebugValue

UseDebugValue accepts a formatting function as an optional second argument. This function is called only when the Hook is checked. It takes a debug value as an argument and returns a formatted display value.

Manual packaging of useState

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script SRC = "https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js" > < / script > < / head > < body > < div id="root"></div> <script type="text/babel"> console.log(ReactDOM); let initState = [] let initIndex = 0 function cutUserState(state) { let currentIndex = initIndex initState[currentIndex]  = initState[currentIndex] ? initState[currentIndex] : state function changeState(newState) { initState[currentIndex] = newState initIndex=0 render() } initIndex++ return [initState[currentIndex], changeState] } function App() { const [count, setCount] = cutUserState(0) console.log(count); return ( <div> <p>{count}</p> <button onClick={() => { setCount(count + 1) }}>+++</button> </div> ) } function render() { ReactDOM.render( <App />, document.getElementById('root') ) } render() </script> </body> </html>Copy the code

Manual packaging of useEffect

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script SRC = "https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js" > < / script > < / head > < body > < div id="root"></div> <script type="text/babel"> function cutUseEffect(callback,deps){ let oldState=initState[initIndex] let isChange=oldState?[...new Set([...oldState,...deps])].length! ==deps.length:false if(! deps||ischange){ callback() } initState[initIndex]=deps } function App(){ const [count,setCount]=cutUserState(0) cutUseEffect(()=>{ console.log('effect count') },[count]) return ( <div> <p>{count}</p> <button onclick={()=>{setCount(count+1)}}>+++</button> </div> ) } function render() { ReactDOM.render( <App />, document.getElementById('root') ) } render() </script> </body> </html> }Copy the code