Учебник ReactJS

Жизненный цикл компонента делится на этапы «Инициализация», «Монтирование», «Обновление» и «Отключение».

Вот подробное объяснение о каждом компоненте.

Компонент вactjs имеет следующие стадии:

Инициализация : это первая стадия жизненного цикла компонента.

Здесь он будет иметь реквизиты по умолчанию и состояние на начальном уровне.

Монтаж : на этом этапе компонент отображается внутри DOM. У нас были следующие методы в состоянии монтажа.

• componentDidMount (): Это также вызывается, когда Компонент только что добавлен в DOM.

• render (): у вас есть этот метод для всех созданных компонентов. Возвращает узел HTML.

Обновление : в этом состоянии dom взаимодействует с пользователем и обновляется. Например, вы вводите что-то в текстовое поле, поэтому свойства состояния обновляются.

Ниже приведены методы, доступные в состоянии обновления:

• shouldComponentUpdate (): вызывается при обновлении компонента.

• componentDidUpdate () : после обновления компонента.

Размонтирование: это состояние появляется на рисунке, когда Компонент не требуется или удален.

Ниже приведены методы, доступные в размонтированном состоянии:

Компонент willUnmount (): вызывается, когда компонент удаляется или уничтожается.

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

Пример: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

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

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
); 

При проверке вывода в браузере

В ответных HTML-элементах ввода Html, таких как <input />, <textarea /> и <select />, есть собственное состояние, которое необходимо обновлять, когда пользователь взаимодействует с помощью метода setState ().

В этой главе мы увидим, как работать с формами вactjs.

Вот рабочий пример:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Для полей ввода нам нужно поддерживать состояние, поэтому для этой реакции предусмотрен специальный метод setState, который помогает поддерживать состояние всякий раз, когда происходит изменение.

Мы использовали события onChange и onClick в текстовом поле и кнопку отправки. Когда пользователь вводит текстовое поле, вызывается событие onChange, и поле имени внутри состояния объекта состояния обновляется, как показано ниже:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

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

ReactDOM.render(
    <Form />,
    document.getElementById('root')
); 

Вывод в браузере выглядит следующим образом:

Работа с событиями вactjs такая же, как вы делали бы в javascript. Вы можете использовать все обработчики событий, которые используются в JavaScript. Метод setState () используется для обновления состояния, когда пользователь взаимодействует с любым элементом Html.

Вот рабочий пример того, как использовать события в responsejs.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Для полей ввода нам нужно поддерживать состояние, поэтому для этой реакции предусмотрен специальный метод setState, который помогает поддерживать состояние всякий раз, когда происходит изменение.

Мы использовали события OnChange и OnClick на текстовое поле и кнопку. Когда пользователь вводит текстовое поле, вызывается событие onChange , и поле имени внутри состояния объекта состояния обновляется, как показано ниже:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

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

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
); 

Вот вывод в браузере:

Посмотрим на рабочий пример, чтобы понять, как работает inline css в Reactionjs.

addstyle.jsx

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

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Я добавил цвет: красный стиль к тегу h1.

index.js

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

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Вывод в браузере выглядит следующим образом:

Давайте создадим внешний css, для этого создадим папку css / и добавим в нее style.css.

style.css

.h1tag {
color:red;
}

Добавьте style.css в ваш файл index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Теперь давайте добавим класс к тегу h1 в файле .jsx

addstyle.jsx

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

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

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

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Атрибут className задает детали класса. Теперь давайте проверим в браузере.