What are react hooks?-JS Tutorial-php.cn

React hooks are a new feature of React16.8, which allow React function components to have state and provide life cycle methods such as componentDidMount and componentDidUpdate.

What are react hooks?

Most of our React class components can save state, but function components cannot? And class components have lifecycle but function components don't?

In early versions of React, class components can optimize some unnecessary rendering by inheriting PureComponent. Compared with function components, the React official website does not provide a corresponding method to cache function components to reduce some unnecessary rendering. Directly 16.6 The React.memo function comes out.

The new Hooks in React 16.8 can make React function components have state and provide life cycle methods such as componentDidMount and componentDidUpdate.

Hook The word means "hook".

React Hooks means that components should be written as pure functions as much as possible. If external functions and side effects are needed, hooks should be used to "hook" the external code in. React Hooks are those hooks.

Use whatever hook you need. React provides some common hooks by default, and you can also encapsulate your own hooks.

All hooks introduce external functions to functions, so React agrees that hooks are named with the use prefix for easy identification. If you want to use the xxx function, the hook is named usexxx.

The following introduces the four most commonly used hooks provided by React by default.

useState()
useContext()
useReducer()
useEffect()

useState(): state hook

useState() Introducing state for function components. Pure functions cannot have state, so put the state in the hook.

In the component class earlier in this article, when the user clicks the button, it will cause the text of the button to change. The text depends on whether the user clicks or not. This is the state. Rewrite using useState() as follows.

import React, { useState } from "react";
export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("Click me,   please");
  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }
  return  <button  onClick={handleClick}>{buttonText}</button>;
}

Copy after login

Demo address: https://codesandbox.io/s/nifty-waterfall-4i2dq

In the above code, the Button component is a function and uses useState internally. () hook introduces status.

useState() This function accepts the initial value of the state as a parameter. In the above example, the initial value is the text of the button. This function returns an array. The first member of the array is a variable (buttonText in the above example) that points to the current value of the state. The second member is a function used to update the state. The convention is the set prefix plus the variable name of the state (the above example is setButtonText).

useContext(): shared state hook

If you need to share state between components, you can use useContext().

Now there are two components Navbar and Messages, and we want to share state between them.

<div className="App">
  <Navbar/>
  <Messages/>
</div>

Copy after login

The first step is to use the React Context API to create a Context outside the component.

const AppContext = React.createContext({});

Copy after login

The component encapsulation code is as follows.

<AppContext.Provider value={{
  username: &#39;superawesome&#39;
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

Copy after login

In the above code, AppContext.Provider provides a Context object, which can be shared by sub-components.

The code of the Navbar component is as follows.

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

Copy after login

In the above code, the useContext() hook function is used to introduce the Context object and obtain the username attribute from it.

The code of the Message component is also similar.

const Messages = () => {
  const { username } = useContext(AppContext)
  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

Copy after login

demo：https://codesandbox.io/s/react-usecontext-redux-0bj1v

##useReducer(): action hook

React itself does not provide state management functions, and usually requires the use of external libraries. The most commonly used library for this is Redux.

The core concept of Redux is that components issue actions to communicate with the state manager. After receiving the action, the state manager uses the Reducer function to calculate the new state. The form of the Reducer function is (state, action) => newState.

useReducers() hook is used to introduce the Reducer function.

const [state, dispatch] = useReducer(reducer, initialState);

Copy after login

The above is the basic usage of useReducer(). It accepts the Reducer function and the initial value of the state as parameters and returns an array. The first member of the array is the current value of the state, and the second member is the dispatch function that sends the action.

The following is an example of a counter. The Reducer function used to calculate the state is as follows.

const myReducer = (state, action) => {
  switch(action.type)  {
    case(&#39;countUp&#39;):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

Copy after login

The component code is as follows.

function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: &#39;countUp&#39; })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

Copy after login

demo: https://codesandbox.io/s/react-usereducer-redux-xqlet

Since Hooks can provide shared state and Reducer functions, it It can replace Redux in these aspects. However, it cannot provide middleware and time travel. If you need these two functions, you still have to use Redux.

useEffect(): Side effect hook

useEffect() is used to introduce operations with side effects, the most common of which is requesting data from the server. Code previously placed in componentDidMount can now be placed in useEffect().

The usage of useEffect() is as follows.

useEffect(()  =>  {
  // Async Action
}, [dependencies])

Copy after login

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

下面看一个例子。

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])
  if (loading === true) {
    return <p>Loading ...</p>
  }
  return <div>
    <p>You&#39;re viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

Copy after login

上面代码中，每当组件参数personId发生变化，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。

demo：https://codesandbox.io/s/react-useeffect-redux-9t3bg

创建自己的 Hooks

上例的 Hooks 代码还可以封装起来，变成一个自定义的 Hook，便于共享。

const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

Copy after login

上面代码中，usePerson()就是一个自定义的 Hook。

Person 组件就改用这个新的钩子，引入封装的逻辑。

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);
  if (loading === true) {
    return <p>Loading ...</p>;
  }
  return (
    <div>
      <p>You&#39;re viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

Copy after login