Tepki Notu
Kullanmak memo, bileşenleri değişmediyse, React'in bir bileşeni oluşturmayı atlamasına neden olur.
Bu performansı artırabilir.
Bu bölüm React Hook'larını kullanır. Kancalar hakkında daha fazla bilgi için Tepki Kancaları bölümüne bakın.
Sorun
Bu örnekte, Todosbileşen, yapılacaklar değişmese bile yeniden işlenir.
Örnek:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
Arttırma düğmesini tıklattığınızda, Todosbileşen yeniden oluşturulur.
Bu bileşen karmaşıksa performans sorunlarına neden olabilir.
Sertikalı olmak!
95 $ KAYIT
Çözüm
Bunu düzeltmek için kullanabiliriz memo.
Bileşenin gereksiz yere yeniden oluşturulmasını memoönlemek için kullanın .Todos
TodosBileşen dışa aktarımını şuraya sarın memo:
Örnek:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
Artık Todosbileşen, yalnızca todosaksesuarlar aracılığıyla kendisine iletilenler güncellendiğinde yeniden işleniyor.