Hoje vamos abordar o básico de Recoil (https://recoiljs.org/) .
E segundo o time do Facebook(criadores): Recoil é um conjunto experimental de utilitários para gerenciamento de estado com React.
o Recoil é constituido de duas coisas: Atoms e Selectors
Atoms
Os átomos são unidades de estado, eles são atualizáveis e assináveis, o que significa que quando um átomo é atualizado, cada componente assinado é renderizado novamente com o novo valor.
import {
atom
} from 'recoil';
export const counterAtom = atom({
key: 'counter',
default: 0
});
Selectors
Um seletor representa uma parte do estado derivado. Você pode pensar no estado derivado como a saída da passagem do estado para uma função pura que modifica o estado fornecido de alguma forma.
import {
selector
} from 'recoil';
const fahrenheit = atom({
key: "fahrenheit",
default: 32
});
const celcius = selector({
key: "celcius",
get: ({ get }) => ((get(fahrenheit) - 32) * 5) / 9,
set: ({ set }, newValue) => set(fahrenheit, (newValue * 9) / 5 + 32)
});
a propriedade get pode acessar os atoms ou outros selectors e a função pode realizar ações async e retornar o resultado para os componentes que estão observando. Se set também for fornecido, ele retornará um RecoilStateobjeto gravável.
o criador do Recoil, Dave McCabe disse em um comentário no Hacker News(https://news.ycombinator.com/item?id=23183177)
"Bem, eu sei que em uma ferramenta vimos um aumento de 20x ou mais em comparação ao uso do Redux. Isso ocorre porque o Redux é O (n) no sentido de que ele tem que perguntar a cada componente conectado se precisa renderizar novamente, enquanto recoil é O (1). "
É isso, gente. Em breve volto aqui com um tutorial prático usando Recoil :)
Top comments (0)