React Hooks

Problems with the Class component

1, large components are difficult to break down and refactor, and difficult to test (i.eclass2. The same business logic is scattered into different methods, and logic is confused. 3Mixins.HOC.render Prop
Copy the code

The React Hooks background

The React component is easier to express as a function1React supports functional programming, view = fn(props)2, functions are more flexible, easier to split, and easier to test3But the function components are too simple and need to be enhancedCopy the code

State Hook

1The default function component has no state2The function component is a pure function that is destroyed upon execution and cannot store state3, State Hook is needed, that is, "Hook" the State function into the pure functionCopy the code

Effect Hook

The default function component has no life cycle. 2. The function component is a pure function, which is destroyed upon execution and cannot realize its own life cycleCopy the code

UseEffect By default, pure functions are executed, input arguments, return results, and have no side effects

Side effects are effects that occur outside the function. For example, when setting a global timed task, the component needs side effects, so useEffect should be “hooked” into the pure function

Note: useEffect to simulate WillUnMount, but not exactly equal, only when [] depends

useEffect(() = > {
    console.log(111)
    // A change in props, that is, an update, also executes the end function
    // To be exact: the returned function will be executed before the next effect execution
    return () = >{}})Copy the code

useRef useContext

const domRef = useRef()

const themeContext = useContext(XXX)
Copy the code

useReducer

import React, { useReducer } from 'react'
const initialState = { count: 0 }
const reducer = (state, action) = > {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 }
        case 'decrement':
            return { count: state.count - 1 }
        default:
            return state
    }
}
function App() {
    const [state, dispatch] = useReducer(reducer, initialState)

    return {
        <div>
            <button onClick={()= > dispatch({ type: 'increment' })}>+</button>
            <button onClick={()= > dispatch({ type: 'decrement' })}>-</button>
        </div>}}export default App
Copy the code

Differences between useReducer and Redux

The userReducer is an alternative to the useState, which is used for complex state changes. The useReducer manages the state of a single component, and component communication also needs props reduc. It is a global state management, and multiple components share dataCopy the code

useMomo

UseMemo caches data

1React updates all child components by default2,classComponents useSCU 和 PurecomponentDo optimization 3.HooksThe use ofuseMemoBut the principle of optimization is the sameCopy the code

useCallback

UseCallback cache function

Customize the Hook

1Encapsulate universal functions2, develop and use third-party Hooks2Custom hooks bring unlimited extensibility and decouple codeCopy the code

1Is essentially a function2Internal normal use useState useEffect to obtain other hooks3, return data is unlimitedCopy the code

Component logic reuse

Class component logic reuse

HOC: Component hierarchy is nested too much, not easy to Render, not easy to debug, HOC will hijack props, must be strictly standardized, easy to neglect Render Prop: high learning cost, not easy to understand, can only pass pure functions, and by default, pure functions have limited functionsCopy the code

Hooks component logic reuse

1In accordance with Hooks original rules, no other requirements, easy to understand and remember2The scope of the variable is clear3Component nesting is not generatedCopy the code

Specifications and precautions

1Naming conventions2Only for React function components and custom hooks, not anywhere else. Only for top-level code, cannot loop3If Hooks appear in a loop, there is no guarantee that they are in the same order. Hooks depend heavily on the order in which they are calledCopy the code

React Hooks

1, useState initialization value, valid only for the first time2UseEffect does not change the value of state. UseEffect depends on the state callback defined for []3UseEffect depends on object reference types, which can cause an infinite loopObjectThe is functionCopy the code