1
Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?
« kdy: 13. 06. 2021, 00:36:29 »
(pro React) Dlouhé seznamy se obvykle optimalizují tak, že se pro položky udělá samostatná komponenta, tato bude navíc memoizovaná pomocí React.memo a při vykreslování seznamu se každé položce nastaví key. Díky té memoizaci se to renderování skutečně uřízne před voláním render-u na jednotlivých položkách (když se jim nezměnily propsy).
V upraveném příkladu se tedy bude opakovaně renderovat jenom první řádek (a App samozřejmě).
V upraveném příkladu se tedy bude opakovaně renderovat jenom první řádek (a App samozřejmě).
Kód: [Vybrat]
class A0 extends React.Component {
constructor(props) {
super();
console.log("Constructor called ");
this.state = {
input: 1
};
}
render() {
console.log("A render, props: " + JSON.stringify(this.props));
return <div>Input {this.state.input}</div>;
}
}
const A = React.memo(A0);
class App extends React.Component {
i = 0;
constructor() {
super();
this.state = {
arr: [
{ id: 0, val: 0 },
{ id: 1, val: 0 },
{ id: 2, val: 0 }
]
};
}
componentDidMount() {
setInterval(
() =>
this.setState({
arr: this.state.arr.map((item) =>
item.id === 0 ? { id: 0, val: this.i++ } : item
)
}),
1000
);
}
render() {
console.log("App render");
return (
<div>
{this.state.arr.map((i) => (
<A key={i.id} data={i} />
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));