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

【问题标题】：React component with dynamically created function使用动态创建的函数反应组件
【发布时间】：2014-10-02 15:55:55
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案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 计算的东西放入 state 中。见props in getInitialState as an anti pattern

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

【讨论】：