has such a component structure:
|-- div
| |-- Group1
| | |-- Input1
| | |-- Input2
| |-- Group2
| | |-- Input3
| | |-- Input4when I trigger a modification of Input1, it causes all the components of render:
[Render Group]
[Render Input] flag: 1
[Render Input] flag: 2
[Render Group]
[Render Input] flag: 3
[Render Input] flag: 4how can I avoid this? for example, when I modify Input1, I only render Input1, and the rest do not re-render?
< hr >question code is as follows:
class Input extends Component {
constructor (props) {
super(props)
this.state = {
value: ""
}
}
handleChange (e) {
const cb = this.props.onChange
const value = e.target.value
this.setState({ value })
cb && cb(value)
}
render () {
console.log("[Render Input] flag:", this.props.flag)
return (
<div>
<input value={this.state.value} onChange={e => this.handleChange.call(this, e)}/>
</div>
)
}
}