<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Parent extends React.Component {
constructor() {
super();
var list = []
list.length = 1000
list.fill(1)
this.state = {
list: list.map((e, i) => i)
}
}
onChange = (value, index) => {
const list = [...this.state.list]
list[index] = value
this.setState({list})
}
add = index => {
const list = [...this.state.list]
list.splice(index, 0, list.length + 1)
this.setState({
list
})
}
render() {
return this.state.list.map((e, i) => (
<Input
add={this.add}
onChange={this.onChange}
key={i}
e={e}
i={i}
list={this.props.list} />
))
}
}
class Input extends React.Component {
componentDidUpdate() {
console.log(1)
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps.e !== this.props.e
}
render() {
return (
<input value={this.props.e} onChange={e => this.props.onChange(e.target.value, this.props.i)} onKeyDown={(e) => e.key === 'Enter' && this.props.add(this.props.i)} />
)
}
}
ReactDOM.render(
<Parent />,
document.getElementById('example')
);
</script>
</body>
</html>