hooks series 8: hooks summary

join us!

16110a84cc97b8 " , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (16110a84cc97c2 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow "Novices of Xiaohe Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Hooks summary

So far, our hooks series is only the last big case. Now we come to a review of the previous content.

We first introduced hooks

What are hooks

hooks is a React 16.8 , it can use state and other React features components

Why introduce hook

• It is difficult to reuse state logic between components
• Complex components become difficult to understand (irrelevant logic in the life cycle
• this pointing to the problem in the class component is not easy to understand

Introduced useState

useState() used to introduce state for function components. Pure functions cannot have state, so use hooks to introduce state.

Create and use

const [count, setCount] = useState(defaultValue) // 假设 defaultValue 为 0

useState returns an array, generally use destructuring assignment to take out two values directly, state and modify the state function. These two values need to be obtained in pairs.

Use multiple useState to define multiple state variables.

Introduced useEffects

Effect Hook allows you to perform side-effect operations in function components, in other words, it can complete some functions similar to the life cycle in Class.

Create and use

useEffect(() => {
   // 执行一些副作用操作
}，[]);

useEffect equivalent to the class of the three life cycles in 06110a84cc9b84. class is different in 06110a84cc9b85. In each life cycle, there will be some irrelevant logic codes. useEffect these codes better.

Introduced useRefs

useRef returns a variable ref object whose .current attribute is initialized to the passed parameter ( initialValue ). The returned ref object remains unchanged during the entire life cycle of the component.

const refContainer = useRef(initialValue)

ref object returned by it remains unchanged throughout the life cycle of the component. Let us also Class component. This brings many possibilities for our development. In addition to these novel features, don’t Forget the function of ref start getting the DOM useRef also applicable to 06110a84cc9c21.

Introduced useCallback

• useCallback brings us a memory function, combining sub-components and useMemo can achieve the effect of optimizing component loading.
• If the subcomponent accepts a method as an attribute, when we use React.memo avoid unnecessary rendering of the useCallback , we need to use 06110a84cc9cd6 to cooperate, otherwise React.memo will be meaningless.

Tells about the rules of hook

• Hook can only be used on the top layer

  • Do not call Hook in a loop, condition or nested function

• Only React calling function Hook

  • Do not call Hook in ordinary JavaScript functions

Introduced custom hooks

Custom Hook is a function whose name starts with " use ". Other Hooks can be called within the function.

In the article, we use two simple cases to describe the creation and use custom hook

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  return value
}

This is our simple creation, and the usage is useState , just take out the value when creating it and you can use it.

function App() {
  const myHookValue = useMyHook('myHook')
  return <div className="app">{myHookValue}</div>
}

Preview of the next section

In the follow-up, we will have a case to try the content learned in the hooks A case of using the message function.