React JS для начинающих: API компонентов и жизненный цикл

В этом уроке мы расскажем что такое React API компонентов. Мы покажем вам три метода: setState(), forceUpdate и ReactDOM.findDOMNode().

react api

React JS для начинающих:

Установка состояния

Метод setState() используется для обновления состояния компонента. Этот метод не заменяет состояние, а только добавляет изменения в исходное состояние.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
    
      this.state = {
         data: []
      }
  
      this.setStateHandler = this.setStateHandler.bind(this);
   };

   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data;
      myArray.push(item)
      this.setState({data: myArray})
   };

   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}

export default App;

Мы создали пустой массив. Каждый раз, при нажатии на кнопку, состояние будет обновляться. Если нажать по ней пять раз, мы получим следующий результат.

react js state

Принудительное обновление

Если необходимо обновить компонент вручную. Вы можете сделать это с помощью метода forceUpdate().

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };

   forceUpdateHandler() {
      this.forceUpdate();
   };

   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}

export default App;

Мы устанавливаем случайное число, которое каждый раз будет обновляться при нажатии на кнопку.

react

Поиск узла в DOM

Для манипуляции с DOM, мы используем метод ReactDOM.findDOMNode(). Для начала нужно импортировать react-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };

   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}

export default App;

При нажатии на кнопку, меняется цвет элемента myDiv.

react dom

Жизненный цикл компонентов React

Методы жизненного цикла:

  • componentWillMount выполняется до рендера, как на серверной так и клиентской стороне.
  • componentDidMount выполняется после первого рендера, только на стороне клиента. Здесь должны происходить AJAX и DOM запросы или обновление состояния. Этот метод также используется для интеграции с другими JavaScript структурами и любыми функциями использующие setTimeout или setInterval. Мы используем этот метод для обновления состояния и для вызова других методов управления жизненным циклом.
  • componentWillReceiveProps вызывается как только обновляются свойства (props) перед вызовом рендера.
  • shouldComponentUpdate возвращает значения true или false. Позволяет определить, будет ли компонент обновляться или нет. Значение по умолчанию true.
  • componentWillUpdate вызывается непосредственно перед рендером.
  • componentDidUpdate вызывается непосредственно после рендера.
  • componentWillUnmount вызывается после удаления компонента из DOM.

В нашем примере мы инициализируем начальное состояние, в функции конструктора. Функция setNewnumber используется для обновления состояния. Все методы управления жизненным циклом находятся внутри компонента Content.

App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }

      this.setNewNumber = this.setNewNumber.bind(this)
   };

   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }

   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }

   componentDidMount() {
      console.log('Component DID MOUNT!')
   }

   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }

   shouldComponentUpdate(newProps, newState) {
      return true;
   }

   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }

   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }

   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Результат рендера:

react цикл

Перевод статьи ReactJS - Component Life Cycle

Тэги: APIreact.js

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.