React에 대한 desenvolvimento 없음, 성능에 필요한 멜호라에 대한 vemos a plicação, utilizando técnicas de cache de nossos componentes.

Antes de atualizar o DOM, o React Primeiro Renderiza o componente. Feito isso, ele compara o resultado da renderização com a anterior. Se os resultadores forem diferentes, ele o atualiza.

반응 메모

É ai que entra a vantagem de utilização do React.memo() . Quando utilizamos o memo , o React memoriza o resultado do componente. Antes de o React renderizar o componente novamente, ele valida se os os props (primitivos) são os mesmos, em caso positivo ele pula a renderização.

실용화 사례React.memo()를 실용화할 수 있습니다.

import React, { memo, useState } from "react";
import ReactDOM from "react-dom";

const ComMemo = memo(props => {
  console.log("Estou renderizando com memo!");
  return <h3>{props.message}</h3>;
});

const SemMemo = props => {
  console.log("Estou renderizando sem memo!");
  return <em>{props.message}</em>;
};

const MyApp = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>React Memo</h1>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <ComMemo message="Este componente só renderiza uma vez." />
      <SemMemo message="Este componente vai renderizar a cada mudança de estado." />
      <p>Dá uma olhada no console!</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);

코드 및 상자가 없는 예제 기능을 제공하는 음성 코드, aqui .

사용메모

O useMemo é um hook que utiliza uma técnica chamada memoization. Esse hook recebe 2 paraâmetros: a função que deseja memoizar e um array de variáveis ​​que, quando alteradas, atualizam a função.

Veja abaixo um exemplo do useMemo em ação:

import React, { useState, useMemo } from "react";
import ReactDOM from "react-dom";

const Error = (props) => {
  const { active } = props;
  const message = "Mínimo de 8 caracteres";

  console.log("Componente de erro renderizando");

  return active && message;
};

const MyApp = () => {
  const [password, setPassword] = useState("");
  const [showErrors, setShowErrors] = useState(false);

  const handlePasswordChange = (event) => {
    const { value } = event.target;

    setShowErrors(value.length < 8);
    setPassword(value);
  };

  const memoizedErrors = useMemo(() => {
    return <Error active={showErrors} />;
  }, [showErrors]);

  return (
    <form>
      <h1>Cadastrar uma senha</h1>

      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={handlePasswordChange}
      />

      <button type="submit">Salvar</button>

      <p>{memoizedErrors}</p>
      <p>Dá uma olhada no log!</p>
    </form>
  );
};

ReactDOM.render(<MyApp />, document.getElementById("root"));

Você pode observar que neste example o componente de erro só precisa ser renderizado novamente quando a mensagem for mostrada ou escondida.

코드 및 상자가 없는 예제 기능을 제공하는 음성 코드, aqui .

React.memo() 대 useMemo

Duas funcionalidades tem o mesmo comportamento e a diferença é uma questão de conceito.

React.memo() 와 higher-order component 구성 요소를 포함하여 렌더링할 때 변경 사항을 변경해야 합니다. Já o useMemo é um react hook que envolve funções para garantir que elas sejam renderizadas apenas quando o array de dependsências for alterado.



Enfim... Existem casos em que você pode escolher utilizar um dos recursos acima. 가장 중요한 것은 GAP의 성능과 재귀에 대한 정확한 리졸버를 관찰하는 것입니다. Para isso, é importante colocar na prática.


Este post não seria possível sem o trabalho de pesquisa e talkão do time do time do capítulo de frontend do LuizaLabs.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

아테 마이스.