在ReactJ中传递父和子元素之间数据的有效方法[受控组件与不受控制的组件]

Question

我正在测试/学习reactjs，并使我的头围绕一个问题。

简化的情况：

class Parent extends Component {
    constructor(props) {...}
    render() {
      return (
        <MyInputs onChange={this.handleChange}>
        <Child onChange={this.handleChange}/>
      )
    }
    
    handleChange() {
        //logic
        processTextAreaText();
    }
} 
class Child extends Component (props) {
  constructor(props) {...}
  render() {
    return (
      <textarea onChange={this.handleChange}"/>
    )
  }
  
  handleChange(event) {
    this.props.handleChange(event.target.value);
  }
}

dom结构：父母 输入 输入 孩子 按钮

我有两个输入，一个是textarea和一个按钮的子元素。用户在输入，TextArea中键入某些内容，然后单击按钮。

我当前的想法/解决方案：在Textarea的每一个更改中，我都在调用父级变更手并将值保存在父状态。

我的问题：这是最佳方法吗？我可以单击按钮上的值，然后直接处理它吗？单击按钮时，如何从子元素中获取值？

编辑：到目前为止，我已经阅读了官方的reactjs doc不受控制的组件

，如果您想快速又脏，代码也可能少一些。否则，您通常应该使用受控组件。

但是我仍然不明白为什么不受控制的组件脏了？如果我想从德克萨里亚(Texarea(获得价值的情况下，那时我想在它更改时不想处理它。每次不必要的textarea中值都会变化时，在受控组件中保存/更新状态吗？

我已经阅读了这篇文章，该文章在reactjs doc中介绍了，实际上，当我们只需要知道元素的价值时，使用不受控制的组件就根本不错。

但我仍然不明白为什么不推荐它？
最好，

Answer 1

是的，它是 react way(受控(。我已经阅读了React开发人员的某个话，但现在找不到，可能是某人帖子链接。它似乎不是那么有效，但它是在客户端上工作的，并且每个更改都不会在内存中执行那么多数据副本。大文字不如1MB或更多。它将在每个钥匙按下都要复制。对于实际计算机而言，它不是那么多。

当然，您可以获取DOM元素的ref(未控制(，并在Putton Press事件中获取数据，而无需在每个更改上执行副本。它更有效。

使用示例的ref：

handleButton = () => {
  console.log(this.refs.textarea.value);
}
render() {
  return (
    <span>
      <textarea ref='textarea'/>
      <button onClick={this.handleButton}/>
    </span>
  )
}

也许"肮脏"一词感到困惑。这意味着状态并非每次都是实际的，并且数据提取是由用户代码而不是React执行的。两种方法都有其优势。选择最适合您的东西。