– React officially recommends using Hooks to manage your project, but React also says it won’t do away with Class, there are a lot of Hooks on the Internet. But it’s mostly copy and paste.

Hooks have been out for quite some time, I just checked them out today, and there are plenty of solutions on Google.

Let me start by saying why Hooks are recommended.

In fact, the use of hooks is nothing new. In the official antD documentation (like the component used by hooks), there are many cases where the documentation is not the same as that used by most of us in class, so I had to rewrite them many times. Now the document has been managed by another person and it’s been written back to Class.

The reason is simple, because writing code is a lot less. No this, no lifecycle, no need to bind(this), it’s that simple.

Remember only two common methods in React Hooks. UseEffect useState. It is used to manage its own state.

UseState knows the state of use, but it is not the same as before

const [state,setState] = useState(defaultValue);
Copy the code

You have to define something like Get Set.

UseEffect you can simply view it as componentDidMount, componentDidUpdate, componentWillUnmount and so on.

I don’t want to talk about the above stuff, baidu or Google, there are a lot of examples of that calculator on the Internet.

React-router is used in Hooks

As there is no this Hooks this concept, so before using this. Props. History. Push () and enclosing props. History. GoBack () all of these can’t use this type of JS jump.

Here we need a third-party library, use-react-router

import useReactRouter from 'use-react-router';
const {history,location,match} = useReactRouter();
history.goBack()
history.push(' ')
Copy the code

The other Router uses are exactly the same as Route.

Reducers state management

This is definitely a point that everyone reacts cares about

store.js

import {createStore} from 'redux';
import reducer from './reducers';

export const store  = createStore(reducer);
Copy the code

So what’s in reducers.js?

const initialState = {
    counter: 0
}

export default function reducer(state = initialState,action){
    switch(action.type){
        case "INCREMENT":
            return {counter: state.counter+1}
        case "DECREMENT":
            return {counter: state.counter-1}
        default:
            returnstate; }}Copy the code

If you use react-redux

You can read the Redux Store from the Counter by placing the Component (Counter) inside the Provider. Connect Counter to store.

Redux-react-hooks are recommended for Hooks

import * as React from 'react';
import {StoreContext} from 'redux-react-hook';
import ReactDOM from "react-dom";
import {store} from './store';
import Counter from './Counter';

ReactDOM.render(
  <StoreContext.Provider value={store}>
      <Counter name="Sara" />
  </StoreContext.Provider>, 
  document.getElementById("root"));Copy the code

Basically, this is the same as the React-Redux example, except that the Provider has a component and its props that need to be changed.

The biggest change can be seen in counter.js, because redux-react-hooks provide useMappedState and useDispatch, the code to connect to Counter is much simpler.

import * as React from 'react';
import "./styles.css";
import {useMappedState,useDispatch} from 'redux-react-hook';

export default function Counter(props) {

    const counter = useMappedState(state=> state.counter);
    
    const dispatch = useDispatch();
    return (
        <div>
            <h1>
                Hello, {props.name}
                {counter} times
            </h1>
            <div>
                <button onClick={()=>dispatch({type:"INCREMENT"})}>Increment</button>
                <button onClick={()=>dispatch({type:"DECREMENT"})}>Decrement</button>
            </div>
        </div>
    );
}
Copy the code

A useMappedState, which acts as mapStateToProps, uses useDispatch, and you can useDispatch directly within the widget without any special functions. One of the more obvious benefits is that the props for Counter don’t rely on any of Redux’s functions, so it’s easier to write Unit tests.

Hooks code is much cleaner overall!! Readability is also optimistic