React Hook

This is the first article I participated in beginners’ introduction.

What is a Hook?

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

Before Hooks, we used react lifecycle and state features that had to be limited to class Components, but hooks gave us a whole new programming experience. Let’s use the lifecycle (not exactly a hook idea, of course) and state in the Function Component.

In most front-end development, we just develop the UI and logic. React does a good job of reusing the UI using the Component concept. But before the hook came out, The ability to reuse logic can only be done in a way that I think is more like a hack (still doing logic reuse in the concept of Component). React logic reuse before Hook

What are the ways logic is reused in React?

Mixins

Skip not to mention, after all, is the product of the old times, many disadvantages. Interested in the information can be self – check ~

HOC

Most libraries do logic reuse, such as the very famous Redux, but of course it has changed to hook. Here is a HOC 🌰 :

function HOC(Component) {
  class HOCComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    componentDidMount() {
      // Logical processing.
    }
    componentDidUpdate() {
      // Logical processing.
    }
    render() {
      return <Component {. this.state} {. this.props} / >}}return HOCComponent;
}
Copy the code

The above is probably the simplest HOC mode, but it also has many disadvantages:

1. Component tree nesting hell: Because each use of HOC adds another layer of logical components to the Component tree, the resulting Component tree rendering in devTool is too nested.
2. Porps conflict: This. State is assigned to the props of the real component, but the props of the real component is also assigned to the same props of the real component. But if they’re both third parties there’s no solution.

render props

A new logic reuse approach solves some of the problems of HOC, but it still has problems. Here is a render props 🌰 :

class RenderProps extends React.Component {
  constructor(props) {
    super(props);
    thi.state = {};
  }
  componentDidMount() {
    // Logical processing.
  }
  componentDidUpdate() {
    // Logical processing.
  }
  render() {
    return this.props.children(this.state)
  }
}
Copy the code

In the way that children can pass in functions, HOC can be directly attached to the state of the real component and passed in the form of function parameters, so that users can modify the props key without causing props conflict. But it still doesn’t solve the nesting tree problem.

Hook Concept (Self-perception)

responsive

Many official hooks come with a second parameter (dependency array), which is the source of the hook’s responsiveness. When the contents of the dependency array change, the hook will be triggered.

Logical independence

Class Component writing a cross-lifecycle logic will make debugging difficult by jumping through multiple lifecycles, and abstracting the logic will require HOC or render props, resulting in too many nested trees. But hook does not exist in this case, can be very good logic independence.