четверг, 20 июля 2017 г.

Что необходимо знать
Junior React Developer-у
при устройству на работу.

Нашел вразумительные требования для разработчика здесь: https://toster.ru/q/408785

React
0) Какую проблему решает react ?

1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?

2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...

3) В каких методах жизненного цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?

4) Что будет если вызвать this.setState в render методе компонента?

5) Зачем нужен componenWIllUnmount, приведите пример.

6) Контролируемые, не контролируемые компоненты

7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*

8) Зачем нужны propTypes? Что происходит с ними в production сборке?

9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)




Redux
0) Какую проблему решает redux?


1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...

2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*

3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)

4) Как компоненты приложения получают "пропсы" из "стора"?*


5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?

6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.

6.5) А так же, "как в js вообще это работает?".

Например:
let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?


7) Что возвращает функция connect (из react-redux)?




Общее:
0) package.json
1) Webpack, gulp, etc...
2) Node.js
3) Promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер.
2) Почему не работает следующий код, сделайте чтобы работало

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

p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.    




React:

0) Какую проблему решает react ?

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


1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?

Судя по официальной документации setState () является скорее запросом, чем немедленной командой для обновления компонента. Для лучшей производительности React может задержать ее, а затем обновить несколько компонентов за один проход. React не гарантирует немедленного применения изменений состояния. На вопрос "как гарантировано получить текущее состояние и обновить его" подробно отвечают здесь, если вкратце то просто передать функцию в setState, которая в момент выполнения обратиться к текущему state и обновит его:
submit(){
   this.setState((prevState, props)=>{
      return {showForm: !prevState.showForm}
   });
}

2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...

Судя по изложенному здесь:
React и ES6 - Часть 3, Биндинг методов в классах React (включая ES7)
Function.prototype.bind()
в случае с React если вызвать напрямую this.myFunction то this будет undefined, так как функция вызывается не в контексте класса, а в контексте объекта класса. Поэтому приходится биндить функции члены класса к текущему контексту в конструкторе, в момент создания объекта класса, чтобы объект увидел функции описанные в классе. Самый короткий варинат записи с использованием es7 и функцией стрелкой выглядит так:
myFunc = () => {код функции};
И писать ее нужно уже не в конструкторе, а прямо в теле класса.

3) В каких методах жизненного цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?

В какой момент жизненного цикла применяется AJAX запрос и почему?
AJAX запросы должны идти в момент события componentDidMount.

Для этого есть несколько причин:
- Следующая реализация алгоритма сверки в React будет иметь возможность запускать и останавливать рендеринг для повышения производительности. Одним из компромиссов является то, что componentWillMount, другой цикл событий, где, возможно, стоит реализовать AJAX-запрос, будет “не детерминированным”. Это означает то, то React может начать вызывать componentWillMount в разное время, когда он чувствует в этом необходимость. Это, очевидно, плохая формула для создания AJAX-запроса.

- Вы не можете гарантировать, что AJAX-запрос не будет разрешен (resolve) перед моментом монтирования компонента. Если да, то это будет означать, что вы пытаетесь выполнить setState над демонтированным компонентом, который не только не работает, но и сам React будет ругаться на вас. Делайте AJAX-запросы в componentDidMount, чтобы гарантировать, что есть компонент для обновления.
Проще говоря, если ваш запрос приносит новые данные и они должны отразиться в данном компоненте, то компонент должен быть отрендерен, о чем нам и сообщает событие componentDidMount.

А обновлять state из приходящих props надо в componentWillReceiveProps(nextProps), где приходят новые props и который вызывается до монтирования в компонент новых пропсов. Жизненный цикл компонента

4) Что будет если вызвать this.setState в render методе компонента?

setState вызовет обновление компонента, что повлечет снова вызов метода render, который снова вызовет setState, и процесс зациклится.

5) Зачем нужен componenWIllUnmount, приведите пример.

