Skip to content

Commit 90c50a1

Browse files
author
古映杰
committed
Merge branch 'dev'
2 parents c612956 + 6973fbb commit 90c50a1

16 files changed

Lines changed: 1394 additions & 1081 deletions

‎dist/react-lite.common.js‎

Lines changed: 411 additions & 358 deletions
Large diffs are not rendered by default.

‎dist/react-lite.js‎

Lines changed: 411 additions & 358 deletions
Large diffs are not rendered by default.

‎dist/react-lite.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-lite.min.js.gz‎

35 Bytes
Binary file not shown.

‎examples/simple/app.js‎

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@
155155
return React.createElement(
156156
'div',
157157
{ id: 'abc' },
158+
Math.random() > 0.5 && img,
158159
React.createElement(
159160
'span',
160161
{ ref: Math.random() > 0.5 ? '' : 'test-ref', 'data-test': 'abaasdf' },
@@ -208,8 +209,7 @@
208209
{ href: 'adbadfasdf' },
209210
'test link'
210211
),
211-
React.createElement('p', { dangerouslySetInnerHTML: { __html: 'test dangerouslySetInnerHTML: ' + Math.random().toString(36).substr(2) } }),
212-
Math.random() > 0.5 && img
212+
React.createElement('p', { dangerouslySetInnerHTML: { __html: 'test dangerouslySetInnerHTML: ' + Math.random().toString(36).substr(2) } })
213213
);
214214
}
215215
});
@@ -334,7 +334,59 @@
334334
};
335335

336336
var num = 10;
337-
update();
337+
// update()
338+
339+
var log;
340+
var logger = function logger(msg) {
341+
return function () {
342+
// return true for shouldComponentUpdate
343+
log.push(msg);
344+
return true;
345+
};
346+
};
347+
var Outer = React.createClass({
348+
displayName: 'Outer',
349+
350+
render: function render() {
351+
return React.createElement(
352+
'div',
353+
null,
354+
React.createElement(Inner, { x: this.props.x })
355+
);
356+
},
357+
componentWillMount: logger('outer componentWillMount'),
358+
componentDidMount: logger('outer componentDidMount'),
359+
componentWillReceiveProps: logger('outer componentWillReceiveProps'),
360+
shouldComponentUpdate: logger('outer shouldComponentUpdate'),
361+
componentWillUpdate: logger('outer componentWillUpdate'),
362+
componentDidUpdate: logger('outer componentDidUpdate'),
363+
componentWillUnmount: logger('outer componentWillUnmount')
364+
});
365+
var Inner = React.createClass({
366+
displayName: 'Inner',
367+
368+
render: function render() {
369+
return React.createElement(
370+
'span',
371+
null,
372+
this.props.x
373+
);
374+
},
375+
componentWillMount: logger('inner componentWillMount'),
376+
componentDidMount: logger('inner componentDidMount'),
377+
componentWillReceiveProps: logger('inner componentWillReceiveProps'),
378+
shouldComponentUpdate: logger('inner shouldComponentUpdate'),
379+
componentWillUpdate: logger('inner componentWillUpdate'),
380+
componentDidUpdate: logger('inner componentDidUpdate'),
381+
componentWillUnmount: logger('inner componentWillUnmount')
382+
});
383+
384+
var container = document.createElement('root');
385+
log = [];
386+
React.render(React.createElement(Outer, { x: 17 }), container);
387+
log = [];
388+
React.unmountComponentAtNode(container);
389+
console.log(log);
338390

339391
// class TestRootUpdateAtDidMount extends React.Component {
340392
// componentDidMount() {
@@ -405,5 +457,31 @@
405457
// updateName('init')
406458
// updateName('update')
407459

460+
// class Test extends React.Component {
461+
// componentWillMount() {
462+
// console.log(this.props.index, 'willMount')
463+
// debugger
464+
// }
465+
// componentDidMount() {
466+
// console.log(this.props.index, 'didMount')
467+
// debugger
468+
// }
469+
// componentWillUnmount() {
470+
// console.log(this.props.index, 'willUnmount')
471+
// }
472+
// render() {
473+
// return <div>{this.props.index}</div>
474+
// }
475+
// }
476+
477+
// var root = (
478+
// <div>
479+
// <Test index={0} />
480+
// <Test index={1} />
481+
// <Test index={2} />
482+
// </div>)
483+
484+
// React.render(root, document.getElementById('container'))
485+
408486
/***/ }
409487
/******/ ]);

