Hooks
Você substituirá as funções de ciclo de vida por hooks. O estado também. Por isso, leia O que são React Hooks? caso tenha alguma dúvida sobre eles de maneira geral.
useEffect
O hook useEffect
pode ter um comportamento similar ao componentDidMount
e componentWillUnmount
. Pode porque ele possui um array de dependências, que indica quando o callback passado deve ser executado novamente.
O hook é executado após cada render, mas o callback é executado apenas se algo dentro do array de dependências for modificado. Então, se o array for vazio []
, funcionará como o componentDidMount
.
No useEffect
, podemos também retornar um callback para "limpar" o efeito. O React executará o clean up quando o componente desmontar. Entretanto, como mencionei anteriormente, o useEffect
é executado em todo render, não apenas uma vez. É por isso que o React também limpa o efeito de renders anteriores antes de executar o efeito novamente no próximo render.
Em resumo, o clean up é executado antes do efeito ser acionado novamente. Caso o array de dependências seja vazio, o comportamento será como o do componentWillUnmount
.
function Component() {
// O primeiro argumento é o callback a ser executado.
// O segundo argumento é um array vazio, que fará com que o callback seja executado
// apenas no primeiro render.
useEffect(() => {
const handleChange = () => {
this.setState(SelectionToolbarStore.getState());
};
SelectionToolbarStore.addChangeListener(handleChange);
return () => {
// Aqui o clean up será executado apenas quando o componente for desmontar
SelectionToolbarStore.removeChangeListener(handleChange);
}
}, []);
return null;
}
useCallback
Note que eu declarei a função handleChange
dentro do useEffect
, já que ela é usada apenas ali. Caso contrário, precisaria declarar fora e utilizar como dependência do hook.
Nesse caso, poderia fazer uso do useCallback
para que o React não crie uma nova referência da função a cada renderização. Eu falo um pouco sobre isso nessa resposta. O código ficaria assim:
function Component() {
const handleChange = useCallback(() => {
this.setState(SelectionToolbarStore.getState());
}, []);
useEffect(() => {
SelectionToolbarStore.addChangeListener(handleChange);
return () => {
SelectionToolbarStore.removeChangeListener(handleChange);
}
}, [handleChange]);
return null;
}
Esse código funcionará do mesmo jeito que o outro, com o array de dependências vazio. Isso porque a referência da função será criada uma única vez, graças ao useCallback
, que será no primeiro render. É importante entender isso.
useState
O valor inicial do useState
deve ser declarado como informado na pergunta. O valor inicial é estabelecido no primeiro render. Pode ser uma importação, pode ser passado por prop, pode ser uma constante.
import { valor1 } from './valor1';
function Component({ valor2 }) {
const [val1, setVal1] = useState(valor1);
const [val2, setVal2] = useState(valor2);
const [val3, setVal3] = useState('Qualquer coisa');
return null;
}
SelectionToolbarStore
, mas o que você sugeriu parece certo. Qual o problema no código douseState
? Sua dúvida é, então, somente sobrecomponentDidMount()
ecomponentWillUnmount()
?SelectionToolbarStore
vem dos meus stores. A dúvida é sobrecomponentDidMount()
ecomponentWillUnmount()
sim. Porque embora o site não quebrou a funcionalidade que eu queria que ocorresse não acontece