Remember that the React component is created using Hooks

Class components

One is **

Purely functional component

And the React team wants components not to become complex containers, but rather conduits for data flow. Developers can assemble pipes as needed. That is, a component is best written as a function, not a class. * *. But we know that in previous development

Class components

and

Purely functional component

Pure function components have a variety of characteristics that class components do not have, simply list a few

  • A purely functional component has no state

  • Pure functional components have no life cycle

  • Pure function components do not have this

  • It can only be a pure function

This is doomed, what we call function components, can only make the UI display function, involves the management and state switching, we had to kind of components or story, but we know what kind of component is also have shortcomings, such as, simple page, your code will appear very heavy, and each create a class components, to inherit a React instance, As for Redux, not to mention the author of Redux a long time ago said, “Problems that can be solved with React don’t need Redux,” and so on. The author of redux, a Component of the React class, has more to say

  • Large components are hard to break down, refactor, and test.
  • The business logic is scattered among the various methods of the component, resulting in repetitive or relational logic.
  • Component classes introduce complex programming patterns, such as render props and higher-order components.

Let’s make a simple counter with a class component

import React from 'react' class AddCount extends React.PureComponent { constructor(props){ super(props) this.state={ count: 0 } } addcount = () => { let newCount = this.state.count this.setState({ count: newCount +=1 }) } render(){ return ( <> <p>{this.state.count}</p> <button onClick={this.addcount}>count++</button> </> )  } } export default AddCountCopy the code

As you can see, the code above is really heavy. To solve this problem,

Class components are full-featured but heavy, while pure functions are lightweight but have the major limitations outlined above

, the React team designed React Hooks **

React Hooks are a function component that can write a fully functional component without using class at all

支那

What is the Hooks?

The word for ‘Hooks’ means ‘Hooks’. **React Hooks are used to write components as pure functions. If external functions and side effects are needed, use Hooks to “hook” external code. ** React Hooks are what we call “Hooks”. So how do you use Hooks? “Whatever functionality you need to write, use the hook.” React provides some common hooks for common functionality, but we can also write our own hooks for special needs. Here are the four most commonly used hooks that React provides for us by default

  • useState()
  • userContext()
  • userReducer()
  • useEffect()

Different hooks introduce different external functions to functions. We find that the above four hooks have the use prefix, React convention, and hook

Use the

Use prefix name. So, your own hooks are called useXXX.

React Hooks

Here are the four default hooks

UserState (): state hook

As we know, pure function components have no state, and useState() is used to introduce state to function components. Now we override the above counter using Hooks.

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } 
  return (
    <>
      <p>{count}</p>
      <button onClick={addcount}>count++</button>
    </>
  )
}
export default AddCount 
Copy the code

With the above code, we have implemented a counter that does exactly the same thing. The code looks much lighter and simpler, with no inheritance, no rendering logic, no lifecycle, etc. That is what hooks are for. In useState(), it takes the initial value of the state as an argument, the initial value counted in the previous example, and returns an array with the first entry as a variable pointing to the current value of the state. Similar to this.state, the second item is a function that updates the state, similar to setState. The name of this function, we agree, is set prefixed by the variable name of the state.

Author: Nosaj links: www.jianshu.com/p/d600f749b… The copyright of the book belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source. r