React JS для начинающих: Компоненты и Состояния

В этом уроке мы покажем вам, как объединять компоненты для упрощения обслуживания приложения. Такой подход позволяет обновлять и изменять определенные компоненты, не затрагивая остальную часть страницы. А также разберем что такое состояния в React JS

react компоненты

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

Пример компонента React JS #1

App - это наш первый компонент, который хранит два компонента: header (заголовок) и content (контент). Мы создадим заголовок и контент по отдельности и просто добавим их в JSX дерево компонента App. Таким образом, остается экспортировать только компонент APP.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

export default App;

Для того чтобы отобразить его на странице, его нужно импортировать в файл main.js и вызвать reactDOM.render(). Мы уже сделали это, когда устанавливали среду.

main.js

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

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

Результат:

react компонент

Пример компонента React JS #2

В этом примере мы добавим состояние для компонента (App). Добавляем компонент header, как и в предыдущем примере. Вместо тега content, мы создаем элементы table и tbody, в которые будем динамически вставлять TableRow для каждого объекта из массива данных. Обратите внимание, что мы используем синтаксис ECMAScript 2015 (=>), который выглядит намного чище, в отличие от старого синтаксиса JavaScript. Это помогает создавать компоненты с наименьшим количеством строк кода. Это особенно полезно, когда вам нужно создать список с большим количеством деталей.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}

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'));

Обратите внимание, что мы используем ключ = {i} внутри функции map(). Это поможет React обновить только необходимые элементы вместо повторного рендеринга всего списка, при любом изменении. Это огромный прирост производительности для большого числа динамически создаваемых элементов.

react js компонент

React JS State

Состояние (state) — это специальный объект внутри компонента. Он хранит данные, которые могут изменятся с течением времени. Вы всегда должны стараться сделать ваше состояние как можно более простым и свести к минимуму количество таких компонентов. Например, если у вас есть десять компонентов, которые берут данные из состояния, вы должны создать один контейнер, который будет содержать состояние для всех компонентов.

Ниже вы увидите пример создания компонента с сохранением состояния, используя синтаксис EcmaScript2016 года.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         header: "Header from state...",
         "content": "Content from state..."
      }
   }
   
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </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'));

Результат:

react состояние

Перевод статьи ReactJS - State

Тэги: react.js

Вход

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