[ad_1]
Hooks são uma adição brilhante ao React. Eles simplificam muita lógica que anteriormente tinha que ser dividida em diferentes ciclos de vida com class componentes.
Eles, no entanto, exigem uma diferente modelo mental, especialmente para iniciantes.
Eu também gravei um pequeno série de vídeos neste artigo que você pode achar útil.
Debounce e aceleração
Há uma tonelada de postagens de blog escritas sobre desaceleração e aceleração, por isso não vou aprender como escrever sua própria desaceleração e aceleração. Por questões de concisão, considere debounce e throttle de Lodash.
Se você precisar de uma atualização rápida, aceite uma função (retorno de chamada) e uma demora em milissegundos (digamos x) e, em seguida, ambos retornam outra função com algum comportamento especial:
debounce: retorna uma função que pode ser chamada qualquer número de vezes (possivelmente em sucessões rápidas), mas invocará apenas o retorno de chamada depois de esperar paraxms da última chamada.throttle: retorna uma função que pode ser chamada qualquer número de vezes (possivelmente em rápida sucessão), mas invocará o retorno de chamada no máximo uma vez cadaxem.
Usecase
Temos um editor de blog mínimo (aqui está o Repo GitHub) e gostaríamos de salvar a postagem do blog no banco de dados 1 segundo depois que o usuário parar de digitar.
Você também pode consultar esta caixa de códigos se você deseja ver a versão final do código.
Uma versão mínima do nosso editor fica assim:
import React, { useState } from 'react';import debounce from 'lodash.debounce';function App() { const [value, setValue] = useState(''); const [dbValue, saveToDb] = useState(''); // would be an API call normally const handleChange = event => { setValue(event.target.value); }; return ( Blog
Editor (Client)
{value} Saved (DB)
{dbValue} );}Aqui, saveToDb seria realmente uma chamada de API para o back-end. Para manter as coisas simples, estou salvando no estado e depois processando como dbValue.
Como queremos realizar essa operação de salvamento apenas quando o usuário parar de digitar (após 1 segundo), isso deve ser denunciou.
Aqui está o repositório de código inicial e ramificação.
Criando uma Função Rejeitada
Primeiro de tudo, precisamos de uma função rebatida que encerre a chamada para saveToDb:
import React, { useState } from 'react';import debounce from 'lodash.debounce';function App() { const [value, setValue] = useState(''); const [dbValue, saveToDb] = useState(''); // would be an API call normally const handleChange = event => { const { value: nextValue } = event.target; setValue(nextValue); // highlight-starts const debouncedSave = debounce(() => saveToDb(nextValue), 1000); debouncedSave(); // highlight-ends }; return {/* Same as before */} ;}Mas, na verdade, isso não funciona porque a função debouncedSave é criado fresco em cada handleChange ligar. Isso acabará desclassificando cada pressionamento de tecla, em vez de desabilitar todo o valor de entrada.
useCallback
useCallback é comumente usado para otimizações de desempenho ao passar retornos de chamada para componentes filho. Mas podemos usar sua restrição de memorizar uma função de retorno de chamada para garantir a debouncedSave referencia a mesma função rejeitada entre renderizações.
Eu também escrevi Este artigo aqui no freeCodeCamp se você deseja entender o básico da memorização.
Isso funciona como esperado:
import React, { useState, useCallback } from 'react';import debounce from 'lodash.debounce';function App() { const [value, setValue] = useState(''); const [dbValue, saveToDb] = useState(''); // would be an API call normally // highlight-starts const debouncedSave = useCallback( debounce(nextValue => saveToDb(nextValue), 1000), [], // will be created only once initially ); // highlight-ends const handleChange = event => { const { value: nextValue } = event.target; setValue(nextValue); // Even though handleChange is created on each render and executed // it references the same debouncedSave that was created initially debouncedSave(nextValue); }; return {/* Same as before */} ;}useRef
useRef nos dá um objeto mutável cuja current A propriedade refere-se ao valor inicial passado. Se não o alterarmos manualmente, o valor persistirá por toda a vida útil do componente.
Isso é semelhante às propriedades da instância de classe (isto é, definição de métodos e propriedades no this)
Isso também funciona conforme o esperado:
import React, { useState, useRef } from 'react';import debounce from 'lodash.debounce';function App() { const [value, setValue] = useState(''); const [dbValue, saveToDb] = useState(''); // would be an API call normally // This remains same across renders // highlight-starts const debouncedSave = useRef(debounce(nextValue => saveToDb(nextValue), 1000)) .current; // highlight-ends const handleChange = event => { const { value: nextValue } = event.target; setValue(nextValue); // Even though handleChange is created on each render and executed // it references the same debouncedSave that was created initially debouncedSave(nextValue); }; return {/* Same as before */} ;}Continue lendo em meu blog para saber como abstrair esses conceitos em ganchos personalizados ou confira o série de vídeos.
Você também pode me seguir no Twitter para ficar atualizado sobre minhas últimas postagens. Espero que você tenha achado este post útil 🙂
[ad_2]
Fonte
