子组件更新父组件

Question

我就想知道子组件更新父组件好不好
在源代码中，如下所示

class Parent extends React.Component{
  state = {
    name : ''
  }
  changeState = ((state) => {
    this.setState(state)
  })
  submit = (() => {
    // send state to api..
  })
  render(){
    return(
      <div>
        <Child changeState={this.changeState} {...this.state}/>
        <button onClick={this.submit} />
      </div>
    )
  }
}



class Child extends React.Component{
  change = ((e) => {
    this.props.changeState({
      name : e.target.value
    })
  })
  render(){
    return(
      <input onChange={this.change} value={this.props.name} />
    )
  }
}

我使用这种方式的原因是提交方法。
有很多输入标签，我想把它们都绑定在一起。

但我不确定这种方式好不好。
因为当我输入一些东西时，父组件总是会重新渲染。
我觉得不好。（其实只是我的想法。。。）
这样对吗？

Answer 1

parent重新渲染是没有问题的，只要不浪费就行。除非你使用 Redux，否则我认为这是管理状态的正确方法，即在父组件内部并使用子组件更新它。这样，你的表单就变成了controlled component.
我认为以下页面对您有用：https://scotch.io/courses/getting-started-with-react/parent-child-component-communication

Answer 2

如果您在用户输入时执行了验证，那么就可以了。否则将 'onChange' 事件更改为 'onBlur'

Answer 3

如果多个其他兄弟姐妹想要引用相同的值，那么提升状态并在父级中更新它是个好主意。您可以对此进行优化，只要它们没有复杂且嵌套很深的道具和状态，就可以使您的父子组件纯净。

根据 React docs:

React.PureComponent is exactly like React.Component, but implements shouldComponentUpdate() with a shallow prop and state comparison. If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Answer 4

我用这种方式从 child 更新 parent 的状态。它确实工作正常。但它使组件有点复杂。

在您的情况下（假设您对文本输入元素执行此操作）如果您对微小的输入组件执行此操作，我认为这不是一个好的做法。因为每次您在键盘上按下一个键，parent 组件都会尝试更新。

但是，如果您包装一组输入元素并将更大的 object 传递给 parent 组件，我认为这没问题。

您可以使用 React 生命周期方法 shouldComponentUpdate() 方法来控制 parent 组件的渲染

shouldComponentUpdate https://reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  if (this.props.name != nextProps.name) {
     return true;
  } else {
     return false;
  }
}

这里的nextProps指的是你收到的props（更新），你可以通过"this.props"

来参考当前的prop值

并且 return true 表示渲染，false 表示跳过渲染。

子组件更新父组件

child component update parent component

components

setstate

reactjs