GitBook: [master] 29 pages and 2 assets modified

Author: exceedbook

.gitbook/assets/img_20191010_173537.jpg renamed to .gitbook/assets/assets_-ltzjgf3bnjolseyexe__-luow2ajwakuytgs8yol_-luoxkuamavfkfqzc93s_img_20191010_173537.jpg

@@ -1,13 +1,15 @@
 # Вступление
 
-Данная ~~книга~~ статья посвящена для помощи всех желающих научиться писать компоненты на `React` с использованием хуков и обучению основам работы с `Redux` . 
+Данная ~~книга~~ статья посвящена для помощи всех желающих научиться писать компоненты на `React` с использованием хуков и обучению основам работы с `Redux` .
 
 Актуальность темы заключается в том, что фронтенд — одно из наиболее динамично развивающихся направлений современной разработки, а `react` одна из популярнейших технологий разработки веб-сайтов.
 
 Для осуществления обозначенной цели служат следующие задачи:
 
-1. описание [основ](https://vrogov-exceedteam.gitbook.io/react-hooks-redux/react/vstuplenie) использования `хуков`;
-2. [практика](https://vrogov-exceedteam.gitbook.io/react-hooks-redux/react/react-hooks) написания компонентов на `хуках`;
-3. [изучение](https://vrogov-exceedteam.gitbook.io/react-hooks-redux/redux-1/sho-take-redaks) `redux`;
-4. [добавление](https://vrogov-exceedteam.gitbook.io/react-hooks-redux/redux-1/redux) `redux` в проект.
+1. описание основ использования `хуков`;
+2. практика написания компонентов на `хуках`;
+3. изучение `redux`;
+4. добавление `redux` в проект.
+
+
 

README.md

@@ -2,39 +2,39 @@
 
 * [Вступление](README.md)
 
-## React hooks <a id="react"></a>
-
-* [Введение в хуки](react/vstuplenie.md)
-* [Основные хуки](react/osnovy/README.md)
- * [Хук состояния \(useState\)](react/osnovy/khuk-sostoyaniya-usestate.md)
- * [Хук эффекта \(useEffect\)](react/osnovy/khuk-effekta-useeffect.md)
- * [Хук колбека \(useCallback\)](react/osnovy/khuk-kollbeka-usecallback.md)
- * [Хук рефа \(useRef\)](react/osnovy/khuk-refa-useref.md)
-* [Создание собственных хуков](react/sozdanie-sobstvennykh-khukov.md)
-* [Правила использования хуков](react/pravila-ispolzovaniya-khukov.md)
-* [Полезная информация](react/chto-dalshe/README.md)
- * [Хук мемоизированного значения \(useMemo\)](react/chto-dalshe/khuk-memoizirovannogo-znacheniya-usememo.md)
- * [Как закешировать вычисления?](react/chto-dalshe/kak-zakeshirovat-vychisleniya.md)
- * [Как получить предыдущие пропсы или состояние?](react/chto-dalshe/kak-poluchit-predydushie-propsy-ili-sostoyanie.md)
- * [Как осуществлять запросы за данными с помощью хуков?](react/chto-dalshe/kak-osushestvlyat-zaprosy-za-dannymi-s-pomoshyu-khukov.md)
-* [Задание React Hooks](react/react-hooks.md)
-
-## Redux <a id="redux-1"></a>
-
-* [Что такое Redux](redux-1/sho-take-redaks.md)
-* [Основы](redux-1/untitled/README.md)
- * [Действия \(Actions\)](redux-1/untitled/deistviya-actions.md)
- * [Генераторы действий \(Action Creators\)](redux-1/untitled/generatory-deistvii-action-creators.md)
- * [Редюсеры \(Reducers\)](redux-1/untitled/redyusery-reducers.md)
- * [Хранилище \(Store\)](redux-1/untitled/khranilishe-store.md)
- * [Получение доступа к actions и state с помощью функции connect\(\)](redux-1/untitled/poluchenie-dostupa-k-state-iz-funkcii-mapdispatchtoprops.md)
- * [Подключение Redux](redux-1/untitled/podklyuchenie-redux.md)
-* [Что дальше?](redux-1/chto-dalshe/README.md)
- * [Использование Redux с React Router](redux-1/chto-dalshe/ispolzovanie-redux-s-react-router.md)
- * [Асинхронные действия \(Async Actions\)](redux-1/chto-dalshe/asinkhronnye-deistviya-async-actions.md)
-* [Задание Redux](redux-1/redux.md)
-
-## FAQ <a id="fakyu"></a>
-
-* [Заключение](fakyu/zaklyuchenie.md)
+## REACT HOOKS
+
+* [Введение в хуки](react-hooks/vvedenie-v-khuki.md)
+* [Основные хуки](react-hooks/osnovnye-khuki/README.md)
+ * [Хук состояния \(useState\)](react-hooks/osnovnye-khuki/khuk-sostoyaniya-usestate.md)
+ * [Хук эффекта \(useEffect\)](react-hooks/osnovnye-khuki/khuk-effekta-useeffect.md)
+ * [Хук колбека \(useCallback\)](react-hooks/osnovnye-khuki/khuk-kolbeka-usecallback.md)
+ * [Хук рефа \(useRef\)](react-hooks/osnovnye-khuki/khuk-refa-useref.md)
+* [Создание собственных хуков](react-hooks/sozdanie-sobstvennykh-khukov.md)
+* [Правила использования хуков](react-hooks/pravila-ispolzovaniya-khukov.md)
+* [Полезная информация](react-hooks/poleznaya-informaciya/README.md)
+ * [Хук мемоизированного значения \(useMemo\)](react-hooks/poleznaya-informaciya/khuk-memoizirovannogo-znacheniya-usememo.md)
+ * [Как закешировать вычисления?](react-hooks/poleznaya-informaciya/kak-zakeshirovat-vychisleniya.md)
+ * [Как получить предыдущие пропсы или состояние?](react-hooks/poleznaya-informaciya/kak-poluchit-predydushie-propsy-ili-sostoyanie.md)
+ * [Как осуществлять запросы за данными с помощью хуков?](react-hooks/poleznaya-informaciya/kak-osushestvlyat-zaprosy-za-dannymi-s-pomoshyu-khukov.md)
+* [Задание React Hooks](react-hooks/zadanie-react-hooks.md)
+
+## REDUX
+
+* [Что такое Redux](redux/chto-takoe-redux.md)
+* [Основы](redux/osnovy/README.md)
+ * [Действия \(Actions\)](redux/osnovy/deistviya-actions.md)
+ * [Генераторы действий \(Action Creators\)](redux/osnovy/generatory-deistvii-action-creators.md)
+ * [Редюсеры \(Reducers\)](redux/osnovy/redyusery-reducers.md)
+ * [Хранилище \(Store\)](redux/osnovy/khranilishe-store.md)
+ * [Получение доступа к actions и state с помощью функции connect\(\)](redux/osnovy/poluchenie-dostupa-k-actions-i-state-s-pomoshyu-funkcii-connect.md)
+ * [Подключение Redux](redux/osnovy/podklyuchenie-redux.md)
+* [Что дальше?](redux/chto-dalshe/README.md)
+ * [Асинхронные действия \(Async Actions\)](redux/chto-dalshe/asinkhronnye-deistviya-async-actions.md)
+ * [Использование Redux с React Router](redux/chto-dalshe/ispolzovanie-redux-s-react-router.md)
+* [Задание Redux](redux/zadanie-redux.md)
+
+## FAQ
+
+* [Заключение](faq/zaklyuchenie.md)
 

SUMMARY.md

@@ -0,0 +1,9 @@
+# Заключение
+
+Итак, теперь вы изучили основы React hooks и теперь знаете как использовать менеджер состояния Redux, но что делать дальше?
+
+![](../.gitbook/assets/2300883_3.jpg)
+
+Искать интересные статьи, которые поднимут ваши навыки и знания React.js на новый уровень![ 
+](https://app.gitbook.com/@vrogov-exceedteam/s/react-hooks-redux/redux-1/redux)
+

faq/zaklyuchenie.md

@@ -0,0 +1,17 @@
+# Основные хуки
+
+В этом разделе рассмотрим основные хуки с которыми приходится работать постоянно:
+
+1. Хук состояния - `useState`
+2. Хук жизненного цикла \(эффекта\) - `useEffect`
+3. Хук коллбека - `useCallback`
+4. Хук рефа - `useRef`
+
+#### 
+
+#### 
+
+#### 
+
+#### 
+

react-hooks/osnovnye-khuki/README.md

@@ -0,0 +1,83 @@
+---
+description: >-
+ будет гарно если человек увидит все варианты жизненных циклов с помощью этого
+ хука - це Дима
+---
+
+# Хук эффекта \(useEffect\)
+
+`useEffect` - выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React-классах, но объединяет их в единый API.
+
+### useEffect как componentDidUpdate
+
+```jsx
+function showMyStatus(props) {
+ const [isOnline, setIsOnline] = useState(false);
+ useEffect(() => {
+ function handleStatusChange(status) {
+ setIsOnline(status.isOnline);
+ }
+
+ //делаем что-то для обновления статуса, например:
+ API.login(props.id, handleStatusChange);
+ });
+ 
+ return (
+ <div> Status: {isOnline ? 'Online' : 'Offline'} </div>
+ );
+}
+```
+
+**Что же делает `useEffect`?** Используя этот хук, мы говорим React сделать что-то после рендера. React запомнит функцию \(эффект\) и вызовет её после того, как внесёт все изменения в DOM.
+
+Если необходимо чтобы React _пропускал_ вызов эффекта, если определённые значения остались без изменений между последующими рендерами, передайте массив в `useEffect` вторым необязательным аргументом так:
+
+```jsx
+useEffect(() => {
+ document.title = `Вы нажали ${count} раз`;
+}, [count]); // Перезапускать эффект только если count поменялся
+```
+
+Рассмотрим варианты использования хука эффекта более подробно.
+
+### useEffect как componentDidMount
+
+`componentDidMount()` вызывается один раз, сразу после монтирования компонента. Инициализация, требующая доступа к узлам DOM, должна находиться здесь. Если вам нужно загружать данные с удаленного источника, это хорошее место для инициирования сетевого запроса.
+
+Чтобы реализовать метод `componentDidMount()` с помощью `useEffect`, достаточно передать в пустой массив вторым аргументом в `useEffect`.
+
+```jsx
+function counter(props) {
+ const [state, setState] = useState(0);
+ useEffect(() => {
+ setState(0);
+ }, []);
+ 
+ return (
+ <div> Count: {state} </div>
+ );
+}
+```
+
+Таким образом useEffect вызывается один раз, сразу после монтирования компонента.
+
+### useEffect как componentWillUnmount
+
+`сomponentWillUnmount()` вызывается непосредственно перед демонтированием и уничтожением компонента.
+
+Чтобы повторить `сomponentWillUnmount()` , необходимо возвращать в `useEffect` функцию отчистки:
+
+```jsx
+ ...
+ 
+ useEffect(() => {
+ document.addEventListener('mousedown', handleClick, false);
+ 
+ return () => {
+ document.removeEventListener('mousedown', handleClick, false);
+ };
+ }, []);
+ 
+ ...
+```
+

react-hooks/osnovnye-khuki/khuk-effekta-useeffect.md

@@ -0,0 +1,49 @@
+# Хук колбека \(useCallback\)
+
+`useCallback` - Возвращает мемоизированный колбэк.
+
+> **Мемоизация** \(запоминание, от англ. memoization\) — в программировании сохранение результатов выполнения функций для предотвращения повторных вычислений. Это один из способов оптимизации, применяемый для увеличения скорости выполнения компьютерных программ. Перед вызовом функции проверяется, вызывалась ли функция ранее:
+>
+> * если не вызывалась, то функция вызывается, и результат её выполнения сохраняется;
+> * если вызывалась, то используется сохранённый результат.
+
+`useCallback` принимает в качестве аргументов встроенный колбэк и массив зависимостей. Возвращает мемоизированную версию колбэка, который изменяется только, если изменяются значения одной из зависимостей:
+
+```jsx
+const memoizedCallback = useCallback(
+ () => {
+ doSomething(a, b);
+ },
+ [a, b],
+);
+```
+
+Пример:
+
+```jsx
+function renderInput() {
+ const [value, setValue] = useState();
+ const [secondInput, setSecondInput] = useState();
+ const callbackCach = useCallback(e => setValue(e.target.value), []);
+ return (
+ <div>
+ <h1>Callbacks caching examples:</h1>
+
+ <div className="part">
+ <h3>Using useCallback hook:</h3>
+ <Input onChange={callbackCach} />
+ <p>Input value is: {value}</p>
+ </div>
+
+ <div className="part">
+ <h3>Without useCallback hook:</h3>
+ <Input onChange={e => setSecondInput(e.target.value)} />
+ <p>Input value is: {secondInput}</p>
+ </div>
+ </div>
+ );
+}
+```
+
+В этом примере `useCallback` возвращает закешированную функцию \(то есть ссылка не изменяется от рендера к рендеру\). Помимо функции, которую нужно кешировать, в нее передан второй аргумент — пустой массив. Этот массив позволяет передать список полей, при изменении которых необходимо изменить функцию, т.е. вернуть новую ссылку.
+

react-hooks/osnovnye-khuki/khuk-kolbeka-usecallback.md

@@ -0,0 +1,35 @@
+# Хук рефа \(useRef\)
+
+`useRef` - возвращает изменяемый ref-объект, свойство `.current` которого инициализируется переданным аргументом \(`initialValue`\). Возвращённый объект будет сохраняться в течение всего времени жизни компонента.
+
+```jsx
+const refContainer = useRef(initialValue);
+```
+
+Давайте посмотрим пример использования useRef\(\) hook:
+
+```jsx
+function TextInputWithFocusButton() {
+ const [name, setName] = useState('');
+ const nameRef = useRef(null);
+ const onButtonClick = () => {
+ // `current` указывает на смонтированный элемент `input`
+ setName(nameRef.current.value);
+ };
+ return (
+ <div>
+ <p>{name}</p>
+ 
+ <input ref={nameRef} type="text" />
+ <button onClick={onButtonClick}>Задать имя</button>
+ </div>
+ );
+}
+```
+
+В приведенном выше примере мы используем `useRef` в сочетании с `useState`, чтобы отрендерить значение `input` в тег `p`.
+
+Ref создается в переменной `nameRef`. Затем переменную `nameRef` можно использовать в `input`, задав как `ref`. По существу, это означает, что теперь поле ввода будет доступно через `ref`.
+
+`setName` будет использоваться для установки state `name`. Чтобы извлечь имя из тега `input`, мы читаем значение `nameRef.current.value`.
+

react-hooks/osnovnye-khuki/khuk-refa-useref.md

@@ -0,0 +1,26 @@
+# Хук состояния \(useState\)
+
+`useState` — вызывается, чтобы наделить наш функциональный компонент внутренним состоянием. React будет хранить это состояние между рендерами.
+
+```jsx
+function Counter (props) {
+ const [count, setCounter] = useState(0);
+
+ return (
+ <Button onClick={() => setCounter(count + 1)}>Count {count} </Button>
+ );
+}
+```
+
+Вызов `useState` возвращает две вещи: _текущее_ значение состояния и функцию для его обновления. Эту функцию можно использовать где угодно, например, в обработчике событий. Она схожа с `this.setState`в классах, но не сливает новое и старое состояние вместе.
+
+**Важно:** Хук состояния можно использовать в компоненте более одного раза.
+
+```jsx
+ // Объявляем несколько переменных состояния!
+ const [name, setName] = useState('James');
+ const [age, setAge] = useState(32);
+ const [todos, setTodos] = useState([{ text: 'Изучить хуки' }]);
+ // ...
+```
+

react-hooks/osnovnye-khuki/khuk-sostoyaniya-usestate.md

@@ -0,0 +1,2 @@
+# Полезная информация
+