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

Дата публикации: 2018-07-19

От автора: в этой главе мы рассмотрим, как объединить в 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;

import React from 'react';

class App extends React.Component {

render() {

return (

<div>

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

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;

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>

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

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

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

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