preface

Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class

React Hooks

Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class

1. Causes

  • It is difficult to reuse state logic between components. To reuse state logic and modify state logic, the developers came up with render props and higher-order component best practices, even though it is still somewhat arcane to use.
  • Complex components become difficult to understand and often contain disparate logic in the same lifecycle functions, such as getting data from the network, setting up listeners, removing listeners, and so on.
  • This points to (binds to) multiple processing methods within the class component, making it difficult for learners to understand

2. To summarize

  • You can manage component state without defining a class component
  • React Hooks are fully backward compatible, the original class components will not be removed.
  • – Hooks knowledge is not in conflict with the developers’ previous React knowledge – both work in parallel, so you don’t have to worry about whether the previous knowledge is obsolete.

Ii. Use of State Hook

1. Concept of State Hook

  • A. State B. Hook C. State D. State
  • When a component needs to store and manage state, it launches a “hook” that “hooks” state and state-managing functions into the current component.
  • How do I start a state-importing hook?

Trained by calling useState()

2. Use useState() to implement status management steps

  • Import useState

import React, { useState } from "react"

  • Call useState ()

Parameter: initial value of the state: Array, containing two elements. The first one is state. The second is a function that modifies the state.

  • Deconstruct the array returned by the call to useState()
const [count, setCount] = useState(0);
/ / do not recommend
const state = useState(0);
const count = state[0];
const setCount = state[1];
Copy the code
  • Use useState() to implement the state management step

<button onClick={handleCount}> </button>

  • Use status values that are visible within the current component.
const handleCount = () = > {
setCount(count + 1);
};
return <button onClick={handleCount}>The button was clicked {count} times</button>;
Copy the code

3. UseState () initializes other data types

  • The initialization type is a string
const [msg, changeMsg] = useState("Hello React")
Copy the code
  • The initialization type is array
const [todos, changeTodos] = useState([
  { id: 1.todo: "Learning the React" },
  { id: 2.todo: "Learning Vue"},]);Copy the code
  • Initializing objects is not recommended because objects are multiple key-value pairs and multiple calls to useState are recommended to maintain multiple values.

4. UseState (

What happens when you use a modified state function and pass values around? What happens in UI (JSX expressions) when you call a function that changes state?

5. Class components compared to function components created using useState()

  1. Import the React > > > > > > > > > > > > > > > > > > > > > > > > > > 1. Import {useState}
  2. Defining class components >>>>>>>>>>>>>>>>>>>>>>>>>> 2. Defining function components
  3. >>>>>>>>>>>>>>> 3. Function to get and modify state data (useState())

conclusion

Diamond cuts diamond .