Пользовательские хуки презентация

Июль 31, 2022

Главная
Информатика
Пользовательские хуки

Содержание

2. ПЛАН 1. Пользовательские хуки 2. memo 3. useContext 4. useMemo 5. useCallback 6. useReducer 7. CSS
3. Пользовательские хуки
4. Пользовательские хуки // PokemonList.js import React from 'react'; import Pokemon from './Pokemon'; import usePokemons from './hooks/use-pokemons';
5. memo
6. memo // Pokemon.js import React, { useState, memo } from 'react'; function Pokemon({ name, weight, img
7. useContext
8. useContext // contexts/pokemons-context.js import { createContext } from 'react'; export default createContext({ additionalWeight: 0, addAdditionalWeight: ()
9. useContext (Provider) return ( value={{ additionalWeight, addAdditionalWeight, removeAdditionalWeight, }} > ); } export default App; //
10. useContext (Consumers) // Pokemon.js import React, { useState, memo, useContext } from 'react'; import PokemonsContext from
11. useContext (нюанс) Когда значение контекста меняется, все потребители рендерятся заново, независимо от memo.
12. useMemo
13. useMemo (вычисляем один раз) return ( value={{ additionalWeight, addAdditionalWeight, removeAdditionalWeight, }} > ); } export default
14. useMemo (борьба с useContext) return useMemo( () => ( {name} Вес: {' '} {currentWeight} {' '}
15. useCallback
16. useCallback (борьба с useContext) // Pokemon.js import React, { useState, memo, useContext, useMemo, useCallback, } from
17. useCallback useCallback + useMemo позволяют организовать точечный рендеринг только тех компонентов, которые реально поменялись, даже если
18. useReducer
19. Reducer && useReducer // App.js import React, { useReducer } from 'react'; import PokemonsContext, { reducer
20. На стороне потребителя // PokemonsAdditionalWeight.js import React, { useContext } from 'react'; import PokemonsContext from './contexts/pokemons-context';
21. useReducer Вместо множества функций — dispatch. Логика изменения данных находится в редьюсере. Не нужен useCallback на
22. CSS modules SCSS
23. CSS modules // Pokemon.js import React, { useState, memo, useContext, useMemo, useCallback, } from 'react'; import
25. Скачать презентацию

Слайд 2

ПЛАН
1. Пользовательские хуки
2. memo
3. useContext
4. useMemo
5. useCallback
6. useReducer
7. CSS modules &

SCSS

Слайд 3

Пользовательские
хуки

Слайд 4

Пользовательские хуки
// PokemonList.js
import React from 'react';
import Pokemon from './Pokemon';
import usePokemons from

'./hooks/use-pokemons';
function PokemonList({ pokemons }) {
const [pokemonsData, loading, error] = usePokemons(pokemons);
if (error) {
return 'Ошибка загрузки покемонов.';
}
if (loading) {
return 'Загрузка покемонов...';
}
return pokemonsData.map(({ name, weight, img }) => (

));
}
export default PokemonList;
// hooks/use-pokemons.js
import { useState, useEffect } from 'react';
import fetchAll from '../lib/fetch-all';
function usePokemons(pokemons) {
const [pokemonsData, setPokemonsData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);

useEffect(() => {
if (!pokemons.length) {
return false;
}
setLoading(true);
setError(false);
const abortController = new AbortController();
const { signal } = abortController;
(async () => {
let jsonResults;
try {
jsonResults = await fetchAll(
pokemons.map((name) => `https://pokeapi.co/api/v2/pokemon/${name}/`),
{ signal },
);
} catch (err) {
setPokemonsData([]);
setLoading(false);
return setError(err);
}
setPokemonsData(jsonResults.map((data) => ({
name: data.name,
weight: data.weight,
img: data.sprites.front_default,
})));
return setLoading(false);
})();
return () => abortController.abort();
}, [pokemons]);
return [pokemonsData, loading, error];
}
export default usePokemons;

Слайд 5

memo

Слайд 6

memo
// Pokemon.js
import React, { useState, memo } from 'react';
function Pokemon({ name,

weight, img }) {
const [
currentWeight,
setCurrentWeight,
] = useState(weight);
function addWeight() {
setCurrentWeight((x) => x + 50);
}
function removeWeight() {
setCurrentWeight((x) => x - 50);
}
return (
<>
...

);
}
export default memo(Pokemon);

Запрещает повторный рендеринг, если пропсы остались прежние.
Значительно повышает производительность при динамическом изменении списка компонентов.

Слайд 7

useContext

Слайд 8

useContext
// contexts/pokemons-context.js
import { createContext } from 'react';
export default createContext({
additionalWeight: 0,

addAdditionalWeight: () => {},
removeAdditionalWeight: () => {},
});

Как прокинуть данные в компоненты с глубокой вложенностью?
Как изменить данные в родительском компоненте?
Как повлиять на соседний компонент?

Слайд 9

useContext (Provider)
return (

value={{
additionalWeight,
addAdditionalWeight,
removeAdditionalWeight,

}}
>

);
}
export default App;

// App.js
import React, { useState } from 'react';
import PokemonsContext from './contexts/pokemons-context';
import PokemonList from './PokemonList';
import PokemonsAdditionalWeight from './PokemonsAdditionalWeight';
function App() {
const [
additionalWeight,
setAdditionalWeight,
] = useState(0);
const addAdditionalWeight = (weight) => {
setAdditionalWeight((x) => x + weight);
};
const removeAdditionalWeight = (weight) => {
setAdditionalWeight((x) => x - weight);
};

Слайд 10

useContext (Consumers)
// Pokemon.js
import React, { useState, memo, useContext } from 'react';
import

PokemonsContext from './contexts/pokemons-context';
const weightStep = 50;
function Pokemon({ name, weight, img }) {
const { addAdditionalWeight, removeAdditionalWeight } = useContext(PokemonsContext);
const [currentWeight, setCurrentWeight] = useState(weight);
function addWeight() {
setCurrentWeight((x) => x + weightStep);
addAdditionalWeight(weightStep);
}
function removeWeight() {
setCurrentWeight((x) => x - weightStep);
removeAdditionalWeight(weightStep);
}
return (
<>...
);
}
export default memo(Pokemon);

// PokemonsAdditionalWeight.js
import React, { useContext } from 'react';
import PokemonsContext from './contexts/pokemons-context';
function PokemonsAdditionalWeight() {
const { additionalWeight } = useContext(PokemonsContext);
return (

Дополнительный вес покемонов:
{additionalWeight}

);
}
export default PokemonsAdditionalWeight;

Слайд 11

useContext (нюанс)
Когда значение контекста меняется, все потребители рендерятся заново, независимо от

memo.

Слайд 12

useMemo

Слайд 13

useMemo (вычисляем один раз)
return (

value={{
additionalWeight,
addAdditionalWeight,

removeAdditionalWeight,
}}
>

);
}
export default App;

// App.js
import React, { useState, useMemo } from 'react';
import PokemonsContext from './contexts/pokemons-context';
import PokemonList from './PokemonList';
import PokemonsAdditionalWeight from './PokemonsAdditionalWeight';
function App() {
const [
additionalWeight,
setAdditionalWeight,
] = useState(0);
const addAdditionalWeight = (weight) => {
setAdditionalWeight((x) => x + weight);
};
const removeAdditionalWeight = (weight) => {
setAdditionalWeight((x) => x - weight);
};
const pokemons = useMemo(
() => ['slowpoke', 'pikachu', 'psyduck'],
[],
);

Слайд 14

useMemo (борьба с useContext)
return useMemo(
() => (
<>

{name}

Вес:
{' '}
{currentWeight}
{' '}
гектограмм

width={96 * (currentWeight / weight)}
src={img}
alt={name}
style={{ display: 'block' }}
/>

),
[name, weight, img, currentWeight, addWeight, removeWeight],
);
}
export default memo(Pokemon);

// Pokemon.js
import React, {
useState, memo, useContext, useMemo,
} from 'react';
import PokemonsContext from './contexts/pokemons-context';
const weightStep = 50;
function Pokemon({ name, weight, img }) {
const { addAdditionalWeight, removeAdditionalWeight } = useContext(PokemonsContext);
const [currentWeight, setCurrentWeight] = useState(weight);
function addWeight() {
setCurrentWeight((x) => x + weightStep);
addAdditionalWeight(weightStep);
}
function removeWeight() {
setCurrentWeight((x) => x - weightStep);
removeAdditionalWeight(weightStep);
}

Слайд 15

useCallback

Слайд 16

useCallback (борьба с useContext)
// Pokemon.js
import React, {
useState, memo, useContext, useMemo,

useCallback,
} from 'react';
import PokemonsContext from './contexts/pokemons-context';
const weightStep = 50;
function Pokemon({ name, weight, img }) {
const { addAdditionalWeight, removeAdditionalWeight } = useContext(PokemonsContext);
const [currentWeight, setCurrentWeight] = useState(weight);
const addWeight = useCallback(() => {
setCurrentWeight((x) => x + weightStep);
addAdditionalWeight(weightStep);
}, [addAdditionalWeight]);
const removeWeight = useCallback(() => {
setCurrentWeight((x) => x - weightStep);
removeAdditionalWeight(weightStep);
}, [removeAdditionalWeight]);
return useMemo(
() => (
<>
...

),
[name, weight, img, currentWeight, addWeight, removeWeight],
);
}
export default memo(Pokemon);

// App.js
import React, { useState, useMemo, useCallback } from 'react';
import PokemonsContext from './contexts/pokemons-context';
import PokemonList from './PokemonList';
import PokemonsAdditionalWeight from './PokemonsAdditionalWeight';
function App() {
const [
additionalWeight,
setAdditionalWeight,
] = useState(0);
const addAdditionalWeight = useCallback((weight) => {
setAdditionalWeight((x) => x + weight);
}, []);
const removeAdditionalWeight = useCallback((weight) => {
setAdditionalWeight((x) => x - weight);
}, []);
const pokemons = useMemo(
() => ['slowpoke', 'pikachu', 'psyduck'],
[],
);
return (
...
);
}
export default App;

Слайд 17

useCallback
useCallback + useMemo позволяют организовать точечный рендеринг только тех компонентов, которые

реально поменялись, даже если используется useContext.

Слайд 18

useReducer

Слайд 19

Reducer && useReducer
// App.js
import React, { useReducer } from 'react';
import PokemonsContext,

{ reducer } from './contexts/pokemons-context';
import PokemonList from './PokemonList';
import PokemonsAdditionalWeight from './PokemonsAdditionalWeight';
const pokemons = ['slowpoke', 'pikachu', 'psyduck'];
function App() {
const [state, dispatch] = useReducer(
reducer,
{ additionalWeight: 0 },
);
return (

value={{
...state,
dispatch,
}}
>

);
}
export default App;

// contexts/pokemons-context.js
import { createContext } from 'react';
export function reducer(state, action) {
switch (action.type) {
case 'addAdditionalWeight':
return {
...state,
additionalWeight: state.additionalWeight + action.weight,
};
case 'removeAdditionalWeight':
return {
...state,
additionalWeight: state.additionalWeight - action.weight,
};
default:
return state;
}
}
export default createContext({
additionalWeight: 0,
dispatch: () => {},
});

Слайд 20

На стороне потребителя
// PokemonsAdditionalWeight.js
import React, { useContext } from 'react';
import PokemonsContext

from './contexts/pokemons-context';
function PokemonsAdditionalWeight() {
const { additionalWeight } = useContext(PokemonsContext);
return (

Дополнительный вес покемонов:
{additionalWeight}

);
}
export default PokemonsAdditionalWeight;

// Pokemon.js
import React, {
useState, memo, useContext, useMemo, useCallback,
} from 'react';
import PokemonsContext from './contexts/pokemons-context';
const weightStep = 50;
function Pokemon({ name, weight, img }) {
const { dispatch } = useContext(PokemonsContext);
const [currentWeight, setCurrentWeight] = useState(weight);
const addWeight = useCallback(() => {
setCurrentWeight((x) => x + weightStep);
dispatch({
type: 'addAdditionalWeight',
weight: weightStep,
});
}, [dispatch]);
const removeWeight = useCallback(() => {
setCurrentWeight((x) => x - weightStep);
dispatch({
type: 'removeAdditionalWeight',
weight: weightStep,
});
}, [dispatch]);
return useMemo(
...
);
}
export default memo(Pokemon);

Слайд 21

useReducer
Вместо множества функций — dispatch.
Логика изменения данных находится в редьюсере.
Не нужен

useCallback на стороне провайдера, т.к. dispatch не создаётся заново.

Слайд 22

CSS modules
SCSS

Слайд 23

CSS modules
// Pokemon.js
import React, {
useState, memo, useContext, useMemo, useCallback,
} from

'react';
import PokemonsContext from './contexts/pokemons-context';
import styles from './Pokemon.module.css';
function Pokemon({ name, weight, img }) {
...
return useMemo(
() => (

...

),
[name, weight, img, currentWeight, addWeight, removeWeight],
);
}
export default memo(Pokemon);

/* Pokemon.module.css */
.pokemonContainer {
width: 40%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
}
.pokemonContainer img {
order: -1
}
.pokemonContainer h2 {
order: -2
}

Пользовательские хуки презентация

Содержание

ПЛАН1. Пользовательские хуки2. memo3. useContext4. useMemo5. useCallback6. useReducer7. CSS modules &

Пользовательскиехуки

Пользовательские хуки// PokemonList.jsimport React from 'react';import Pokemon from './Pokemon';import usePokemons from

memo

memo// Pokemon.jsimport React, { useState, memo } from 'react';function Pokemon({ name,

useContext

useContext// contexts/pokemons-context.jsimport { createContext } from 'react';export default createContext({ additionalWeight: 0,

useContext (Provider) return ( value={{ additionalWeight, addAdditionalWeight, removeAdditionalWeight,

useContext (Consumers)// Pokemon.jsimport React, { useState, memo, useContext } from 'react';import

Дополнительный вес покемонов: {additionalWeight}

useContext (нюанс)Когда значение контекста меняется, все потребители рендерятся заново, независимо от

useMemo

useMemo (вычисляем один раз)return ( value={{ additionalWeight, addAdditionalWeight,

useMemo (борьба с useContext) return useMemo( () => ( <> {name}

{name}

useCallback

useCallback (борьба с useContext)// Pokemon.jsimport React, { useState, memo, useContext, useMemo,

useCallbackuseCallback + useMemo позволяют организовать точечный рендеринг только тех компонентов, которые

useReducer

Reducer && useReducer// App.jsimport React, { useReducer } from 'react';import PokemonsContext,

На стороне потребителя// PokemonsAdditionalWeight.jsimport React, { useContext } from 'react';import PokemonsContext

Дополнительный вес покемонов: {additionalWeight}

useReducerВместо множества функций — dispatch.Логика изменения данных находится в редьюсере.Не нужен

CSS modulesSCSS

CSS modules// Pokemon.jsimport React, { useState, memo, useContext, useMemo, useCallback,} from

Похожие презентации

ПЛАН
1. Пользовательские хуки
2. memo
3. useContext
4. useMemo
5. useCallback
6. useReducer
7. CSS modules &

Пользовательские
хуки

Пользовательские хуки
// PokemonList.js
import React from 'react';
import Pokemon from './Pokemon';
import usePokemons from

memo
// Pokemon.js
import React, { useState, memo } from 'react';
function Pokemon({ name,

useContext
// contexts/pokemons-context.js
import { createContext } from 'react';
export default createContext({
additionalWeight: 0,

useContext (Provider)
return (

value={{
additionalWeight,
addAdditionalWeight,
removeAdditionalWeight,

useContext (Consumers)
// Pokemon.js
import React, { useState, memo, useContext } from 'react';
import

Дополнительный вес покемонов:
{additionalWeight}

useContext (нюанс)
Когда значение контекста меняется, все потребители рендерятся заново, независимо от

useMemo (вычисляем один раз)
return (

value={{
additionalWeight,
addAdditionalWeight,

useMemo (борьба с useContext)
return useMemo(
() => (
<>

{name}

useCallback (борьба с useContext)
// Pokemon.js
import React, {
useState, memo, useContext, useMemo,

useCallback
useCallback + useMemo позволяют организовать точечный рендеринг только тех компонентов, которые

Reducer && useReducer
// App.js
import React, { useReducer } from 'react';
import PokemonsContext,

На стороне потребителя
// PokemonsAdditionalWeight.js
import React, { useContext } from 'react';
import PokemonsContext

Дополнительный вес покемонов:
{additionalWeight}

useReducer
Вместо множества функций — dispatch.
Логика изменения данных находится в редьюсере.
Не нужен

CSS modules
SCSS

CSS modules
// Pokemon.js
import React, {
useState, memo, useContext, useMemo, useCallback,
} from