What is hook in react

In react, hook is a new feature of React16.8, which is used to use state and other react features without writing classes; you can use function components to use some features in react, and Function components can also have states, and common state operations between components can be implemented through custom hooks.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is hook in react

React hook is a new feature introduced in react, which allows react function components to also have state;

It can be implemented in components through custom hooks Common state operations between;

Meaning: Hook is a new feature of React 16.8. It allows you to use state and other React features without writing classes. To put it simply, you can use function components to use some features in react

Problems to be solved:

Solving the difficult problem of reusing state logic between components, What hooks can solve is to reuse state logic without modifying the previous component structure. Without using hooks, you need to use some advanced usage such as advanced components, providers, customers, etc. This method is suitable for novices. It is not very friendly, and it may be difficult to understand.

For complex components, you can split their logic. For example, when you use the life cycle function, different life cycles need to be carried out at different times, so At this time, for complex components, there is a lot of logic in some life cycle functions, which greatly reduces readability. When hooks are used, component logic can be divided and the same logic can be integrated together, which greatly increases readability and facilitates maintenance.

No need to understand class components. When you first learn, you have to understand the meaning of this keyword in the current component, but you don't need it in hooks. It can solve the problem of reflecting the characteristics of react without using class components

One thing to note is that hook and class components cannot be used at the same time. You must pay attention to it during actual use, otherwise it will An error occurred.

Usage of react-hook

react provides two hook functions, useState and useEffect, to create stack hooks and effect hooks

state hook

Using useState in a function component can use state for the component;

The input parameter of useState is the initial state, and the output parameter is the current state and the function that updates the state;

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState will create a state when executed for the first time, and this state will be used in subsequent executions;

effect hook

Use useEffect to add side effects to the component Logic;

My personal understanding of the so-called side effects is the interaction with the world outside the scope of react, such as DOM operations, network requests, etc. (To be honest, I haven’t fully understood what the side effects are);

useEffect has two input parameters. The first parameter is a side effect function, and the second parameter is an array used to determine whether to execute the side effect;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

The side effect has an execution process and an optional cleanup process. The side effect function defines the execution process, and its return value function defines the cleanup process;

The side effects defined in the component function are like part of the rendering result. The side effects will be executed after each rendering. Before rendering, Clear the previous side effects before the component is destroyed; this allows our side effects to read each props and state;

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

If you don’t want to execute side effects every time you render, you can pass an array to the second parameter of useEffect. , when the elements in the array do not change, no side effects will be triggered;

Custom hook

A custom hook is actually an ordinary hook that uses useState and useEffect internally. function, and the function name starts with use;

Use custom hooks to extract component logic into reusable functions;

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
  return isOnline;
}

TODO

render props, high-level Notes on component and effect performance optimization

Recommended study: "react video tutorial"

The above is the detailed content of What is hook in react. For more information, please follow other related articles on the PHP Chinese website!