instructions

The information involved in the article comes from the Internet, meaning is the summary of personal learning and experience, if there is any infringement, please contact me to delete, thank you!

Class components

What is a Class Component?

The React component is derived from react.componentbased on ES6 Class. Here is a typical class component:

Class DemoClass extends React.Component {// Initializes the state of a class component state = {text: ""}; ComponentDidMount () {componentDidMount()} changeText = (newText) => {// update state this.setState({text: newText}); }; Render render() {return (<div> <p>{this.state.text}</p> <button OnClick = {() = > enclosing changeText (" newText ")} let me modify > < / button > < / div >). }}Copy the code

The characteristics of

  • To avoid code redundancy and improve code utilization, components can be called repeatedly
  • The component properties are read-only. The caller can pass parameters to the props object to define properties. The caller can call properties directly as properties or methods within the component. When a component is called, the component caller specifies the props to define the properties. The component caller can assign the props to the called.
  • Parent-child component interaction is performed by means of props. By passing a new props property value, the sub-component is rendered again, thus achieving parent-child component communication.
  • {… This.props} can pass a set of properties,… Is the attribute extension character
  • The component must return a React element
  • State is a private property in construct() and is mutable. Use methods such as: Do not modify state directly.
  • Another way to modify child components is through the ref attribute, which is represented as a reference to the actual instance of the component, which is actually the component instance returned by reactdom.render ()

Function component

What is a Function Component/Stateless Component

The React component is, as the name suggests, a function. In the early days, react-hooks were not implemented. Function components could not define and maintain state internally, hence the name “stateless component”. Here is a typical function component:

function DemoFunction(props) { const { text } = props return ( <div className="demoFunction"> <p>{`function [${text}] '}</p> </div>); }Copy the code

The characteristics of

  • It’s just about receiving props and rendering the DOM
  • There is no state
  • A React element is returned
  • Cannot access the lifecycle method
  • No need to declare classes: You can avoid code like extends or constructor and be more syntactically concise.
  • Will not be instantiated: therefore, refs cannot be passed directly (use the react. forwardRef wrapper to pass refs).
  • No need to explicitly declare this: In ES6 class declarations, the function’s this keyword is bound to the current scope, and because of the nature of functional declarations, we don’t need to enforce the binding anymore.
  • Better performance: Because life cycle management and state management are not required in functional components, React does not require specific checks or memory allocation, ensuring better performance.

In common

  • Received value: both received a read-only props
  • Return value: Both return a React element

The difference between

Design thought level

  • The roots of a class component are OOP (object-oriented programming), so it has inheritance, properties, and internal state management.
  • The foundation of functional components is FP (Functional programming). It is a form of “structured programming”, similar to the idea of mathematical functions. That is, if the input and output are assumed to have a certain mapping relationship, the output must be certain if the input is certain.

Rendering differences

The function component captures the state inside render

React: How Are Function Components Different from Classes

Ability to

  • Class components wrap business logic through a lifecycle

  • Function components can emulate the life cycle in class components using React Hooks functions (useState, useEffect, useContext, useCallback, etc.)

Essence of Hooks: A set of “Hooks” that make functional components more powerful and flexible

Usage scenarios

  • In the case of not using Recompose or Hooks, if you need to use a lifecycle, use a class component, the scenarios are very fixed;

  • But with recompose or Hooks, the boundaries are blurred, and the capabilities of class components and function components are exactly the same, with capabilities like life cycles available.

Design patterns

In the design pattern, class components can be inherited because of the class itself, while function components lack the ability to inherit.

Of course, it is not recommended to inherit existing components in React, because inheritance is less flexible and has too much detail masking, so there is an iron law that composition is better than inheritance.

The development trend

Function components more closely match the React framework design philosophy

The React component itself is positioned as a function, a function that eats data and spit out the UI. As developers, we write declarative code, and the React framework’s main job is to convert declarative code into imperative DOM operations in a timely manner, mapping data-level descriptions to user visible UI changes. This means that, in principle, React data should always be tightly bound to render, whereas class components can’t.

Function components are the future of the community thanks to React Hooks.

The React team started with the actual business of Facebook, explored time slicing and concurrency patterns, and considered further optimization of performance and a more reasonable code splitting structure between components. It concluded that the component-like model was not a good fit for future trends. They give three reasons:

  • The ambiguity of this;
  • Business logic is scattered throughout the lifecycle;
  • React component code lacks a standard way to split it.

Function components that use Hooks provide more fine-grained logic organization and reuse than before, and are better suited to time-slice and concurrent patterns.