Question

我有一个拥有许多子组件的组件。在render()中，我必须循环遍历每个项目以构建子项。在这个循环中，我检查每个项目，看它是否是“特殊的”。如果是，我将它存储在一个变量中。

我这样做是因为componentDidMount定义了一个经常引用的事件处理程序，它需要对特殊项的引用（并且不希望重复遍历所有项）。

React中的惯用语是将此引用存储在this.props.specialItem还是this.specialItem？

以下是psuedocode中的情况示例：

var ItemList = React.createClass({
  componentDidMount: function() {
    $(document).keydown(function(e) {
      if (e.which === 27) {
        this.setState({ currentItem: this.specialItem });
        return;
      }
    }.bind(this));
  },

  render: function() {
    var items = _.map(this.state.data, function(item) {
      if (!this.specialItem && this.isSpecial(item)) {
        ////////////////////////////////////////////////////
        this.specialItem = item;
        // or should this be this.props.specialItem ?
        ////////////////////////////////////////////////////
      }
      // ...
    }.bind(this));
  }
});

Answer 1

查看您的伪代码，我们知道一些事情：

this.state.data是一系列项目
this.isSpecial(item)告诉我们某件商品是否是特别商品
当按下 Esc 时，我们要将state.currentItem设置为特殊项目

有了这个，我们可以从render函数中删除这个特殊逻辑，并且只在我们的keypress处理程序中使用它。

componentDidMount: function(){
    $(document).keydown(function(e) {
        if (e.which === 27) {
            var special = this.state.data.find(this.isSpecial);
            this.setState({currentItem: special});
        }
    }.bind(this));
}

这确实依赖于Array.prototype.find，这是懒惰的（效率更高），我们只是在用户按下 Esc 键时进行此检查...这可能是比调用渲染函数的频率低得多。

如果用户要经常使用此密钥，则可以将其存储在this.specialItem的{{1}}中，从而获得更好的性能。

在React中将此引用存储在this.props.specialItem或this.specialItem中是否惯用？

你永远不应该用componentWillRecieveProps设置道具。

与往常一样，不要忘记在this.props.anything = something中删除您的事件处理程序。

React.js仅用于在组件之间传递数据吗？

1 个答案: