React JS — Компоненты

От автора: в этой главе мы рассмотрим, как объединить в React js компоненты, чтобы упростить поддержку приложения. Этот подход позволяет обновлять и изменять компоненты, не затрагивая остальную часть страницы.

Пример без состояния

Наш первый компонент в следующем примере — App. Этот компонент является владельцем Header и Content. Мы создаем Header и Content отдельно и просто добавляем их внутри дерева JSX в наш компонент приложения. Необходимо экспортировать только компонент приложения.

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 и вызвать responseDOM.render(). Мы уже сделали это, установив среду.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app'));

Приведенный выше код дает следующий результат.

Пример с состоянием

В этом примере мы установим состояние для компонента-владельца (App). Компонент Header просто добавлен как в последнем примере, так как он не нуждается в каком-либо состоянии. Вместо тега content мы создаем элементы таблицы и 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'));

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.