Question

我有一个包含输入元素的React组件。当输入值改变时，处理函数应该验证输入并相应地动作。实际验证器是动态创建的（通过new Function(code)），实际代码作为字符串prop传递给元素。验证代码永远不会因给定组件而改变。

现在我正在实际的onChange处理程序中进行函数构造，这似乎是不必要的。它也不属于国家。我想创建一次该函数，将其存储在某个地方并按需使用它。我的问题是，应该在哪里存储？我应该将它作为实际组件对象的属性吗？ statics对象似乎也是合理的，但是可以动态传递属性（如上面的代码字符串），如果是，那么如何？

Answer 1

从重现性的角度来看，重新计算onchange中的验证器并不是那么糟糕。它只影响性能，如果这是一个问题，一种可能性就是使用您选择的缓存机制：

handleOnChange: function(){
    if(this.cachedValidatorString !== this.props.validatorString){
        this.cachedValidatorString = this.props.validatorString;
        this.cachedValidator = new Function(...);
    }

    // ...
}

另一种可能更简洁的方法是更新render方法中的validatorFunction字段。这是你最早可以更新它的，它保证它总是对应你当前的道具。

render: function(){
   this.validatorFunction = new Function(this.props.validatorString);

   return <input onChange={...} />;
}

至于你提到的其他可能性：

我同意this.state不是放置验证器函数的最佳位置，因为通常你想避免放置可以从状态中的props计算的东西。见props in getInitialState as an anti pattern

最后，我不认为静力学在这里会有意义。静态属性由类的所有实例共享，但验证器函数对于组件的每个实例都需要不同。

使用动态创建的函数来反应组件

1 个答案: