私が持っているとしましょう：
class Item extends React.Component {
render() {
console.log('Let's assume this does something slow...');
return <li>{this.props.text}</li>;
}
}
class List extends React.Component {
constructor() {
super();
this.state = {
items: [],
};
}
addItem = text => {
this.setState({
// Mutates the array reference... is there a way around it?
items: this.state.items.concat({ id: Math.random(), text }),
});
};
render() {
return (
<div>
<button onClick={() => this.addItem(Math.random())}>Add Item</button>
<ul>
// This will run on every render, re-rendering the whole list...
{this.state.items.map(item => (
<Item key={item.id} text={item.text} />
))}
</ul>
</div>
);
}
}
既存のリストをそのままにして、render()兄弟を呼び出さずに新しいアイテムを上下に追加するだけでよいのでしょうか。
ReactComponentは常に再レンダリングされますが、プロップと状態の比較が浅いPureComponent実装であるshouldComponentUpdateため、プロップが変更されない限り再レンダリングされません。
class Item extends React.PureComponent {
render() {
console.log("Let's assume this does something slow...");
return <li>{this.props.text}</li>;
}
}
class List extends React.Component {
state = {
items: []
};
addItem = text => {
this.setState(prevState => {
return { items: [...prevState.items, { id: Math.random(), text }] };
});
};
render() {
return (
<div>
<button onClick={() => this.addItem(Math.random())}>Add Item</button>
<ul>
{this.state.items.map(item => (
<Item key={item.id} text={item.text} />
))}
</ul>
</div>
);
}
}
ReactDOM.render(<List />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加