React
React Component Livscykel

Introduktion

Komponentskapning

När en React-komponent skapas kallas ett antal funktioner:

• Om du använder React.createClass (ES5) kallas 5 användardefinierade funktioner
• Om du använder class Component extends React.Component (ES6), kallas 3 användardefinierade funktioner

getDefaultProps() (endast ES5)

Detta är den första metoden som heter.

Propvärden som returneras av den här funktionen kommer att användas som standard om de inte definieras när komponenten instanseras.

I följande exempel kommer this.props.name att standardiseras till Bob om inget annat anges:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (endast ES5)

Detta är den andra metoden som heter.

getInitialState() för getInitialState() definierar initialtillståndet för React-komponenten. React-ramverket kommer att kalla denna funktion och tilldela returvärdet till this.state .

I följande exempel kommer this.state.count att integreras med värdet på this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 och ES6)

Detta är den tredje metoden som heter.

Denna funktion kan användas för att göra slutliga ändringar av komponenten innan den läggs till i DOM.

componentWillMount() {
  ...
}

render() (ES5 och ES6)

Detta är den fjärde metoden som heter.

Funktionen render() bör vara en ren funktion av komponentens tillstånd och rekvisita. Det returnerar ett enda element som representerar komponenten under återgivningsprocessen och bör antingen vara en representation av en naturlig DOM-komponent (t.ex. <p /> ) eller en sammansatt komponent. Om ingenting ska göras kan det returnera null eller undefined .

Denna funktion kommer att återkallas efter varje ändring av komponentens rekvisita eller tillstånd.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 och ES6)

Detta är den femte metoden.

Komponenten har monterats och du kan nu komma åt komponentens DOM-noder, t.ex. via refs .

Den här metoden ska användas för:

• Förbereder timrar
• Hämtar data
• Lägga till evenemangets lyssnare
• Hantera DOM-element

componentDidMount() {
  ...
}

ES6 Syntax

Om komponenten definieras med syntax av klass ES6, kan funktionerna getDefaultProps() och getInitialState() inte användas.

Istället förklarar vi våra defaultProps som en statisk egenskap på klassen och deklarerar tillståndsformen och det initiala tillståndet i konstruktorn för vår klass. Dessa är båda inställda på klassens instans vid konstruktionstiden, innan någon annan React-livscykelfunktion anropas.

Följande exempel visar denna alternativa metod:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Ersätter getDefaultProps()

Standardvärden för komponentrekvisita anges genom att ställa in defaultProps egenskapen för klassen:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Ersätter getInitialState()

Det idiomatiska sättet att ställa in det initiala tillståndet för komponenten är att ställa in this.state i konstruktorn:

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

Komponentuppdatering

componentWillReceiveProps(nextProps)

Detta är den första funktionen som kallas för ändringar av egenskaper .

När komponentens egenskaper ändras , kommer React att kalla den här funktionen med de nya egenskaperna . Du kan komma åt de gamla rekvisita med this.props och till de nya rekvisita med nextProps .

Med dessa variabler kan du utföra en jämförelse mellan gamla och nya rekvisita eller ringfunktion eftersom en egenskap ändras etc.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

Detta är den andra funktionen som kallas för fastighetsförändringar och den första om tillståndsändringar .

Som standard, om en annan komponent / din komponent ändrar en egenskap / ett tillstånd för din komponent, kommer React att göra en ny version av din komponent. I detta fall kommer denna funktion alltid tillbaka.

Du kan åsidosätta den här funktionen och välja mer exakt om din komponent måste uppdatera eller inte .

Denna funktion används mest för optimering .

Om funktionen returnerar falskt stannar uppdateringspipeline omedelbart .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

Denna funktion fungerar som componentWillMount() . Ändringar finns inte i DOM , så du kan göra några ändringar strax innan uppdateringen kommer att utföras.

/! \: du kan inte använda this.setState () .

componentWillUpdate(nextProps, nextState){}

render()

Det finns några förändringar, så återge komponenten igen.

componentDidUpdate(prevProps, prevState)

Samma saker som componentDidMount() : DOM är uppdaterad , så du kan göra lite arbete med DOM här.

componentDidUpdate(prevProps, prevState){}

Komponentborttagning

componentWillUnmount()

Den här metoden kallas innan en komponent tas bort från DOM.

Det är ett bra ställe att göra rengöringsåtgärder som:

• Ta bort evenemangets lyssnare.
• Rensa timrar.
• Stoppa uttag.
• Att rensa upp reduxstater.

componentWillUnmount(){
  ...
}

Ett exempel på att ta bort bifogad händelse lyssnare i componentWillUnMount

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

React Component Container

När man bygger en React-applikation är det ofta önskvärt att dela in komponenter baserat på deras primära ansvar, i presentations- och behållarkomponenter.
Presentationskomponenter handlar bara om att visa data - de kan betraktas som och implementeras ofta som funktioner som konverterar en modell till en vy. Vanligtvis upprätthåller de inga interna tillstånd. Behållarkomponenter handlar om att hantera data. Detta kan göras internt genom sitt eget tillstånd, eller genom att agera som mellanhänder med ett statligt förvaltningsbibliotek som Redux. Behållarkomponenten kommer inte direkt att visa data utan den överför data till en presentationskomponent.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

Livscykelmetod samtal i olika tillstånd

Detta exempel fungerar som ett komplement till andra exempel som talar om hur man använder livscykelmetoderna och när metoden kommer att anropas.

Detta exempel sammanfattar Vilka metoder (componentWillMount, componentWillReceiveProps, etc) kommer att anropas och i vilken sekvens kommer att vara annorlunda för en komponent i olika tillstånd :

När en komponent initialiseras:

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. framställa
5. componentDidMount

När en komponent har tillstånd ändrats:

1. shouldComponentUpdate
2. componentWillUpdate
3. framställa
4. componentDidUpdate

När en komponent har rekvisita ändrats:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. framställa
5. componentDidUpdate

När en komponent avmonteras:

1. componentWillUnmount