react 子组件更新,其他组件也被更新

有这样一个组件结构:

|-- div
|  |-- Group1
|  |  |-- Input1
|  |  |-- Input2
|  |-- Group2
|  |  |-- Input3
|  |  |-- Input4

我在触发修改 Input1 的时候,会导致 render 所有的组件:

[Render Group]
[Render Input] flag: 1
[Render Input] flag: 2
[Render Group]
[Render Input] flag: 3
[Render Input] flag: 4

请问如何避免呢,比如我在修改 Input1时候,仅渲染 Input1,其余不重新渲染?


问题代码如下:

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      val1: '',
      val2: '',
      val3: '',
      val4: ''
    }
  }

  handleInput (flag, val) {
    const key = 'val' + flag
    this.setState({ [key]: val })
  }

  render () {
    return (
      <div className="App">
        <Group name="Group1">
          <Input flag="1" onChange={v => this.handleInput.call(this, 1, v)}/>
          <Input flag="2" onChange={v => this.handleInput.call(this, 2, v)}/>
        </Group>
        <Group name="Group2">
          <Input flag="3" onChange={v => this.handleInput.call(this, 3, v)}/>
          <Input flag="4" onChange={v => this.handleInput.call(this, 4, v)}/>
        </Group>
      </div>
    )
  }
}
class Group extends Component {
  render () {
    console.log('[Render Group]')
    const children = this.props.children
    return (
      <div>
        <h1>{this.props.name}</h1>
        {
          React.Children.map(children, child => child)
        }
      </div>
    )
  }
}
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>
    )
  }
}
回复
阅读 3.4k
1 个回答

你的子组件在更新自身状态的同时,也更新了父组件的状态,就是cb && cb(value)这行代码。

在react中,父组件更新,默认是会更新所有子组件、孙组件的。
这种情况下,你必须重写shouldComponentUpdate方法,自行判断这个组件是否需要更新,return false就会阻止更新

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