componenWIllUnmount вызывается перед удалением компонента из виртуального DOM дерева, что может расцениваться как деструктор в других языках. Функции очистки памяти, удаления неиспользуемых объектов могут быть вызваны в componenWIllUnmount
пример таймер обновления сообщений в чате и его очистка:
componentDidMount: function(){
    this.timer = setInterval(this.tick, 50);
},
componentWillUnmount: function(){
    clearInterval(this.timer);
}

6) Контролируемые, не контролируемые компоненты

В чем разница между controlled и uncontrolled компонентами? Контейнеры и компоненты Проще говоря, контролируемые компоненты работают через стейты, получают и пишут данные обычно в стейты. А Неконтролируемые компоненты работают напрямую с виртуальным DOM деревом, обычно через ссылку ref. Дух React делает упор на контролируемых компонентах.

7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*

React-Router в общем определении можно назвать набором компонентов определяющих на основе текущего пути, какой компонент будет выводиться.
Можно разделить 2 версии роутера - 3ю и 4ю. В 4й версии упор сделан больше на декларативный стиль и роутер должен быть компонентом верхнего уровня во всех компонентах (на мой взгляд порог вхождения в 4й роутер выше чем в 3й, возможно из-за новизны и небольшого числа источников информации об особенностях 4го роутера).

React-Router v3.x
react-урок-5-маршрутизация
Погружение в React: роутер
ReactTraining v3. docs
<Router>
  <Route path="/" component={Home} />
  <Route path="/users" component={Users} />
  <Route path="/widgets" component={Widgets} />
</Router>


React-Router v4.x
react-router v4.x.x – заметки по использованию
react-router v4.x.x – заметки по использованию
Простой туториал React Router v4
Мигрантам с 3го на 4й
https://reacttraining.com
<BrowserRouter>
  <div>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/about' render={() => <h1>About</h1>}/>
      <Route render={() => <h1>Page not found</h1>}/> 
    </Switch>
  </div>
</BrowserRouter>



8) Зачем нужны propTypes? Что происходит с ними в production сборке?

propTypes задают типы входных параметров для отрисовываемого компонента, чтобы в случае несовпадения, например вместо числа пришла строка получить ошибку в react-dev-tools и отловить этот момент во время выполнения. Это была встроенная возможность контроля типов для больших приложений, но с недавнего времени вынесена в отдельный пакет.

PropTypes — проверка типов в React
MyComponent.propTypes = {
  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number
}

9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)

React devtools поставляется в двух видах, отдельным пакетами и расширением для популярных браузеров. В расширении можно увидеть изменения состояний приложения и узлы виртуального DOM-дерева.
Добавляем redux-dev-tools
React Developer Tools
Также отлаживать можно в:
IDE WebStorm: Отладка внутри IDE WebStorm
Visual Studio Code: Как настроить отладку CRA внутри VSCode


Redux



0) Какую проблему решает redux?

Работа с Redux С ростом сложности веб-приложений усложняется задача обновления и вывода их базовых данных. Многие подходы по управлению этими данными приводят к сложной паутине представлений. Эти представления могут прослушивать обновления различных моделей, отправляющих свои изменения еще большему количеству представлений. Все это оставляет разработчиков с непрозрачным и непредсказуемым кодом, который практически невозможно изменить, не забыв при этом прикрепить прослушиватель к какому-нибудь важному элементу. Redux предоставляет механизм взаимодействия компонентов любого уровня между собой через хранилище, что позволяет сосредоточиться не на взаимодействии дочерних и родительских частей, а на логике самого приложения.
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...

NAME_REQUEST / NAME_SUCCESS / NAME_FAILURE всего лишь общепринятый шаблон именования идентификаторов действий. Просто для понятности при отладке, вывалился запрос с ошибкой или прошел успешно и пришедшие данные стоит считывать.
В стандартной парадигме flux действие это плоский JS объект, имеющий поле type. Действие может иметь свойства error, property,meta. Других полей объект действия иметь не должен. Создатель действия это функция, возвращаемый результат которой - объект Действие.
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*

