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

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

Answer 2

如果多个其他兄弟姐妹想要引用相同的值，最好提升状态并在父级中更新它。只要他们没有复杂且深度嵌套的道具和状态，你就可以优化我的父母和儿童组件。

根据React docs：

React.PureComponent与React.Component完全相同，但是使用浅支柱和状态实现shouldComponentUpdate() 比较。如果您的React组件的render（）函数呈现同样的结果给出相同的道具和状态，你可以使用 React.PureComponent在某些情况下会提升效果。

Answer 3

我用这种方式更新了孩子的父母状态。它确实工作正常。但它使组件变得复杂。

在你的情况下（假设你为文本输入元素执行此操作）我认为如果你是为微小的输入组件做这件事，这将是一个很好的做法。因为每次敲击键盘上的键时，父组件都会尝试更新。

但是如果要包装一组输入元素并将更大的对象传递给父组件，我认为这样会没问题。

您可以使用反应生命周期方法shouldComponentUpdate（）方法来控制父组件的呈现

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

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

这里nextProps是指您收到的道具（更新），您可以通过“this.props”来引用当前的道具值

将true返回到render并返回false以跳过渲染。

Answer 4

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

子组件更新父组件

4 个答案: