1 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
2 |
|
3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
4 |
|
5 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
6 |
|
7 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
8 |
|
9 | var _Immutable = Immutable,
|
10 | List = _Immutable.List;
|
11 |
|
12 | var Example = function (_React$Component) {
|
13 | _inherits(Example, _React$Component);
|
14 |
|
15 | function Example(props) {
|
16 | _classCallCheck(this, Example);
|
17 |
|
18 | var _this = _possibleConstructorReturn(this, (Example.__proto__ || Object.getPrototypeOf(Example)).call(this, props));
|
19 |
|
20 | _this.state = {
|
21 | items: List(),
|
22 | current: 'square'
|
23 | };
|
24 |
|
25 | _this.handleAdd = function () {
|
26 | var _this$state = _this.state,
|
27 | items = _this$state.items,
|
28 | current = _this$state.current;
|
29 |
|
30 | _this.setState({
|
31 | items: items.push(current),
|
32 | current: current === 'circle' ? 'square' : 'circle'
|
33 | });
|
34 | };
|
35 |
|
36 | return _this;
|
37 | }
|
38 |
|
39 | _createClass(Example, [{
|
40 | key: 'render',
|
41 | value: function render() {
|
42 | var _state = this.state,
|
43 | items = _state.items,
|
44 | current = _state.current;
|
45 |
|
46 | return React.createElement(
|
47 | 'div',
|
48 | { className: 'example' },
|
49 | React.createElement(
|
50 | 'div',
|
51 | { className: 'add-section' },
|
52 | React.createElement('div', { className: current }),
|
53 | React.createElement(
|
54 | 'button',
|
55 | {
|
56 | type: 'button',
|
57 | onClick: this.handleAdd,
|
58 | className: 'add-button btn btn-secondary'
|
59 | },
|
60 | 'Add ',
|
61 | current
|
62 | )
|
63 | ),
|
64 | React.createElement(ItemList, { items: items.filter(function (i) {
|
65 | return i === 'square';
|
66 | }) }),
|
67 | React.createElement(ItemList2, { items: items.filter(function (i) {
|
68 | return i === 'circle';
|
69 | }) })
|
70 | );
|
71 | }
|
72 | }]);
|
73 |
|
74 | return Example;
|
75 | }(React.Component);
|
76 |
|
77 | var ItemsListRenders = 0;
|
78 | var ItemsList2Renders = 0;
|
79 |
|
80 | var mapItem = function mapItem(item) {
|
81 | return React.createElement('div', { className: item });
|
82 | };
|
83 |
|
84 | var ItemList = function (_React$PureComponent) {
|
85 | _inherits(ItemList, _React$PureComponent);
|
86 |
|
87 | function ItemList() {
|
88 | _classCallCheck(this, ItemList);
|
89 |
|
90 | return _possibleConstructorReturn(this, (ItemList.__proto__ || Object.getPrototypeOf(ItemList)).apply(this, arguments));
|
91 | }
|
92 |
|
93 | _createClass(ItemList, [{
|
94 | key: 'componentWillUpdate',
|
95 | value: function componentWillUpdate() {
|
96 | ItemsListRenders += 1;
|
97 | }
|
98 | }, {
|
99 | key: 'render',
|
100 | value: function render() {
|
101 | var items = this.props.items.map(mapItem);
|
102 | return React.createElement(
|
103 | 'div',
|
104 | { className: 'item-list' },
|
105 | React.createElement(
|
106 | 'div',
|
107 | { className: 'counter' },
|
108 | 'Render count: ',
|
109 | ItemsListRenders
|
110 | ),
|
111 | React.createElement(
|
112 | 'div',
|
113 | { className: 'items' },
|
114 | items
|
115 | )
|
116 | );
|
117 | }
|
118 | }]);
|
119 |
|
120 | return ItemList;
|
121 | }(React.PureComponent);
|
122 |
|
123 | var ItemList2 = function (_ImmutablePureCompone) {
|
124 | _inherits(ItemList2, _ImmutablePureCompone);
|
125 |
|
126 | function ItemList2() {
|
127 | _classCallCheck(this, ItemList2);
|
128 |
|
129 | return _possibleConstructorReturn(this, (ItemList2.__proto__ || Object.getPrototypeOf(ItemList2)).apply(this, arguments));
|
130 | }
|
131 |
|
132 | _createClass(ItemList2, [{
|
133 | key: 'componentWillUpdate',
|
134 | value: function componentWillUpdate() {
|
135 | ItemsList2Renders += 1;
|
136 | }
|
137 | }, {
|
138 | key: 'render',
|
139 | value: function render() {
|
140 | var items = this.props.items.map(mapItem);
|
141 | return React.createElement(
|
142 | 'div',
|
143 | { className: 'item-list' },
|
144 | React.createElement(
|
145 | 'div',
|
146 | { className: 'counter' },
|
147 | 'Render count: ',
|
148 | ItemsList2Renders
|
149 | ),
|
150 | React.createElement(
|
151 | 'div',
|
152 | { className: 'items' },
|
153 | items
|
154 | )
|
155 | );
|
156 | }
|
157 | }]);
|
158 |
|
159 | return ItemList2;
|
160 | }(ImmutablePureComponent);
|
161 |
|
162 | ReactDOM.render(React.createElement(Example, null), document.getElementById('example'));
|