1. Qiita
  2. 投稿
  3. reactjs

Some reasons why you should/shouldn't consider using facebook's immutable-js with React (with Highcharts usage examples)

  • 20
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

If you're willing to go and use immutable-js for your data interaction, it can be quite easy to use it.

Should you use it?

Pros:

  • Immutable.is() makes checks for changes to props trivial

  • Easy to just compare references instead

  • Easily converted into vanilla JS objects

  • Don't have to use React.addons.update and its ugly syntax

  • Merging objects is trivial

  • Simple, easy to understand API

  • Immutable

  • Ability to show your neckbearded FP friends who's Daddy Neckbeard

Cons:

  • Immutable.is() can blur the line between ref and value checking

  • Doesn't deal with vanilla JS objects, need to keep as Immutable objects until conversion is needed

  • Extra dependency outside of React (react w/addons vs another dependency)

  • Unfamiliar method names for uninterested/not-neckbearded people

  • Need to either deal with autocompleting Immutable or come up with a good name to use as an imported module

  • Forces consumers of your library/components to use it also, unless you're willing to swallow the cost of doing conversions/deep compares all the time

  • Can't just mutate properties of objects directly

Con Example

Take this block of code:

componentDidUpdate: function (prevProps) {
    if (!Immutable.is(this.props.chart, prevProps.chart)) {
      this.state.chartInstance.destroy();
      this.initializeChart();
    }
    if (!Immutable.is(this.props.width, prevProps.width) ||
        !Immutable.is(this.props.height, prevProps.height)) {
      this.state.chartInstance.setSize(this.props.width, this.props.height);
    }
    // prevent re-render
    return false;
  },

In the first Immutable.is call, we are simply looking for a ref check between the previous chart and the current chart to look for changes.

In the second Immutable.is call, we are actually looking for the value change between the previous width and height and the current.

This isn't actually too surprising, but could catch people off guard.

Pro Example

Compare these two blocks of code:

var chartOptions = React.addons.update(chartModel, {
  chart: {
    renderTo: {$set: this.refs.myChart.getDOMNode()},
    width: {$set: this.props.width || null},
    height: {$set: this.props.height || null}
  },
  series: {$set: this.props.series}
});
var chartInstance = new Highcharts.Chart(chartOptions);
  this.setState({
  chartInstance: chartInstance
});
var chartOptions = Immutable.Map({
  chart: {
    renderTo: this.refs.myChart.getDOMNode(),
    width: this.props.width || null,
    height: this.props.height || null,
  },
  series: this.props.series
});
var chartModel = this.props.chart.merge(chartOptions);
this.setState({
  chartInstance: new global.Highcharts.Chart(chartModel.toJS())
});

I think the the legibility and ease of use of immutable-js far outweighs the benefit of using vanilla JS objects using React.addons.update.

百聞は一見にしかず?

As always, better to see for yourself if it's worth using. Compare the code for React.addons.update and immutable-js and decide for yourself.

(I will probably be using both, depending on the situation...)