Component can be a class Component or a function Component.

1. Class components

Typically, we use the ES6 class keyword to create the React component.

A. Class components are divided into common class components (react.component.react.purecomponent) and pure class components (react.purecomponent).

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

B. React.component.component.react.purecomponent

ShouldComponentUpdate the React lifecycle function shouldComponentUpdate. This function returns a Boolean, if true, to update the props or state when it changes. If false is returned and the props or state is not updated when it changes, true is returned by default. Render the render function is not executed, and neither the component nor its children will be rerendered.

The difference between:

  • ShouldComponentUpdate cannot be overridden when inheriting PureComponent
  • PureComponent shouldComponentUpdate is optimized to implement shouldComponentUpdate with a shallow comparison between prop and state. It only compares whether the address is the same, but not whether the data stored at the specific address is exactly the same.

class ListOfWords extends React.PureComponent {
 render() {
     return<div>PureComponent render result :{this.props.words.join(', ')}</div>;
 }
}
class WordAdder extends React.Component {
 constructor(props) {
     super(props);
     this.state = {
         words: ['marklar']}; this.handleClick = this.handleClick.bind(this); }handleClick() {
     // This section is bad style and causes a bug
     const words = this.state.words;
     words.push('marklar');
     this.setState({words: words});
 }
 renderThe () {// slice() method returns a new array objectreturn<div> <button onClick={this.handleclick}>click</button> <div>Component Render result :{this.state.words.join(<div> <button onClick={this.handleclick}>', ')}</div>
         <ListOfWords words={this.state.words} />
             <ListOfWords words={this.state.words.slice(0)} />
         </div>
     );
 }
}
ReactDOM.render(
  <WordAdder />,
  document.getElementById('root'));Copy the code

Try it on CodePen.

2. Functional components:

A function is a component,returnA DOM deconstruction has the following features: 1. There is no lifecycle and it is updated and mounted, but there is no lifecycle function 2. 3. No internal state Advantages: Lightweight, if your component has no internal state involved and is only used to render data, then use functional components, performance is better.Copy the code
// functional component
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}Copy the code
// Compose componentsfunction Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root'));Copy the code

3. Functional components compared to Class declaration-based components

  • You can avoid a lot of code like extends or constructor without having to declare classes

  • There is 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, there is no need to enforce the binding.

  • 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.

const Text = (props) =>
  <p>{props.children}</p>;

class App extends React.Component {
  render() {
    return <Text>Hello World</Text>;
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root'));Copy the code

Try it on CodePen.