Comments (5)
RubyLouvre
commented on June 22, 2024
1
from anu.
RubyLouvre
commented on June 22, 2024
deep是指，如果孩子中存在数组，那么这个数组的元素的deep加1，如果这个数组的元素也是数组，那么二维数组的孩子deep继续加1
from anu.
RubyLouvre
commented on June 22, 2024
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script>
window.onload = function () {
const stack = [];
const EMPTY_CHILDREN = [];
var React = {
createElement: function (type, configs) {
var props = {},
key = null,
ref = null,
pChildren = null, //位于props中的children
props = {},
vtype = 1,
typeType = typeof type,
children = EMPTY_CHILDREN,
isEmptyProps = true
if (configs) {
for (let i in configs) {
var val = configs[i]
if (i === 'key') {
key = val
} else if (i === 'ref') {
ref = val
} else if (i === 'children') {
pChildren = val
} else {
isEmptyProps = false
props[i] = val
}
}
}
if (typeType === 'function') {
vtype = type.prototype && type.prototype.render ?
2 :
4
}
for (let i = 2, n = arguments.length; i < n; i++) {
var el = arguments[i]
if (el && el.pop) {
el.deep = 1
}
stack.push(el)
}
var lastText, child, simple, i
while (stack.length) {
//比较巧妙地判定是否为子数组
if ((child = stack.pop()) && child.pop !== undefined) {
for (i = 0; i < child.length; i++) {
stack.push(child[i])
}
} else {
if (/boolean|undefined/.test(typeof child))
child = ''
if (typeof child !== 'object') {
simple = true
if (typeof child === 'number')
child = child + ''
} else {
simple = child.type === '#text'
}
if (simple && lastText) {
lastText.text = child + lastText.text
} else {
if (typeof child === 'string') {
child = {
type: '#text',
text: child
}
lastText = child
} else {
lastText = null
}
if (children === EMPTY_CHILDREN) {
children = [child];
} else {
children.unshift(child);
}
}
}
}
props.children = children
return new VNode(type, props, key, vtype)
}
}
function VNode(type, props, key, vtype) {
this.type = type
this.props = props
this.vtype = vtype
this.deep = 0
if (key) {
this.key = key
}
}
var a = React.createElement('div', {}, "aaa", "bbb", ["ccc", 'ddd', React.createElement('span', {}),
'eee', 'fff'
])
console.log(a)
}
</script>
</head>
<body>
<div>这个默认会被清掉</div>
<div id='example'></div>
</body>
</html>from anu.
RubyLouvre
commented on June 22, 2024
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
</style>
<!--<script type='text/javascript' src="./dist/React.js"></script>-->
<!-- <script src="./test/react.js"></script>
<script src="./test/react-dom.js"></script>
<script src="./test/redux.js"></script>
<script src="./test/react-redux.js"></script>
<script src="./test/babel.js"></script>-->
<script>
window.onload = function () {
const stack = [];
const EMPTY_CHILDREN = [];
var React = {
createElement: function (type, configs) {
var props = {},
key = null,
ref = null,
pChildren = null, //位于props中的children
props = {},
vtype = 1,
typeType = typeof type,
children = EMPTY_CHILDREN
isEmptyProps = true
if (configs) {
for (var i in configs) {
var val = configs[i]
if (i === 'key') {
key = val
} else if (i === 'ref') {
ref = val
} else if (i === 'children') {
pChildren = val
} else {
isEmptyProps = false
props[i] = val
}
}
}
if (typeType === 'function') {
vtype = type.prototype && type.prototype.render ?
2 :
4
}
for (var i = 2, n = arguments.length; i < n; i++) {
stack.push(arguments[i])
}
if (!stack.length && pChildren) {
Array.prototype.push.apply(stack, pChildren)
}
var last = false
while (stack.length) {
var el = stack.pop()
if (el && el.pop) {
var arr = el;
var curDeep = arr.deep || 1
for (i = 0, n = arr.length; i < n; i++) {
var elem = toVNode(arr[i], curDeep, true)
if (elem) {
stack.push(elem);
}
}
} else {
el = toVNode(el, 0)
if (!el)
continue
if (children === EMPTY_CHILDREN) {
children = [el]
if (el.type == '#text') {
last = el
}
} else {
if (el.type === '#text') {
if (last) {
last.text = el.text + last.text
} else {
children.unshift(el)
last = el
}
} else {
children.unshift(el)
last = false
}
}
}
}
props.children = children
return new VNode(type, props, key, vtype)
}
}
var nullMap = {
'null': 1,
'undefined': 1,
'true': 1,
'false': 1
}
function toVNode(el, deep, k) {
var type = typeof el
if (type === 'string' || type === 'number') {
return {
type: '#text',
deep: deep,
text: el + ''
}
}
if (nullMap[el]) {
return false
}
if (el.pop) {
el.deep++
} else {
el.deep = el.deep || deep
}
return el
}
function VNode(type, props, key, vtype) {
this.type = type
this.props = props
this.vtype = vtype
this.deep = 0
if (key) {
this.key = key
}
}
var a = React.createElement('div', {}, "xxx", "yyy", ["aaa", 'bbb', [React.createElement('span', {}),
'555'
],
React.createElement('p', {}), [React.createElement('b', {})]
], "zzzz")
console.log(a)
}
</script>
</head>
<body>
<xmp>
</xmp>
<div>这个默认会被清掉</div>
<div id='example'></div>
</body>
</html>from anu.
RubyLouvre
commented on June 22, 2024
const stack = [];
const EMPTY_CHILDREN = [];
var React = {
createElement: function (type, configs) {
var props = {},
key = null,
ref = null,
pChildren = null, //位于props中的children
props = {},
vtype = 1,
typeType = typeof type,
lastSimple, child, simple, i,
children = EMPTY_CHILDREN
isEmptyProps = true
if (configs) {
for (var i in configs) {
var val = configs[i]
if (i === 'key') {
key = val
} else if (i === 'ref') {
ref = val
} else if (i === 'children') {
pChildren = val
} else {
isEmptyProps = false
props[i] = val
}
}
}
if (typeType === 'function') {
vtype = type.prototype && type.prototype.render ?
2 :
4
}
for (var i = 2, n = arguments.length; i < n; i++) {
var el = arguments[i]
if (el && el.pop) {
el.deep = 1
}
stack.push(el)
}
var method, lastText
while (stack.length) {
if ((child = stack.pop()) && child.pop !== undefined) {
for (i = 0; i < child.length; i++) {
stack.push(child[i]);
}
} else {
if (/boolean|undefined/.test(typeof child))
child = '';
if (typeof child !== 'object') {
simple = true
if (typeof child === 'number')
child = child + ''
} else {
simple = child.type === '#text'
}
if (simple && lastText) {
lastText.text = child + lastText.text
} else {
if (typeof child === 'string') {
child = {
type: '#text',
text: child
}
lastText = child
} else {
lastText = null
}
if (children === EMPTY_CHILDREN) {
children = [child];
} else {
children.unshift(child);
}
}
}
}
props.children = children
var a = new VNode(type, props, key, vtype)
// stack.push(a)
return a
}
}
function VNode(type, props, key, vtype) {
this.type = type
this.props = props
this.vtype = vtype
this.deep = 0
if (key) {
this.key = key
}
}
var a = React.createElement('div', {}, "aaa", "bbb", ["ccc", 'ddd', React.createElement('span', {}), 'eee','fff'])
console.log(a)
}
</script>
<div>这个默认会被清掉</div>
<div id='example'></div>
from anu.
Related Issues (20)
- input输入汉字不触发onChange事件 HOT 2
- 项目是否考虑升级为ts HOT 1
- 二次元魔法师希望你在那边过的开心
- 1 HOT 1
- 致敬，大佬走好 HOT 9
- RIP
- RIP HOT 5
- 致敬
- 致敬，默哀 HOT 3
- 一路走好
- 走好 HOT 3
- RIP
- 官方Q群加不进去
- 走好 大佬
- RIP ，走好大佬
- 大佬 走好
- 大佬 走好！
- 还有人维护这个库吗？
- IE8别用这个库，有内存泄漏问题，我因为自己的机器是ie11写完了才发现，特此提醒你们，并且以后也不会有人维护了 HOT 1
- 大佬走好
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anu.