Question

我想了解React主张处理textarea价值变化的方式所带来的性能影响。

在React的单向数据流理念之前，人们可以这样做：

button.onClick( processInput(textarea.value) );

现在，必须要做

textarea.onChange( dispatch({ type: "inputChange", value: textarea.value }) );
button.onClick( dispatch({ type: "buttonClick" }) );

store(
    if (action.type === "inputChange") {
        this.lastInput = action.value
    } else if (action.type === "buttonClick") {
        processInput(this.lastInput)
    }
)

我的理解是否正确？与以前相比，这个更多事件不是吗？为什么垃圾邮件有很多无用的inputChange事件？如果我的理解不对，那么正确的React方法是什么？

Answer 1

首先，你要混淆几件不同的事情。 React的“受控输入”模式不需要Redux。您可以使用本地组件状态在组件内实现受控输入。我有一个要点在https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc讨论这个概念。

其次，即使您使用的是Redux，也不会直接使用Redux状态和操作来控制输入。你是否这样做取决于你。实际上，有时您可能希望在组件中本地缓冲文本onChange事件，并且只有在用户完成键入后才调度Redux操作。我在https://gist.github.com/markerikson/554cab15d83fd994dfab处有另一个要点展示缓冲包装组件。

最后，即使你决定直接控制Redux状态的输入，我也不确定你为什么说它是“更多事件”。无论如何，输入的onChange将在每次打字时触发。您是否选择对这些事件执行某些操作（例如将其转换为Redux操作）或忽略它们取决于您。或者，如果您更喜欢使用“不受控制的输入”，并在有人点击提交时询问输入值，那么这完全取决于您。

Answer 2

我认为最好从the Gist中提取实际代码并将其放在此处。

如果仅在按钮点击时需要文本值，则可以通过ref

询问

const MyComponent extends Component {  
  onClick() {  
    const input = this.refs.myInput;  
    const value = input.value;  
    // do something with the value  
  }

  render() {
    return <input type="text" ref="myInput" />
  }
}

您可以使用refs访问组件内部的DOM元素。如果您需要一些简单的解决方案，那将对您有用。

textarea的onChange事件，而不是在需要时获取值

2 个答案: