子组件更新父组件答案

【问题标题】：child component update parent component子组件更新父组件
【发布时间】：2018-04-18 05:46:21
【问题描述】：

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

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} />
    )
  }
}

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

但我不确定这种方式好不好。
因为当我输入内容时，父组件总是会重新渲染。
我认为这不好。（实际上这只是我的想法...）
这样对吗？

【问题讨论】：

标签： reactjs components setstate

【解决方案1】：

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

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

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

你可以使用 react 生命周期方法 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”引用当前的props值

返回 true 进行渲染，返回 false 跳过渲染。

【讨论】：

我可以获取在我的代码中使用 shouldComponent 的示例吗？
reactjs.org/docs/react-component.html#shouldcomponentupdate这里的nextProps指的是你收到的props（更新），你可以通过“this.props”引用当前的props值

【解决方案2】：

如果多个其他同级想要引用相同的值，最好在父级中提升状态并更新它。只要它们没有复杂且深度嵌套的道具和状态，您就可以优化这一点，使您的父组件和子组件变得纯净。

根据React docs：

React.PureComponent 与React.Component 完全相同，但是使用浅 prop 和 state 实现 shouldComponentUpdate() 比较。如果你的 React 组件的 render() 函数渲染给定相同的道具和状态相同的结果，您可以使用 React.PureComponent 在某些情况下可以提高性能。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：