Translate

Поиск по этому блогу

Показаны сообщения с ярлыком npm. Показать все сообщения
Показаны сообщения с ярлыком npm. Показать все сообщения

понедельник, 1 октября 2018 г.

Основы Node JS ( II ).

В этой части мы создадим свой собственный сервер,разберем работу с потоками, функцию pipe и маршрутизацию.



Все материалы по JavaScript


Создание сервера на Node.js

Подключаем нужный модуль - http.

В этом модуле есть функции, которые позволят нам создать свой собственный сервер.

В переменную поместим вновь созданный сервер.

Для того, чтобы посылать на него данные и принимать ответы и статус (найдена или нет страница и пр.).

Все это внутрь нашей функции.

Теперь указываем порт.


let http = require('http');

let server = http.createServer( function (req, res) {
 res.writeHead( 200, {'Content-Type':'text/plain'});
 res.end('Hello. It is new server');
});
server.listen(8080,'localhost');
console.log('Server run on port 8080');



Откроем страницу http://localhost:8080/ в браузере и увидим наш текст.



Пока что наше приложение не реагирует на введение в адресную строку наименований.

Что бы мы не ввели, после http://localhost:8080/, страница никак не изменится.

В дальнейшем мы это исправим. а пока что мы сможем видеть ввод пользователем url в консоли:

Добавим строку console.log('URL страницы : ' + req.url); в начало функции.


let http = require('http');

let server = http.createServer( function (req, res) {
 console.log('URL страницы : ' + req.url);
 res.writeHead( 200, {'Content-Type':'text/plain'});
 res.end('Hello. It is new server');
});
server.listen(8080,'localhost');
console.log('Server run on port 8080');



Введем некий адрес и нажмем Enter.

В консоли мы увидим тот, адрес, что мы ввели в адресной строке и favicon.ico (это от Google Chrome), остальное - наш ввод.



Работа с потоками в Node JS.

Чтение файла.

Для того, чтобы понять, что такое потоки, проще всего представить, что вы смотрите большой фильм на youtube.

При этом, вы не ждете, когда это видео полностью загрузится. Загружается некая малая часть и начинается просмотр. Остальное подгружается в момент просмотра.

В Node.js мы можем также показывать большие объекты некими частями, подгружая их по мере прокрутки страницы (например), или по мере чтения большого текста.

Представьте, что у нас есть файл с очень большим объемом текста. Такой файл было бы проще читать по частям, а не ждать загрузки всего текста целиком.

В модуле fs есть функция, которая позволит это сделать, поэтому мы первым делом, подключаем его.

Создадим новую переменную. Назовем как угодно.

let myReadShort = fs.createReadStream(path, options);

Первым параметром указывается файл, который мы хотим прочитать.

Путь к файлу указываем с помощью __dirname.

Второй параметр опционный.

Таким образом данные большого файла будут считываться постепенно и помещаться в переменную myReadShort.

В метод .createReadStream() уже встроен обработчик событий, поэтому. когда мы будем получать новые данные из файла мы их будем выводить в консоль.

Используем метод .on(). В нем мы отслеживаем событие 'data'. Это событие предустановленное и оно будет срабатывать, когда мы будем получать новый кусок данных из большого файла.

Вторым параметром пропишем функцию, которая будет принимать параметр (chunk - малый кусок данных, хотя можно дать свое название).


let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt');

myReadShort.on('data', function(chunk){
 console.log('Полученны новые данные \r \n' + chunk );
})



Если вы все сделали правильно то вы увидите постепенный вывод огромного текста в консоль.



Бывает, что для отображения кириллицы, стоит дописать опционный параметр в функцию fs.createReadStream(__dirname + '/big-text.txt', 'utf-8')

Запись данных потоками.

Отменим вывод в консоль наших chunk и добавим в код новую переменную


let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');
let myWriteShort = fs.createWriteStream(__dirname + '/news-big-text.txt');

myReadShort.on('data', function(chunk){
 console.log("Получены новые данные : ");
 myWriteShort.write(chunk);
});





Функция pipe(), работа с HTML и JSON.

Функция pipe().

Посмотрим на код выше и мы увидим. что все, что мы здесь делали, это записывали по частям информацию из одного файла в другой.

Функция pipe() делает тоже самое и поэтому мы можем легко переписать наш код:


let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');
let myWriteShort = fs.createWriteStream(__dirname + '/news-big-text.txt');

// myReadShort.on('data', function(chunk){
//  console.log("Получены новые данные : ");
//  myWriteShort.write(chunk);
// });

myReadShort.pipe(myWriteShort);



Если запустить, то будет тоже самое - создастся новый файл с неким текстом.



Эта функция очень полезна для передачи данных на сервер.

Перенесем наш код локального сервера в этот файл, ниже.


let fs = require('fs');

let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');
let myWriteShort = fs.createWriteStream(__dirname + '/news-big-text.txt');

myReadShort.pipe(myWriteShort);

let http = require('http');

let server = http.createServer( function(req, res){
 res.writeHead(200, {'Content-Type':'text/plain; charset=utf-8'});
 res.end('Hello It is new server');
});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');



Теперь мы будем выводить не запись Hello It is new server, а целый файл.


let fs = require('fs');



let http = require('http');

let server = http.createServer( function(req, res){
 res.writeHead(200, {'Content-Type':'text/plain; charset=utf-8'});
 let myReadShort = fs.createReadStream(__dirname + '/big-text.txt','utf-8');

  myReadShort.pipe(res);

});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');





Очень много текста на страницу вывелось частями (оптимизировано).

Вывод HTML.

Создадим простой html - файл.

Можно даже добавить стили.

Файл index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Заголовок страницы.</title>
 <style>
  body {
   background-color: #fafafa;
   font-family: Lato;
   font-size: 18px;
   color:#2A2A2A;
  }
  .container {
   margin: 10px 40px;
  }
 </style>
</head>
<body>
 <div class="container">
 <h1>Hello, It is my first page on Node.js</h1>
 <h2>Заголовок второго уровня.</h2>
 <p>Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.</p>
 <h3>третьего уровня заглавие.</h3>
 <p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке систем массового участия. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 <p>Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 </div>
</body>
</html>



Теперь возникает вопрос - как это вывести на страницу?

text/plain - вывод просто текста

text/html - вывод html.

Вместо файла, который читаем - название нашего файла - index.html


let fs = require('fs');



let http = require('http');