‎examples/simple/index.js‎

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ const Counter = React.createClass({
9494
/>
9595
return (
9696
<div id="abc">
97+
{ Math.random() > 0.5 && img }
9798
<span ref={Math.random() > 0.5 ? '' : 'test-ref'} data-test="abaasdf">count: { props.count }</span>
9899
{' '}
99100
<button onClick={ () => COUNT('INCREMENT') }>+</button>
@@ -114,7 +115,6 @@ const Counter = React.createClass({
114115
<button onClick={ this.getNum }>run</button>
115116
<a href="adbadfasdf">test link</a>
116117
<p dangerouslySetInnerHTML={{ __html: 'test dangerouslySetInnerHTML: ' + Math.random().toString(36).substr(2)}}></p>
117-
{ Math.random() > 0.5 && img }
118118
</div>
119119
)
120120
}
@@ -232,7 +232,48 @@ let update = count => {
232232
}
233233

234234
let num = 10
235-
update()
235+
// update()
236+
237+
var log;
238+
var logger = function(msg) {
239+
return function() {
240+
// return true for shouldComponentUpdate
241+
log.push(msg);
242+
return true;
243+
};
244+
};
245+
var Outer = React.createClass({
246+
render: function() {
247+
return <div><Inner x={this.props.x} /></div>;
248+
},
249+
componentWillMount: logger('outer componentWillMount'),
250+
componentDidMount: logger('outer componentDidMount'),
251+
componentWillReceiveProps: logger('outer componentWillReceiveProps'),
252+
shouldComponentUpdate: logger('outer shouldComponentUpdate'),
253+
componentWillUpdate: logger('outer componentWillUpdate'),
254+
componentDidUpdate: logger('outer componentDidUpdate'),
255+
componentWillUnmount: logger('outer componentWillUnmount'),
256+
});
257+
var Inner = React.createClass({
258+
render: function() {
259+
return <span>{this.props.x}</span>;
260+
},
261+
componentWillMount: logger('inner componentWillMount'),
262+
componentDidMount: logger('inner componentDidMount'),
263+
componentWillReceiveProps: logger('inner componentWillReceiveProps'),
264+
shouldComponentUpdate: logger('inner shouldComponentUpdate'),
265+
componentWillUpdate: logger('inner componentWillUpdate'),
266+
componentDidUpdate: logger('inner componentDidUpdate'),
267+
componentWillUnmount: logger('inner componentWillUnmount'),
268+
});
269+
270+
271+
var container = document.createElement('root');
272+
log = [];
273+
React.render(<Outer x={17} />, container);
274+
log = [];
275+
React.unmountComponentAtNode(container);
276+
console.log(log)
236277

237278

238279
// class TestRootUpdateAtDidMount extends React.Component {
@@ -303,4 +344,39 @@ update()
303344
// }
304345

305346
// updateName('init')
306-
// updateName('update')
347+
// updateName('update')
348+
349+
350+
351+
352+
353+
// class Test extends React.Component {
354+
// componentWillMount() {
355+
// console.log(this.props.index, 'willMount')
356+
// debugger
357+
// }
358+
// componentDidMount() {
359+
// console.log(this.props.index, 'didMount')
360+
// debugger
361+
// }
362+
// componentWillUnmount() {
363+
// console.log(this.props.index, 'willUnmount')
364+
// }
365+
// render() {
366+
// return <div>{this.props.index}</div>
367+
// }
368+
// }
369+
370+
// var root = (
371+
// <div>
372+
// <Test index={0} />
373+
// <Test index={1} />
374+
// <Test index={2} />
375+
// </div>)
376+
377+
// React.render(root, document.getElementById('container'))
378+
379+
380+
381+
382+

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-lite",
3-
"version": "0.15.0",
3+
"version": "0.15.1",
44
"description": "an implementation of React that optimizes for small script size",
55
"main": "dist/react-lite.common.js",
66
"jsnext:main": "src/index.js",

‎src/Children.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ export let forEach = (children, iteratee, context) => {
1212
if (children == null) {
1313
return children
1414
}
15+
let index = 0
1516
if (_.isArr(children)) {
16-
_.flattenChildren(children, (child, index) => {
17-
iteratee.call(context, child, index)
17+
_.flattenChildren(children, child => {
18+
iteratee.call(context, child, index++)
1819
})
1920
} else {
20-
iteratee.call(context, children, 0)
21+
iteratee.call(context, children, index)
2122
}
2223
}
2324

@@ -32,7 +33,7 @@ export let map = (children, iteratee, context) => {
3233
data.child = iteratee.call(context, child, index) || child
3334
data.isEqual = data.child === child
3435
let key = data.key = getKey(child, index)
35-
if (keyMap.hasOwnProperty(key)) {
36+
if (_.hasOwn(keyMap, key)) {
3637
keyMap[key] += 1
3738
} else {
3839
keyMap[key] = 0

‎src/Component.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as _ from './util'
2-
import { renderComponent, clearPendingComponents, compareTwoTrees } from './virtual-dom'
2+
import { renderComponent, clearPendingComponents, compareTwoVnodes } from './virtual-dom'
33

44
export let updateQueue = {
55
updaters: [],
@@ -135,7 +135,7 @@ Component.prototype = {
135135
let nextContext = $cache.context || {}
136136
let parentContext = $cache.parentContext
137137
let node = $cache.node
138-
let vtree = $cache.vtree
138+
let vnode = $cache.vnode
139139
$cache.props = $cache.state = $cache.context = null
140140
$updater.isPending = true
141141
if (this.componentWillUpdate) {
@@ -144,13 +144,13 @@ Component.prototype = {
144144
this.state = nextState
145145
this.props = nextProps
146146
this.context = nextContext
147-
let nextVtree = renderComponent(this, parentContext)
148-
let newNode = compareTwoTrees(vtree, nextVtree, node, node.parentNode, nextVtree.context)
147+
let newVnode = renderComponent(this, parentContext)
148+
let newNode = compareTwoVnodes(vnode, newVnode, node, newVnode.context)
149149
if (newNode !== node) {
150150
newNode.cache = newNode.cache || {}
151151
_.extend(newNode.cache, node.cache)
152152
}
153-
$cache.vtree = nextVtree
153+
$cache.vnode = newVnode
154154
$cache.node = newNode
155155
clearPendingComponents()
156156
if (this.componentDidUpdate) {

0 commit comments

Comments
 (0)