Início / coding / Perguntas / 79552313
Accepted
Kipnoedels
Asked: 2025-04-03 15:55:17 +0800 CST

Por que o efeito não é chamado duas vezes no modo estrito?

  • 772

Eu estava percorrendo algum código e me deparei com o seguinte snippet para evitar que o StrictMode chame um efeito duas vezes. Embora geralmente não seja recomendado implementar tal recurso, fiquei mais confuso sobre o porquê de ele realmente funcionar. Veja o seguinte:

export const useApiDemo = (param: string) => {
  let strictModeRerun = false;

  useEffect(() => {
    !strictModeRerun && fetchApi(param);
    return () => {
      strictModeRerun = true;
    };
  }, [param]);
};

Pelo que entendi, em strictmode, ganchos e componentes são chamados duas vezes para que possamos identificar quaisquer configurações incorretas ou limpezas defeituosas. Se useApiDemo (ou o componente em que é usado) renderiza duas vezes, eu presumo que strictModeReruntambém seria falso duas vezes porque é definido em linha no escopo de renderização. Ele não é persistido entre renderizações, então eu presumo que isso faz com que a segunda execução também chame a API. No entanto, a chamada da API é disparada apenas uma vez. Se eu remover a strictModeRerunAPI, ela dispara duas vezes. Por que isso realmente funciona?

reactjs

1 respostas

  1. Best Answer

    O React 18 tem algumas peculiaridades somente de dev. As duas com as quais estamos preocupados aqui são:

    1. Dupla renderização de componentes.
    2. Dupla execução de efeitos.

    Eles são independentes. Por exemplo:

    let renderCount = 0;
export default function ChatRoom() {
  let strictModeRerun = false;

  // // let strictModeRerun = false;
  renderCount++;
  console.log("rerender", renderCount);

  useEffect(() => {
    console.log("connect", strictModeRerun);
    let connect = null;
    if (!strictModeRerun) {
      connection = createConnection(serverUrl, roomId);
      connection.connect();
    }

    return () => {
      strictModeRerun = true;
      connection?.disconnect();
    };
  }, []);
  return <h1>Welcome to the {roomId} room!</h1>;
}

    A saída da renderização dos componentes acima no log é:

    insira a descrição da imagem aqui

    Isso prova que primeiro acontece a renderização dupla. E só depois disso o efeito roda. De qualquer forma, o efeito deve rodar logo antes da pintura.

    Link da caixa de areia

    rerenderé registrado duas vezes com ambos os valores de renderCount. E então o efeito é executado. Como você está definindo o valor false, ele nunca mais é executado como você imaginou.

    • 1

relate perguntas