let server = http.createServer( function(req, res){
 res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
 let myReadShort = fs.createReadStream(__dirname + '/index.html','utf-8');

  myReadShort.pipe(res);

});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');





Мы вывели весь наш файл со стилями. И главное. то что мы вывели его постепенно. Если бы страница была очень большая, то она выводилась бы частями (chunk) и вывод не мешал бы пользователю.

Вывод JSON.

'Content-Type':'application/json' -вывод JSON формата на страницу.

Сам объект

Конвертировать его в строку на выводе.


let fs = require('fs');

let http = require('http');

let server = http.createServer( function(req, res){
 console.log('URL страницы : ' + req.url);
 res.writeHead(200, {'Content-Type':'application/json; charset=utf-8'});

 let obj = {
  model:'Audi',
  speed:'134 km',
  wheels: 4
 };
 res.end(JSON.stringify(obj));
});
server.listen(8080, 'localhost');
console.log('Server run on 8080 port');





Маршрутизация Node JS

Будем выдавать разные html-страницы на разные url-запросы.


let fs = require('fs');
let http = require('http');

let server = http.createServer(function(req, res){
 console.log('URL страницы : ' + req.url);
 if (req.url === '/index' || req.url === '/') {
 res.writeHead(200,{'Content-Type':'text/html; charset=utf-8'});
 fs.createReadStream(__dirname + '/index.html').pipe(res);
 }
});

server.listen(8080, 'localhost');
console.log('Server run on 8080 port');



Если сейчас попробовать в адресную строку ввести какой то адрес отличный от/ или /index, то мы получим долгую загрузку и ничего более.

Точно так же можно подключить еще одну страницу:

Файл about.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Заголовок страницы.</title>
 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
 <style>
  body {
   background-color: #77F39E;
   font-family: 'Poppins', sans-serif;
   font-size: 1.2rem;
   color:#2f2f2f;
  }
  .container {
   margin: 10px 40px;
   padding: 20px;
  }
  img {
   float: left;
   margin-right: 20px;
   width: 300px;
   height: 300px;
  }
 </style>
</head>
<body>
 <div class="container">
 <h1>Hello, It is my first page on Node.js</h1>
 <h2>Заголовок второго уровня.</h2>
 <p>Равным образом укрепление и развитие структуры способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Равным образом начало повседневной работы по формированию позиции требуют от нас анализа существенных финансовых и административных условий.</p>
 <h3>третьего уровня заглавие.</h3>
 <p>Значимость этих проблем настолько очевидна, что консультация с широким активом позволяет выполнять важные задания по разработке систем массового участия. Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям. Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 <p>Не следует, однако забывать, что консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.</p>
 </div>
</body>
</html>



Такая маршрутизация сложна для чтения, но это только потому, что мы не используем фреймворки (например Express). Это чистый код нужен для понимания того, как работает маршрутизация на NodeJS





                                                                                                                                                             

вторник, 18 сентября 2018 г.

Работа с REPL. Основные команды.

REPL - read eval print loop это интерактивный компонент, который поставляется вместе с Node.js




При работе в Node.js часто приходится запускать целые файлы или части кода для тестирования. Для удобства можно использовать REPL, просто набрав в КС (здесь и далее - командная строка):

node


Нажать Enter.

Без ключевого слова var будет возвращать введенные выражения, а с var - undefined



Так происходит потому что в результате операции присваивания значения переменной не возвращает результат.

Вот интересный пример:



Ожидали увидеть true?

Не забывайте, что интерпретатор пойдет слева направо и вначале сравнит 3 и 2. Получит true. И только потом сравнит true и 1 и получит false

3>2==1 будет true, потому что при не строгом сравнении true==1

Можете проверить!

Многострочный и сложный JS код

JS код можно набирать в REPL точно так же как в обычном файле, включая необходимые инструкции для импорта модулей.

Пример с модулем Query String:



Переменная qs без var и нажать Enter. Пока мы работаем без var, то сразу видим результат. В данном случае это интерфейс объекта querystring.

