Question

针对Immutable.List过滤shouldComponentUpdate传递给子组件的最佳做法是什么？

说明性示例：我正在构建日历。它有一个<Week>组件，包含七个<Day>组件。 <Week>会收到所有日历事件的列表，然后呈现<Day>并将过滤的事件子集作为道具传递给每个事件。

所有<Day>组件都附加了PureRenderMixin，目的是防止无用的重新渲染。但是，假设Immutable.List.filter每次都返回一个新对象，当添加单个事件时，每个<Day>组件都会收到一个新的＆＃39;事件列表作为道具并重新渲染，即使其中只有一个具有相同的内容。

我目前的想法是编写一个自定义shouldComponentUpdate，比较每个列表组件的hashCode决定基于此重新呈现。是否有更好，更成熟的方法来做到这一点？

请求的代码示例。假设<Week>连接到磁通存储并从中获取事件。

Day = React.createClass({
  propTypes: { events: React.PropTypes.instanceOf(Immutable.List) },

  mixins: [ React.addons.PureRenderMixin ],

  render: function(){
    const events = this.props.events.map((event) => {
      return <div key={event.get('id')}>{event.get('name')}</div>
    })

    return <div>{events}</div>
  }
})

Week = React.createClass({
  propTypes: { events: React.PropTypes.instanceOf(Immutable.List) },

  mixins: [ React.addons.PureRenderMixin ],

  render: function(){
    const days = [1,2,3,4,5,6,0].map((weekday) => {
      const dayEvents = this.props.events.filter(event => event.get('weekday') === weekday)

      return <Day events={dayEvents} key={weekday} /> 
    })

    return <div>{days}</div>
  }
})

Answer 1

您应该重新构建模型 -

var eventTouch = function(e){    
    var container = $(".messenger");
        if (!container.is(e.target) 
            && container.has(e.target).length === 0) 
           {
            container.empty();
            container.off( 'click', clickDocument );
           }
    }

$(document).mouseup(eventTouch);
$(document).on('touchstart', eventTouch);

通过这种方式，您可以将正确的事件集传递给正确的子日组件。

<强>更新注意到您正在使用工作日的数字，只需用数字替换日期名称，或使用List /数组来存储事件。基本上我们不需要调用{'Monday':{...events...}, 'Tuesday':{...events...}, ...}。

React.js + Immutable.js：带有筛选列表的shouldComponentUpdate的最佳实践

1 个答案: