小编Mat*_*wne的帖子

React新手的常见问题是为什么双向数据绑定不是内置功能,而通常的响应包括对单向数据流的解释以及出于性能原因而不总是需要双向数据绑定的想法.这是我想要更详细了解的第二点.

我目前正在为apollo-link-state(来自Apollo的新客户端状态管理工具)的表单库工作.除了使用apollo-link-state而不是redux作为状态管理器之外,这个概念与redux-form非常相似.(请注意,表单状态与域实体的状态分开存储,但实体可以选择用于填充表单的初始状态.)

当用户在表单上进行更改时,库会立即通过onChange处理程序更新存储.我正考虑允许个别字段选择退出该行为,以防程序员关注性能,但后来我开始怀疑这何时会成为真正的性能问题.oninput无论如何,浏览器都会触发事件,因此我能想到的唯一性能考虑因素是存储是否随用户类型而更新.当然,执行突变而不仅仅是调用会产生额外的开销setState(),但这实际上只相当于一些额外的函数调用.让我们假设我没有使用apollo而只是调用一个直接更新某个全局存储的函数 - 那么性能考虑是什么呢？

我的想法是,如果表单支持在用户键入一个字段时立即更新表单状态,那么对于所有字段也可以这样做.用户一次只能键入一个字段,我看不到使某些字段有时更快(可能忽略不计)的页面的好处,有时候会慢一些.此外,我的库允许消费者使用他们想要的任何输入组件,因此如果程序员只想要更少的状态更新,他们就可以编写一个组件来消除React的onChange事件或使用浏览器自己change或blur事件.

我在这里错过了什么吗？在用户提交表单之前,我的库的用户是否还想忽略特定字段的更改？或者更有用的选择是忽略对整个表单的更改(直到提交)？

这是我当前方法背后的基本概念的基本(大大简化)说明:

// defined in a globally-accessible module
const formState = {
    // This somehow causes any dependent form components to re-render
    // when state changes
    update(formName, updatedState) {
        ...
    }
}
export default formState

...
// UserForm.js:

export default class UserForm extends PureComponent {
    componentDidMount() {
        formState.userForm = {
            firstName: '',
            lastName: '',
        }
    }

    handleChange(e) {
        const { …