Редьюсер это синглтон шаблон проектирования, проще говоря единственный объект хранящий все состояние приложения, в актуальном виде.
Написание редьюсера сводиться к созданию глобального объекта с функциями записи чтения его свойств, и диспетчеризации шины сообщений между взаимодействующими компонентами.
В более сложном приложении Вы, скорее всего, будете иметь разные сущности, которые будут ссылаться друг на друга. Мы советуем поддерживать состояние (state) в настолько упорядоченном виде, насколько это возможно. Старайтесь не допускать никакой вложенности. Держите каждую сущность в объекте, который хранится с ID в качестве ключа. Используйте этот ID в качестве ссылки из других сущностей или списков. Думайте о состоянии приложения (apps state), как о базе данных.
Изучаем Redux на примере создания мини-Redux Structuring Reducers
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)

redux-thunk позволяет сделать вызов Действий асинхронным. redux-thunk возвращает функцию вместо действия.
Асинхронные actions
Сам action возвращающий функцию:
export function getPhotos(year) {
  return (dispatch) => {
    dispatch({
      type: GET_PHOTOS_REQUEST
    })

    $.ajax(url)
      .success(
        dispatch({
          type: GET_PHOTOS_SUCCESS,
          payload: response.photos
        })
      )
      .error(
        dispatch({
          type: GET_PHOTOS_FAILURE,
          payload: response.error,
          error: true
        })
      )
  }
}
, которая будет выполнена если она функция или возвращен плоски объект action-если он не функция.

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function' ?
      action(dispatch, getState) :
      next(action);
}
module.exports = thunkMiddleware


4) Как компоненты приложения получают "пропсы" из "стора"?*

Вызывается функция связывания 'connect'. Функция связывает экспортируемый компонент с функцией меппинга данных стора на параметры props.
function mapStateToProps (state) {
  return {
    user: state.user
  }
}
export default connect(mapStateToProps)(App)

5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?

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

6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.

Возвращение новых объектов это идеология Immutable приложения, с однонаправленным потоком данных. Это дает:
Простое и быстрое отслеживание изменений.
Возьмем пример с state. После модификации объекта state нужно сравнить его с объектом nextState и узнать, что конкретно в нем изменилось. Иммутабельность сильно упрощает нам задачу: вместо того, чтобы сравнивать значение каждого поля каждого вложенного в state объекта с соответствующим значением из nextState, можно просто сравнивать ссылки на соответствующие объекты и отсеивать таким образом целые вложенные ветки сравнений.

Безопаснее использовать и легче тестировать.
Если пришедшие данные испорчены, то в момент сравнения со старым стейтом, можно это выявить.

Например если добавлять элемент в массив push-ом и возвращать его то это будет тот же самый объект, а если вызовом concat то будет создан новый массив-копия оригинала и к нему будет добавлен элемент. Это так называемый неизменяющий метод.
Не изменяйте состояние, а копируйте его

6.5) А так же, "как в js вообще это работает?".
Например:
let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?


obj2-получит ссылку на obj1 и сможет изменять все поля, на которые указывает obj1. Поэтому в obj1.name будет сидеть 'Test_new'. а равны объекты будут, когда obj1 и obj2 будут ссылаться на разные объекты, но все значения полей объектов будут равны.


7) Что возвращает функция connect (из react-redux)?

connect декоратор возвращает компонент-контейнер. Компоненты-контейнеры существуют для того, чтобы презентационные компоненты могли сосредоточиться на представлении и не думать о состоянии. Они также передают состояние в дочернее представление как свойства. И это именно то, что делает connect() — передает состояние (через свойства) в презентационный компонент и возвращает компонент-обертку для презентационного компонента. По сути эта обертка и есть компонент-контейнер.
Пропуск контейнера

Общее



0) package.json

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет, даже если вы не собираетесь публиковать его. Способ использования файла package.json зависит от того, собираетесь ли вы скачивать пакет или публиковать его.
простейший вид выглядит так:
{
  "devDependencies": {
    "название пакета из репозитория npmjs.com": "Версия пакета",
    "еще пакет": "1.0.1"
  }
}
В папке с файлом package.json вызывается команда 'npm i' и пакеты скачиваются из репозитория в папку node_modules в готовом для использования виде

1) Webpack, gulp, etc...

Webpack можно охарактеризовать, как “сборщик модулей”. Он берет JavaScript модули с необходимыми зависимостями, и затем соединяет их вместе как можно более эффективным способом, на выходе создавая единый JS-файл.
Введение в Webpack, часть 1


Gulp - это инструмент, который помогает автоматизировать рутинные задачи веб-разработки.
Gulp для самых маленьких - подробное руководство
Gulp предназначен для решения таких задач, как:
  1. Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта;
  2. Использование различных JavaScript, CSS и HTML препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade и т.д.);
  3. Минификация CSS и JS кода, а также, оптимизация и конкатенация отдельных файлов проекта в один;
  4. Автоматическое создание вендорных префиксов (приставок к названию CSS свойства, которые добавляют производители браузеров для нестандартных свойств) для CSS.
  5. Управление файлами и папками в рамках проекта - создание, удаление, переименование;
  6. Запуск и контроль выполнения внешних команд операционной системы;
  7. Работа с изображениями - сжатие, создание спрайтов, ресайз (png, jpg, svg и др.);
  8. Деплой (отправка на внешний сервер) проекта по FTP, SFTP, Git и т.д.
  9. Подключение и использование в проекте безгранично большого количества Node.js и Gulp утилит, программ и плагинов.
  10. Создание различных карт проекта и автоматизация другого ручного труда.



Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Grunt
2) Node.js

Node или Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера. В основе Node.js лежит событийно-ориентированное и асинхронное (или реактивное) программирование с неблокирующим вводом/выводом.
Скринкаст
3) Promise

В своей основе обещания (Promise) слегка похожи на события за исключением:
  • Обещание может завершиться только один раз, либо успехом, либо ошибкой, и другого не дано. Оно не может выполниться дважды.
  • Если обещание выполнится, и ты только после этого передашь ему колбэк, он отработает, не взирая на то, что событие уже давно произошло.

Это чрезвычайно удобно для асинхронных запросов, т.к. неинтересно, когда там это именно случилось, а интересно обработать результаты произошедшего. Promise Также общения можно строить в пул:
Promise.all(Promise1,Promise2...).than(()=>{alert('all ok');}).catch((err)=>{console.log(err);});

Что-нибудь практическое

:

1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер.

Есть интересное решение для валидации компонентов чтобы при перерендеринге компоненты не теряли свойства - Весь компонент форм построен по принципу единой шины обмена событиями, где сама форма и поля ввода используют один и тот же канал для обмена данными о состоянии модели и валидации. Валидация форм на React JS by Ast
Этот метод хорошо подходят для динамических форм изменяющихся в процессе ввода данных.

А это более простой пример с привязкой к props: Валидация форм в ReactJS
2) Почему не работает следующий код, сделайте чтобы работало

Во-первых в коде функция обработчик находится вне контекста, и ее надо забиндить в конструкторе к this
constructor(props) {
    super(props)
    this.state = {
      count: 1
    }
    this.handler=this.handler.bind(this);
  }

Во вторых инкремент state выполняется после присвоения в count и нужно просто перенести знак налево
  handler() {
    this.setState({count: ++this.state.count})
  }


ответы были подобраны в соответствии с моим понимаем Juniora основ Reacta.

1 комментарий:

  1. Stainless Steel Parts, Titanium Grinder For Sale
    Parts - gr5 titanium Stainless titanium spork Steel Parts & columbia titanium boots Parts | Stainless mens titanium braclets Steel Parts & Accessories. titanium ore Stainless Steel Parts & Accessories. Rating: 3.6 · ‎1 review · ‎$6.95

    ОтветитьУдалить