REPL предоставляет возможность введения многострочного кода после любой открывающей скобки { или (. При вложенности, просто увеличивается кол-во точек перед введенным кодом.

Здесь можно также вставлять блоки кода - правая кнопка мыши и выбрать "Вставить".

Основной объект Node.js global на официальном сайте Node.js документирован довольно слабо. Чтобы это испавить, вы можете посмотреть всё информацию об этом объекте просто набрав:

console.log(global);


Или:

gl = global;


Для перехода по уже набранным вами командам, можно воспользоваться стрелками "вверх" - "вниз" - . Выбрать нужную и нажать Enter.

Управление REPL с помощью команд.
  • Ctrl + C - Завершает выполнение текущей команды. Повторное нажатие - выход из REPL.
  • Ctrl + D или написать в консоли .exit - Выход из REPL.
  • Tab - Автоматическое завершение имени глобальной или локальной переменной.
  • - Переход вверх по списку введенных команд.
  • - Переход вниз по списку введенных команд.
  • _ -(нижнее подчеркивание) - ссылка на результат вычисления после выражения.


Ниже приведу список команд для ввода в поле REPL:

  • .break - Если вы запутались с введением многострочного кода, эта команда вернет вас к самому началу, но весь многострочный код будет потерян.
  • .clear - Перезапуск объекта контента и очистка любого многострочного выражения. Эта команда по сути запускает сеанс с самого начала.
  • .exit - Выход из REPL
  • .help - Вывод всех доступных команд.
  • .save - Сохранение текущего REPL сеанса в файле.
  • .load путь/к/файлу.js - Загрузка файла в текущий сеанс (


Команда .save путь/к/файлу/для/сохранения.js сохраняет в файле все, что было введено в текущий объект контента. Пока не будет специально создан новый объект контента или использована команда .clear. Контент включает в себя все, что было введено в текущий REPL сеанс.

Node компонент REPL является удобным интерактивным средством упрощающим разработку. REPL позволяет не только проверять код перед его включением в файлы, но и создавать приложения в интерактивном режиме, сохраняя результаты после завершения.

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

Если вы собираетесь использовать REPL для разработки, то не забывайте чаще сохранять свою работу!



                                                                                                                                                             

четверг, 6 сентября 2018 г.

ES6. Постоянная const. Отличия от let и var(III)

Использование const





Все материалы по ES6


Помимо var и let мы можем использовать для объявления переменных ключевое слово - const.

const - constant - постоянная. Позволяет объявить постоянные значения, которые нельзя изменить в ходе программы.

Давайте попробуем применить const!

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

Для этого нам следует открыть папку проекта в КС (командной строке) и ввести команду:

npm run watch


и нажать Enter

Скрипт запустится и теперь Babel будет следить за файлами.

Генерированные файлы нас будут интересовать только в порядке ознакомления, так как современные версии браузеров поддерживают const без транспиляции.

В папке src я создал файл const.js.

В этом файле мы создадим постоянную PI использую const.

Выводим значение PI в консоле.

const PI = 3.14159;

console.log(PI);


Во мноих языках, включая JS, имена постоянных пишутся большими буквами, чтобы легко отличить их от переменных.

Тепреь важно изменить путь к файлу в файле index.html

<script src="src/const.js"></script>

Сохраняем и открываем в браузере.

И в консоле мы увидим значение PI.



Если мы посомтрим на то, что сгенерировал Babel, то мы увидим:

"use strict";

var PI = 3.14159;

console.log(PI);


Как вы видите. он просто заменил const на var.

Как я уже говорил, если бы мы даже использовали нетранспилированный файл с const, то никаких ошибок мы бы не увидили!

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


Если этого не сделать, то произойдет ошибка.

Давайте посмотрим. Стоит только убрать значение у PI и произойдет ошибка



-Переменой не присвоено значение!-

Теперь, вернем значение и попробуем его изменить ниже.


const PI = 3.14159;
PI = 3.15;
console.log(PI);



Сохраним и посмотрим в консоле.

Теперь мы увидим другую ошибку



-Нельзя присвоить переменной иное значение. -

Постоянная, как и преременная объявленная через let не поднимаются.


То естсь нельзя использовать постоянную до её объявления!

Для примере перенесем вывод переменной до объявления константы:


console.log(PI);
const PI = 3.14159;



Мы получим ошибку.



- PI не объявлена -

Еще одна интересная особенность постоянных это то, что хотя мы и не можем поменять их значение, мы можем изменить значение свойства объекта, если он был объявлен при помощи const


С другой стороны в этом нет ничего странного, потому что если переменной присвоен объект, то в переменной будет находиться не сам объект, а ссылка на него.

Давайте посмотрим на примере.


const CAT = {
 COLOR: 'black'
};
console.log(CAT.COLOR);





Теперь мы изменим значение COLOR на white

const CAT = {
 COLOR: 'black'
};

CAT.COLOR = 'white';
console.log(CAT.COLOR);




И мы видим, что значение легко изменилось!

Нам это удалось. потому что мы изменили свойства объекта, а не саму постоянную!

При попытке изменить сам объект чаще всего происходит ошибка. В последних версиях - просто выдает настоящие значения - значения заданные при инициализации обьекта.

Например:


const CAT = {
 COLOR: 'black'
};

СAT = {
 COLOR: 'white'
};
console.log(CAT.COLOR);



Просто покажет в консоле black

Что использовать const, let или var ?

Если вы точно знаете, что значение переменной не изменится, тогда используйте - const.

В остальных случаях используйте let.

Есть мнение. что по умолчанию следует использовать const и только для значений, которые изменятся - let.

А что с var? К сожалению, при написании кода на ES6 в нем нет необходимости.



                                                                                                                                                             

вторник, 4 сентября 2018 г.

ES6 подготовка к работе.

Установка и настройка Babel.





Для работы с ES6 нам нужно установить Babel и сделать некоторые настройки.

Для этого нужно установить последнюю стабильную версию Node.js и NPM.

Если у вас они не установлены, то вы сможете сделать это с официальных сайтов, перейдя по ссылкам выше.

Установка очень простая и я на ней останавливаться не буду.

После установки Node.js вы сможете проверить версию набрав в КС (командная строка - здесь и далее)

node -v


npm -v
- для версии NPM.

Создадим рабочую папку из КС - в нужной директории

mkdir Имя_Папки_проекта


Для перехода в папку (директорию).

cd Имя_папки_(или_директории)


Или можно просто перетащить нужную папку прямо в КС и нажать Enter, таким образом получить путь и перейти к нужной папке.

Переходим в созаную папку.

Теперь нам нужно инициализировать NPM.

В КС набираем:

npm init -y


В нашем случае -y обозначает, что мы принимаем все параметры по умолчанию (Yes).

В папке вашего проекта после этого появится файл package.json В этом файле содержится информация необходимая для работы NPM.

Вернемся к Babel



Babel предназначен для траспиляции кода. Транспиляция - это перевод кода с одного языка на другой. В нашем случае с ES6 на ES5. После этого мы сможем использовать код в любом современном браузере.

Babel можно использовать с другими инструментами и фреймворками. На сайте Babel есть подробная инструкция.

Пройдя по этой ссылке Using Babel мы сможем с вами выбрать нужную нам конфигурацию. Так как у нас есть Node.js, NPM и мы собираемся использовать CLI , то наша команда сформируется так

npm install babel-cli babel-core babel-preset-es2015 --save-dev


cli - comande line interface Интерфейс командной строки - позволит использовать команду babel в самой КС, как NPM.

babel-core - основой модуль Babel.

babel-preset-es2015 - модуль еобходимый для транспиляции ES6.

--save-dev добавит модули в package.json в раздел devDependencies, в которм указываются модули необходимые для разработки.

После установки в папке проекта появится папка node_modules.

В этой папке содержатся папки модулей, которые мы устаовили. Также эти модули добавились в наш файл package.json в раздел devDependencies.

В папке проекта создадим папку src Source-Источник - для исходного кода. и папку dist Distribution -распространиение.- конечный код.

index.html - (так же в корне папки проекта) файл с помощью которого мы будем проверять работоспособность кода.

В этом файле обычная разметка с тегом script


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script></script>
</body>
</html>



Проверить Babel

В папке src создадим файл script.js.

Внутри файла мы попробуем одно из нововедений ES6


    let variable = "Item";



let - ключевое слово, которе позволяет объявлять локальные переменные.

Теперь нам нужно перевести (транспилировать) ES6 в ES5.

Для этого в файле package.json в разделе scripts удаляем скрпт-тест ("test": "echo \"Error: no test specified\" && exit 1") вставим следующее -

"build": "babel src -d dist --presets es2015"

Это мы написали скрипт, который будет брасть исходный код из папки src. -d - указывает куда поместить измененный код - dist.

--presets es2015 - указывает что мы транспилируем код ES 6.

Сохраняем

В КС

npm run build


Этой командой мы можем запускать скрипты, которые мы указываем в файле package.json

Нажимаем Enter Запустится скрипт и когда он завершится в папке dist

Появится файл script.js вот с таким содержимым:


    "use strict";

    var variable = "Item";



Как вы видете слово let заменено на var и значит все транспилировалось и можно использовать код на странице.

Для того, чтобы каждый раз не вводить команду

npm run build


Мы добавим еще один скрипт в файл package.json

"watch": "babel src -d dist --presets es2015 -w"

-w означает, что теперь Babel будет смотрет за файлами в папке src. И как тоько будут изменения в файлах или вообще в папке src (например - создание нового файла) то тут же все автоматически отразится уже готовым кодом в папке dist.

package.json
{
  "name": "ES-6-new",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d dist --presets es2015",
    "watch": "babel src -d dist --presets es2015 -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1"
  }
}



Здесь файл package.json полностью с выделенными красным цветом изменениями.

Теперь запускаем команду в КС:

npm run watch


И теперь запишем в наш файл script.js в папке src

let say = "Hello";

Сохраним.

И в файле script.js в папке dist отразятся наши изменения:

var say = "Hello";

Остановить слежение - Ctrl + C и Y если остановить или N - если продолжить.

См картинку ниже:



Таким простым способом мы настроили транспилцию кода в режиме реального времени, таким образом, чтобы любой браузер смог прочитать JS- код написанный по новым стандартам.

Теперь самое время перейти к более серьезному изучению JS стандарта ES6.                                                                                                                                                              

понедельник, 14 мая 2018 г.

React.js (8) Отладка




Все статьи по React.js



Если вы точно воспроизвели данный код у себя на машине, то могли заметить, что смена статей при нажатии на кнопку происходит один раз в два клика. То есть нажимаем один раз - ничего не происходит. нажимаем второй раз - меняется порядок статей.

Давайте разберемся. что у нас пошло не так и заодно научимся отладке React приложений.

В каждом случае, когда у вас идет то-то не так, вам нужно просто вспомнить как работает React и повторить за ним эти шаги.

В нашем случае, все что у нас произойдет - в какой-то момент по клику (1) на кнопку вызовется collback (2) он поменяет состояние и это должно привести к перестроению виртуального DOM и это внесет изменения в реальный DOM.



Давайте проверим все ли работает у нас так, как задумано?

В первую очередь нас интересует вызывается ли этот collback(2)?

Нам для этого ненужны какие-то специальные средства отладки. просто добавим console.log('---',1); в эту функцию.

следующим этапом, если все пойдет правильно, то у нас вызовется setState() он в любом случае, приведет к перестроению виртуального DOM, и соответственно вызовется метод render().

В него тоже добавим console.log('---',2);

Третье, что может пойти не так - это, теоретически у нас может как-то не так поменяться состояние. В функции render() добавим в console.log('---',2, this.state);

Идем в консоль - Ctrl + Shift + I и видим:



Collback - вызывается, все вызывается и состояние, на самом деле, меняется. Вроде бы все хорошо. Почему же тогда не работает? Давайте проанализируем наш код:

<ArticleList articles={this.state.reverted ?articles.reverse() : articles}/>

В каждый момент времени он получает массив статей. Или перевернутый - ? articles.reverse() или обычный -

: articles

Проблема в том, что метод articles.reverse() не просто возвращает перевернутый массив, но и меняет этот объект по ссылке!. Таким образом, когда мы в следующий момент времени захотим просто передать в ArticleListмассив статей, он уже будет перевернутый.

Чтобы это продемонстрировать мы добавим в вывод консоли (2) articles.map(article => article.id

console.log("---",2, this.state, articles.map(article => article.id))

И для наглядности вынесем действие смены массива ArticleList наверх.


  import React, {Component} from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  class App extends Component {
    state = {
      reverted: false
    }
    render(){
      const articlesList = this.state.reverted ?articles.reverse() : articles
      console.log("---",2, this.state, articles.map(article => article.id))
      return (
        <div className="container">
          <div className="jumbotron">
            <h1 className="display-3">
                App name
                <button className="btn" onClick = {this.revert}>Revert</button>
            </h1>
          </div>  
            <ArticleList articles={articlesList}/>
        </div>
      );
    }
      revert = () => {
        console.log("---",1)
       this.setState({
        reverted: !this.state.reverted
      })
    }
  }
  export default App



Давайте посмотрим



Массивы действительно меняются местами, но когда мы нажимаем еще раз, и у нас уже {reverted: false} (2) мы все еще ссылаемся на предыдущий массив с тем же порядком. Соответственно, пока мы его не перевернем в следующий раз. ничего не произойдет.

Попробуем "починить" это "наивным способом".

Добавили articles.reverse()



Таким образом у нас каждый раз будет по клику меняться направление. Даже наш флажок мы оставили без изменений - reverted: !this.state.reverted, потому как он уже ни на что влиять не будет.

В ArticleList мы просто передадим articles. Мы будем их менять по ссылке - <ArticleList articles={articles}/>

Проверим и убедимся, что это избавит нас от этой проблемы. Но на самом деле наша ошибка значительно глубже!

Обратите внимание на то, что мы делаем! Это ужасно!!! Никогда так не делайте!!!

На самом деле сейчас мы по ссылке меняем массив (на скрине сверху обвел красным), который может использоваться где угодно в нашем приложении. Мы же не знаем где еще мы считаем эти articles. Поэтому правило:

Работайте в компонентах с локальными переменными, которые вы видите где используются и как вы с ними взаимодействуете!


Иначе, может получиться так, что вы поменяете переменную в одном месте, а потом не сможете понять, почему соседний компонент работает не так, как вы это задумали! Поэтому->

Никогда не меняйте по ссылке внешние переменные и тем более то, что приходит вам в props


Теперь давайте попробуем исправить ситуацию.

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

articles = articles.slice()

И теперь у нас для каждого компонента App будет своя копия articles. И теперь с копией мы можем работать. Нам нужно только добавить this к изменению порядка в функции reverse()->

this.articles.reverse()

и

<ArticleList articles={this.articles}/>

Теперь мы не будем менять глобальную переменную articles, а меняем только то, что "живет" в this.

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

Давайте предположим, что мы решили сделать любой наш компонент - PureComponent, соответсвенно, чтобы у нас не происходило лишних перестроений виртуального дерева, когда это не нужно. И заменим Component на PureComponent

import React, {PureComponent} from 'react'

и соответственно -

class App extends PureComponent

И аналогично в файле index.js перепишем ArticleList перепишем с функционального компонента в классовый компонент. И тоже сделаем его PureCompomemt

index.js

  import React, {PureComponent} from 'react'
  import Article from '../Article'
  import './style.css'
  export default class ArticleList extends PureComponent {
    render(){
        const articleElements = this.props.articles.map((article, index) =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article} defaultOpen = {index === 0}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
    }
  }



Посмотрим, как это работает. Идем в приложение. Нажимаем на кнопку Revert и ...ничего не происходит!

Почему так?

Давайте пройдемся по нашему алгоритмы.

В первую очередь - в какой момент времени у нас должно было что-то произойти?

В функции revert (App.js) произошло изменение состояния, значит в render, начнется перестроение виртуального дерева.

Ставим проверочный вывод в консоль в самом верху рендера - console.log("---",1)

Затем, в рамках перестроения общего виртуального дерева будет перестраиваться и ArticlaList (index.js) поставим там - console.log("---",2), так же в самом начале рендера. И теперь посомотрим, что происходит у нас в консоле.



В первый раз (1 на фото) - сработали обе функции, потому что DOM дерево строилось в первый раз.

Потом, мы нажали кнопку Revert и у нас сработала только 1 функция (2 на фото)

Если заменить PureComponent на обычный Component, то будут срабатывать обе функции.

Так происходит потому что с точки зрения ArticleList, когда мы будем проверять props в shouldComponentUpdate(), props у нас не поменяются.

Единственный props , который к нам приходит - this.props.articles

Но articles мы меняем по ссылке. Таким образом это всегда один и тот же массив.Соответственно, каждый раз при престроении мы передаем туда ссылку на один и тот же массив и несмотря на то, что внутренние составляющие его поменялись (порядок). Но с точки зрения ArticleList это все тот же массив. И он будет считать, что перестроение делать ненужно!

Это одни из главных причин почему в React настолько популярна работа с иммутабельными данными.

Иммутабельные - это данные, которые вы не меняете по ссылке

Если вам нужно, в какой-то период времени, поменять массив статей, то вы не просто меняете по ссылке какую-то локальную переменную, но вместо этого вы создаете новый массив. И уже этт новый массив будет содержать статьи в таком порядке, в котором вы и хотите.

Соответственно правильным будет вот такое решение!

App.js

  import React, {PureComponent} from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  class App extends PureComponent {
    state = {
      reverted: false
    }
    render(){
      console.log('---',1)
      return (
        <div className="container">
          <div className="jumbotron">
            <h1 className="display-3">
                App name
                <button className="btn" onClick = {this.revert}>Revert</button>
            </h1>
          </div>  
            <ArticleList articles={this.state.reverted ? articles.slice().reverse() : articles}/>
        </div>
      );
    }
      revert = () => {
       this.setState({
        reverted: !this.state.reverted
      })
    }
  }
  export default App



Это, почти также как и было в самом начале, но единственное что - это для того, чтобы вы ничего не меняли по ссылке, чтобы articles оставался такой же как и ранее, мы создали копию (articles.slice()) и переворачивали уже копию. Не меняя при этом оригинальный массив.

Вот теперь у нас все будет хорошо!

Никогда не меняйте ничего из внешних переменных!

Никогда не меняйте ничего, что приходит в props!

Лучше, вообще ничего не менять по ссылке, и каждый раз, нужно какое-то изменение, создайте локальную копию и меняйте уже её!


Все статьи по React.js



Файлы, которые мы изменяли в этот раз:


App.js ( со всеми изменениями последний на странице)

components/ArticleList/index.js

  import React, {PureComponent} from 'react'
  import Article from '../Article'
  import './style.css'
  export default class ArticleList extends PureComponent {
    render(){
      console.log("---",2)
        const articleElements = this.props.articles.map((article, index) =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article} defaultOpen = {index === 0}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
    }
  }



                                                                                                                                                             

воскресенье, 13 мая 2018 г.

React.js (7) shouldComponentUpdate(). Оптимизация.

Теперь давайте разберемся с методом, который мы не стали подробно разбирать при изучении жизненного цикла компонентов. Это метод shouldComponentUpdate - который позволяет оптимизировать React- компоненты.


Все статьи по React.js



Давайте посмотрим как ведет себя React без него. В файле Article.js. У нас в этом файле слишком много различных выводов данных в консоль (console.log()).

Часть из них, например - в componentWillReceiveProps(nextProps) и в функции handleClick , мы уберем и посмотрим, что происходит тогда, когда мы хотим поменять порядок статей.

Мы нажимаем на кнопку и у нас семь раз (!!!) перестраивается порядок наших статей component will update.

См.фото ниже.



Это означает, что перестраивается каждая из этих статей. На самом деле нам достаточно было бы открыть одну статью (верхнюю) и закрыть другую (нижнюю). Статьи которые находятся посередине просто поменялись местами, но внутри них ничего не изменилось.

Конечно, в реальном DOM эти изменения не будут отображаться, но тем не менее можно бы было обойтись и без лишних перестроений виртуального DOM. Для этого нам и потребуется shouldComponentUpdate(). Давайте посмотрим как он работает.

Изначально наше виртуальное дерево выглядело так (для первых трех статей):



У нас открыта первая статья и закрыты все остальные.

Мы нажимаем на кнопку Revert и будем перестраивать виртуальный DOM.



Для этого в ArticleList передадим массив в перевернутом порядке и для каждой статьи начнем обновлять виртуальный DOM.

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

См. фото ниже.



Затем мы пойдем во вторую статью. в ней ничего не поменялось, но перестроим виртуальный DOM, чтобы сравнить. таким образом мы пойдем, и в третью, и в четвертую, и т.д. Для каждой их них мы будем перестраивать виртуальный DOM, понимая. что ничего не изменилось но идти дальше.

Так мы дойдем до последней статьи, где нужно поменять текст на кнопке и убрать секцию



Таким образом изменения в реальном DOM коснутся только первой и последней статьи. а виртуальный DOM будет перестраиваться для всех остальных.

И это абсолютно нормальное поведение React по умолчанию. Он не делает никаких предположений о ваших данных. Он не знает какие данные влияют на компонент. Он даже не знает какие данные поменялись у вас в системе.

Единственное что его интересует это как ваше приложение выглядело до обновления и как оно должно выглядеть после. То есть - какие изменения нужно сделать. Однако, мы зная особенности наших компонентов. особенности бизнес-логики можем помочь React и подсказать, что в некоторых случаях перестраивать компоненты необязательно. Для этого нам необходимо реализовать на компоненте метод shouldComponentUpdate()

Предположим. что мы знаем, что на наш компонент сейчас может повлиять только то открыт он или закрыт. То есть состояние isOpen: true / false. Соответственно, мы можем сравнить старое состояние с новым, понять поменялось ли что-либо и принять решение - нужно ли нам перестраивать данный компонент или нет.

Давайте посмотрим как это работает.

При этом ArticleList, когда будет перестраивать виртуальный DOM, он будет "спрашивать" у компонента - нужно ли его перестроить, вызывая на нем shouldComponentUpdate().

Если он вернет true, то он зайдет, сравнит и внесет изменения.

Затем пойдет в следующую статью и вызовет у нее shouldComponentUpdate() и если вернет false, то он просто пропустит ее. Не будет заходить и перестраивать виртуальный DOM и тем более ничего не станет менять в реальном DOM. Он просто пойдет дальше.

Если статья вернет true, то пойдет и поменяет в ней виртуальный DOM и внесет все необходимые изменения в реальную структуру.

см фото ниже



Таким образом мы перестроим виртуальный DOM только для первой и последней статьи.

Давайте это реализуем.

Идем в файл Article.js


  shouldComponentUpdate(nextProps, nextState) {
    return this.state.isOpen !== nextState.isOpen
  }



Здесь мы будем следить за состоянием (открыто \ закрыто). Функция вернет true или false в зависимости от того, поменялось ли состояние.

Проверяем.



Теперь will update вызывается всего два раза!все равно сколько раз бы мы не меняли порядок. Почему так происходит?. Потому что для "внутренних" статей у нас ничего не меняется.

Но у такой реализации shouldComponentUpdate() есть опасность!

предположим, что у нас появляются какие-либо еще интересующие нас данные. Например: Мы хотели бы посчитать количество кликов по заголовку.

Для этого мы повесили бы на заголовок hendler

Article.js

  import React, {Component} from 'react'

  class Article extends Component {
    constructor(props) {
      super(props)

      this.state = {
        isOpen: props.defaultOpen,
        count: 0
      }
    }
    shouldComponentUpdate(nextProps, nextState) {
      return this.state.isOpen !== nextState.isOpen

    }

    componentWillMount() {
      console.log('---','mounting')
    }

    componentWillReceiveProps(nextProps) {
      if(nextProps.defaultOpen !== this.props.defaultOpen) this.setState({
        isOpen: nextProps.defaultOpen
      })
    }
    componentWillUpdate() {
      console.log('---','component will update')
      
    }

    render() {
        const {article} = this.props
        const style = {width:'50%'}
        const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
      return(
        <div className="card mx-auto" style={style}>
          <div className="card-header">
            <h2 onClick={this.incrementCounter}>
                { article.title }
                clicked {this.state.count}
                <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
                <h6 className="card-subtitle text-muted">
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h6>
                { body }
          </div>
        </div>
      );
    }
    incrementCounter = () => {
      this.setState({
        count: this.state.count + 1
      })
    }

    handleClick = () =>{
     
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article



Теперь у нас появилась возможность считать клики по кнопке, но если нажимать кнопку с удержанием, то тогда появится пескакивание счета на несколько единиц.



Почему так происходит? Потому что мы делали предположения только про isOpen

Теперь нам нужно принимать во внимание еще и count. Следить за изменением такой функциональности достаточно неудобно. Поэтому чаще всего shouldComponentUpdate() реализуют другим способом.

Сравнивая все props старый с новыми и все элементы state. и если у нас поменяется хоть одно, то компонент будет перестраиваться. Если нет, то тогда все без изменений.

Этот подход настолько распространенный, что для него есть даже отдельный компонент PureComponent в React (мы его и добавим) в импорт и унаследуем Article от него, то нам не придется реализовывать shouldComponentUpdate(), как ранее.

то есть вот эту часть можно будет убрать.
Article.js

    shouldComponentUpdate(nextProps, nextState) {
      return this.state.isOpen !== nextState.isOpen

    }




Article.js

  import React, {Component, PureComponent} from 'react'

  class Article extends PureComponent {
    constructor(props) {
      super(props)

      this.state = {
        isOpen: props.defaultOpen,
        count: 0
      }
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //   return this.state.isOpen !== nextState.isOpen

    // }

    componentWillMount() {
      console.log('---','mounting')
    }

    componentWillReceiveProps(nextProps) {
      if(nextProps.defaultOpen !== this.props.defaultOpen) this.setState({
        isOpen: nextProps.defaultOpen
      })
    }
    componentWillUpdate() {
      console.log('---','component will update')
      
    }

    render() {
        const {article} = this.props
        const style = {width:'50%'}
        const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
      return(
        <div className="card mx-auto" style={style}>
          <div className="card-header">
            <h2 onClick={this.incrementCounter}>
                { article.title }
                clicked {this.state.count}
                <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
                <h6 className="card-subtitle text-muted">
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h6>
                { body }
          </div>
        </div>
      );
    }
    incrementCounter = () => {
      this.setState({
        count: this.state.count + 1
      })
    }

    handleClick = () =>{
     
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article




PureComponent отличается от обычного Component тем, что у него уже изначально реализовано - shouldComponentUpdate(nextProps, nextState), который изначально сравнивает все элементы props и все элементы state.

Таким образом будут работать все наши клики по заголовку и при этом если мы захотим поменять порядок статей у нас будет изменять всего две статьи - верхняя и нижняя.

Таким образом с помощью компонента shouldComponentUpdate мы можем оптимизировать наше приложение.

Тем не менее этим не следует злоупотреблять!

Как и любая другая оптимизация она должна применяться с умом!

PureComponent - может помочь оптимизировать наше приложение в тех местах, где это необходимо, но если вы будете расставлять его по всему приложение. то вы рискуете получить проблемы. Это возможно если ваш компонент зависит не только от props и state, или какой - либо дочерний элемент зависит не только от props и state, а окажется так, что вы этого не знали, то соответственно можете получить ряд багов, которые потом трудно будет искать и исправлять.

Вывод - используйте PureComponent только по назначению не злоупотребляя им!

Все статьи по React.js



Файлы, которые мы изменяли в этот раз:


Article.js (я его привел полностью со всеми изменениями этого поста выше)
                                                                                                                                                             

суббота, 12 мая 2018 г.

React.js (6) Жизненный цикл компонентов.

Ранее нас интересовали только то, как выглядит наш компонент для тех или иных props или state. Однако, в реальной жизни бывают более сложные задачи, когда нам хочется реагировать на разные события из жизни нашего компонента. Напрмер - его появление, изменения, исчезновение.



Все статьи по React.js



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

Сегодня мы разберемся с тем как его использовать и где он может быть полезен.

Жизненный цикл реакт компонентов можно условно разделить на три группы.

I. Первая группа - Инициализация.

Инициализация - когда наш компонент будет впервые помещаться вначале в виртуальный, а затем и в реальный DOM.

1) constructor(props)

React для этого вызовет ряд методов жизненного цикла и первый из них - конструктор. - constructor(props).

Мы его уже неявно использовали в Article.js с помощью экспериментального синтаксиса.


  import React, {Component} from 'react'

  class Article extends Component {
state = { isOpen: true }
render() { const {article} = this.props const style = {width:'50%'} const body = this.state.isOpen && <section className="card-text">{ article.text }</section> return( <div className="card mx-auto" style={style}> <div className="card-header"> <h2> { article.title } <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right"> {this.state.isOpen ? 'close' : 'open'} </button> </h2> </div> <div className="card-body"> <h6 className="card-subtitle text-muted"> "creation date : "{ (new Date(article.date)).toDateString()} </h6> { body } </div> </div> ); } handleClick = () =>{ console.log('---', 'clicked') this.setState({ isOpen: !this.state.isOpen }) } } export default Article


На самом деле Babel это перепишет вот таким образом:


  constructor(props) {
    super(props)

    this.state = {
      isOpen: true
    }
  }



Здесь super(props) - это вызов конструктора родительского класса. Это обязательно. А ниже this.state - инициализация состояния. Здесь, теоретически, мы можем сделать состояние компонента (isOpen: true) зависимым от props приходящих в конструктор.

Это считается не очень хорошей практикой и может привести к ряду проблем, которые будут осложнять разработку в дальнейшем. Но тем не менее, существует ряд задач которые без этого не решаются. Например: Мы хотим указать должна ли быть открыта статья по умолчанию, или нет.


  constructor(props) {
    super(props)

    this.state = {
      isOpen: props.defaultOpen
    }
  }


Тогда мы в props можем передать параметр props.defaultOpen. И теперь мы этот параметр будем передавать из Article.js в нашу статью (ArticleList/index.js)


  import React from 'react'
  import Article from '../Article'
  import './style.css'
  export default function ArticleList({articles}) {
        const articleElements = articles.map((article, index) =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article} defaultOpen = {index === 0}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
  }


Таким образом мы сделали открытой по умолчанию (инициализация компонента)только первую статью.



2) Затем вызовется компонент componentWillMount()

C ним мы можем взаимодействовать, реализовав это метод на классе.

Любой из методов жизненного цикла мы должны реализовать - например таким образом:

componentWillMount() {} - чтобы реагировать на соответствующее событие.

Стоит отметить, что методы жизненного цикла доступны исключительно для классовых компонентов ( обьявленые через class - например: class Article extends Component). Они недоступны для упрощенного синтаксиса - (например: function App() ). При реализации компонентов упрощенными методами у них нет ни состояния, ни жизненного цикла!



  import React, {Component} from 'react'

  class Article extends Component {
    constructor(props) {
      super(props)

      this.state = {
        isOpen: props.defaultOpen
      }
    }

componentWillMount() { console.log('---','mounting') }
render() { const {article} = this.props const style = {width:'50%'} const body = this.state.isOpen && <section className="card-text">{ article.text }</section> return( <div className="card mx-auto" style={style}> <div className="card-header"> <h2> { article.title } <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right"> {this.state.isOpen ? 'close' : 'open'} </button> </h2> </div> <div className="card-body"> <h6 className="card-subtitle text-muted"> "creation date : "{ (new Date(article.date)).toDateString()} </h6> { body } </div> </div> ); } handleClick = () =>{ console.log('---', 'clicked') this.setState({ isOpen: !this.state.isOpen }) } } export default Article


Если мы захотим использовать жизненный цикл для таких компонентов, то нам их придется переписать в вид class Article extends Component.

componentWillMount() - часто используется для получения необходимых данных. например - оправка запроса статьи на сервер.

3) Затем, вызывается метод - render()

render() должен быть чистым, т.е не содержать всяких setState, запросов к серверу. Единственная его задача - построить виртуальный DOM нашего компонента.

После построения виртуального DOMа, он будет помещен в реальный DOM и после этого вызовется метод componentDidMount().

4) componentDidMount()

Этим методом мы можем реагировать на появление нашего компонента в реальном DOM, на окончание его инициализации. Например: мы можем получить размеры или позиционирование узла (DOM Node) где он отображается, мы можем подписаться на изменение его данных или повесить собственные listener (слушатели событий) на соответствующие DOM элементы.

II. Обновление

Обновление может происходить по двум причинам. Либо у нас произошел setState() внутри компонента (например изменилось isOpen с true на false) , либо setState() произошел у кого-то из "родителей" компонента. Если setState() произошел у кого-то из "родителей", тогда компонент (например ArticleList) перестраивает собственное дерево, в том числе перестраивает и все дочерние компоненты.

1) componentWillReceiveProps(nextProps)

Когда Reac будет перестраивать виртуальное дерево для статьи Reac вызовет метод для статьи componentWillReceiveProps(nextProps), в который передаст новые проперти с которыми строится виртуальный DOM.

Обратите внимание, что это не означает. что проперти на самом деле поменялись. React не делает никаких предположений о наших данных. Они могли остаться неизменными. Для этого в аргументы передается объект - nextProps, который мы можем сравнить с текущими проперти (this.props).

У этого метода существует два распространенных примеры использования.

Первое - у нас поменялись какие-то важные данные и нам необходимо на это отреагировать. Скажем, пришла новая статья и нам необходимо загрузить для нее данные с сервера.

Второе - если мы завязали наше состояние компонента на проперти. Теперь нам придется следить за их изменениями и возможно приводить состояние State к нужному виду.

Давайте для примера добавим возможность поменять порядок статей.

Для этого перепишем App.js Нам нужно поменять function App на class App extends Component чтобы добавить ему состояние. И добавим кнопку по которой будем менять это состояние.
App.js


  import React, {Component} from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  class App extends Component {
    state = {
      reverted: false
    }
    render(){
      return (
        <div className="container">
          <div className="jumbotron">
            <h1 className="display-3">
                App name
                <button className="btn" onClick = {this.revert}>Revert</button>
            </h1>
          </div>  
            <ArticleList articles={this.state.reverted ?articles.reverse() : articles}/>
        </div>
      );
    }
    revert = () => this.setState({
      reverted: !this.state.reverted
    })
  }
  export default App



Теперь при клике по кнопке статьи меняются местами (реверс), но при этом открытой остается одна статья, которая изначально первая.



Так происходит потому что статьи не инициализируются заново. Они просто отображаются в другом порядке. Теперь, не смотря на то, что в "первую статью" (при реверсе) пришло свойство defaultOpen: true, мы не привели состояние к нужному виду.

Для этого мы реализуем метод componentWillReceiveProps(nextProps) и приведем состояние к нужному виду:
Article.js

  import React, {Component} from 'react'

  class Article extends Component {
    constructor(props) {
      super(props)

      this.state = {
        isOpen: props.defaultOpen
      }
    }

    componentWillMount() {
      console.log('---','mounting')
    }

    componentWillReceiveProps(nextProps) {
      if(nextProps.defaultOpen !== this.props.defaultOpen) this.setState({
        isOpen: nextProps.defaultOpen
      })
    }
    render() {
        const {article} = this.props
        const style = {width:'50%'}
        const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
      return(
        <div className="card mx-auto" style={style}>
          <div className="card-header">
            <h2>
                { article.title }
                <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
                <h6 className="card-subtitle text-muted">
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h6>
                { body }
          </div>
        </div>
      );
    }
    handleClick = () =>{
      console.log('---', 'clicked')
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article



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

Здесь все еще есть небольшой баг (множественного нажатия на кнопку) но мы с ним разберемся позднее.

2) Следующий элемент жизненного цикла - shouldComponentUpdate()

shouldComponentUpdate() - метод, который позволяет нам оптимизировать наше приложение, в ручном режиме управляя тем, нужно ли перестраивать виртуальный DOM для этого компонента или нет.

Подробнее о нем мы поговорим в следующих постах.

После него вызывается...

3) componentWillUpdate(nextProps, nextState)

Этот метод предупреждает нас о том. что сейчас мы будем перестраивать виртуальный DOM для данного копонента. У нас уже есть готовые Props и State , и здесь мы можем аналогичным образом отреагировать на какие-то изменения. Например: если статья у нас была закрыта, а стала открыта т.е. у нас поменялся State isOpen, и мы хотим загрузить текст для данной статьи.

Еще одни важный нюанс.
componentWillReceiveProps(nextProps) будет вызываться исключительно тогда. если у нас перестраивается кто-то из родителей и у нас могли поменяться Props.

shouldComponentUpdate() и componentWillUpdate(nextProps, nextState) будет вызываться независимо от того перестраивается кто-то из родителей, или у нас произошел setState() в нашем компоненте
Поcмотрим на примере Article.js

 componentWillReceiveProps(nextProps) {
     console.log("---",'will receive props')
    if(nextProps.defaultOpen !== this.props.defaultOpen) this.setState({
      isOpen: nextProps.defaultOpen
    })
  }



Добавим ниже:


  componentWillUpdate() {
    console.log('---','component will update')
    
  }



Теперь откроем консоль в нашем приложении. Вы увидите. что когда у нас перестраивается виртуальный дом всего нашего приложения (нажимаем кнопку - Revert) у нас будет вызываться component will receive props и component will update для всех наших статей.



А если мы будем просто открывать и закрывать статья (кнопка статьи Open/Close), то будет вызываться только component will update.



После метода componentWillUpdate(nextProps, nextState) будет вызываться метод render().

4) Метод render()

Перестраивается виртуальное дерево. Сравнивается с прошлым виртуальным деревом. Все необходимые изменения вносятся в реальный DOM и после этого вызывается componentDidUpdate()

5) Метод - componentDidUpdate(prevProps, prevState)

в этом методе есть также доступ к прошлым prevProps и prevState и к современным props и state. Единственное что, так это то, что прошлые теперь будут жить в аргументах функции, а современные - this.props и this.state чаще всего используются если вас интересуют какие-либо составляющие реального DOM. Например: размер вашего компонента в каждый момент времени или его позиционирование на экране.

III. Удаление - смерть компонента

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

Единственный метод который здесь вызовется - componentWillUnmount(), который предупредит нас об этом.Это идеальное место для того, чтобы подчистить какие то подписки, возможно, на события в реальном DOM, возможно на изменения данных. Любые подписки которые вы делали и собственно - провести всю логику деструктуризации вашего компонента.

Все статьи по React.js



Файлы, которые мы изменяли в этот раз:



App.js

  import React, {Component} from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  class App extends Component {
    state = {
      reverted: false
    }
    render(){
      return (
        <div className="container">
          <div className="jumbotron">
            <h1 className="display-3">
                App name
                <button className="btn" onClick = {this.revert}>Revert</button>
            </h1>
          </div>  
            <ArticleList articles={this.state.reverted ?articles.reverse() : articles}/>
        </div>
      );
    }
    revert = () => this.setState({
      reverted: !this.state.reverted
    })
  }
  export default App




Article.js

  import React, {Component} from 'react'

  class Article extends Component {
    constructor(props) {
      super(props)

      this.state = {
        isOpen: props.defaultOpen
      }
    }

    componentWillMount() {
      console.log('---','mounting')
    }

    componentWillReceiveProps(nextProps) {
       console.log('---','will receive props')
      if(nextProps.defaultOpen !== this.props.defaultOpen) this.setState({
        isOpen: nextProps.defaultOpen
      })
    }
    componentWillUpdate() {
      console.log('---','component will update')
      
    }

    render() {
        const {article} = this.props
        const style = {width:'50%'}
        const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
      return(
        <div className="card mx-auto" style={style}>
          <div className="card-header">
            <h2>
                { article.title }
                <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
                <h6 className="card-subtitle text-muted">
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h6>
                { body }
          </div>
        </div>
      );
    }
    handleClick = () =>{
      console.log('---', 'clicked')
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article




index.js

  import React from 'react'
  import Article from '../Article'
  import './style.css'
  export default function ArticleList({articles}) {
        const articleElements = articles.map((article, index) =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article} defaultOpen = {index === 0}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
  }



                                                                                                                                                             


Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com