React functional components

React, as we all know, provides two forms of UI components: functional or class

functional

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
Copy the code

The class type

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Copy the code

Transform functional components into class components

class ComponentName extends React.Component{}

addrender()

Move the body of the function inrender()

inrender()The use ofthis.propsreplaceprops

Clear the original functional components

features

features	Class component (class)	Function components
state	Square root	√ (via State Hook)
The life cycle	Square root	√ (via Effect Hook)

HOOK

What is a HOOK?

Hook is a special function that lets you Hook into the React feature. For example, useState is a Hook that allows you to add state to the React function component.

State Hook

The state related

example

import React, { useState } from 'react'; Const [count, setCount] = useState(0); function Example() {const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Copy the code

Equivalent class component

class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); }}Copy the code

API

API	role	writing	instructions
`useState`	The way variables are saved during a function call, as in class`this.state`The functionality is exactly the same	`const [eg, setEg] = useState(0);`	Eg: the state; SetEg: modify the corresponding state. UseState (0) : Set the initial value to 0

Effect Hook

UseEffect Hook can be regarded as a combination of componentDidMount, componentDidUpdate and componentWillUnmount.

Effect that does not need to be cleaned

** Run some extra code after React updates the DOM. ** Sending network requests, manually changing the DOM, and logging are all common operations that don’t need to be cleaned up.

import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); / / similar componentDidMount | componentDidUpdate useEffect (() = > {/ / update the DOM document title = ` You clicked ${count} times `; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Copy the code

Using this Hook, React saves the function you passed (we’ll call it “effect”) and calls it after a DOM update. Placing useEffect inside the component allows direct access to the state variable in Effect.

Effects that need to be cleared

Such as subscribing to external data sources.

class

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}
Copy the code

hook

import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // Specify how to clean up after this effect: return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading... '; } return isOnline ? 'Online' : 'Offline'; }Copy the code

React calls each effect in the component in the order in which it was declared.

Why return a function in effect? This is the optional clearing mechanism for Effect. Each effect can return a cleanup function.

Optimize performance by skipping Effect (useEffect second parameter)

useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Update only when count changesCopy the code

The advantages and disadvantages

In general, class components have a higher performance cost than functional components, including memory used to generate instances and unnecessary updates due to shouldComponentUpdate errors.

If the class component does not specify a shouldComponentUpdate lifecycle function, the component must update when the parent component is updated regardless of whether the component props changes

If the component is an instance of PureComponent, it is efficient to make a shallow comparison of the previous props/state and the later props/state of the component instance to determine whether to update the component

React cannot be detected by shallow contrast (default).
Class components do not compress well
In real development, the life cycle of a class component often contains some unrelated logic

memo

The react. memo is a high-level component. The memo only checks for changes to the props and improves the performance of the component by remembering the result of the component rendering. Similar PureComponent.

The memo component is Props, and the PureComponent is Props, and the PureComponent is Props

By default, only shallow comparisons are performed on complex objects. If you want to control the comparison process, pass in your custom comparison function as a second argument.

Function MyComponent(props) {/* use props */} function areEqual(prevProps, NextProps) {/* Return true if the return from passing nextProps to render is the same as the return from passing prevProps to render, Export default react. memo(MyComponent, areEqual);Copy the code

conclusion

Based on the pros and cons section, not having state and life cycles is no longer a drawback of functional components due to Hooks, so they should be used due to memory usage and update rendering advantages. Therefore, functional components are generally the better choice, and PureComponent should also be used when you must use class components.

The resources

Example Analysis of React component performance optimization
React