Skip to content

Commit 46e5d65

Browse files
author
qq281113270
committed
react 源码分析
1 parent b3fee80 commit 46e5d65

36 files changed

+72177
-24291
lines changed

‎common/js/react-dom.development.v16.12.0.js‎

Lines changed: 27910 additions & 21292 deletions
Large diffs are not rendered by default.

‎common/js/react.development.v16.12.0.js‎

Lines changed: 3401 additions & 2990 deletions
Large diffs are not rendered by default.

‎common/js/react.v16.12.0.js‎

Lines changed: 39160 additions & 0 deletions
Large diffs are not rendered by default.

‎es5.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
<title>Hello React!</title>
77
<script src="./common/js/ajax.js"></script>
88
<!--官方提供的 CDN 地址：-->
9-
<script src="./common/js/react.development.v16.12.0.js"></script>
10-
<script src="./common/js/react-dom.development.v16.12.0.js"></script>
9+
<!-- <script src="./common/js/react.development.v16.12.0.js"></script>
10+
<script src="./common/js/react-dom.development.v16.12.0.js"></script> -->
1111
<!-- <script src="./common/js/browser-polyfill.5.8.38.js"></script> -->
12+
<script src="./common/js/react.v16.12.0.js"></script>
1213
<script src="./common/js/browser.5.8.38.js"></script>
1314

1415
</head>
@@ -37,7 +38,7 @@
3738
<body>
3839

3940
<div id="example" class="lsft-box"></div>
40-
<script src="./es5_code/es5_react_code/01/01.js" type="text/babel"></script>
41+
<script src="./es5_code/es5_react_code/01/01.js" ></script>
4142

4243
</body>
4344

‎es5_code/es5_react_code/01/01.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
'use strict';
22

3+
4+
var element = React.createElement(
5+
'h1',
6+
null,
7+
'Hello, world'
8+
)
9+
10+
console.log('element==',element)
311
ReactDOM.render(React.createElement(
412
'h1',
513
null,

‎es5_code/es5_react_code/01/02.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use strict';
2+
3+
var H = function H() {
4+
return React.createElement(
5+
'h1',
6+
null,
7+
'Hello, world'
8+
);
9+
};
10+
ReactDOM.render(React.createElement(H, null), document.getElementById('example'));

‎es5_code/es5_react_code/01/03.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use strict";
2+
3+
var H = function H() {
4+
return React.createElement(
5+
"div",
6+
null,
7+
React.createElement(
8+
"h1",
9+
null,
10+
"这个是标题"
11+
),
12+
React.createElement(
13+
"p",
14+
null,
15+
"这个是内容"
16+
)
17+
);
18+
};

‎es5_code/es5_react_code/01/04.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
var style = {
4+
width: '100px',
5+
height: '200px',
6+
color: 'red'
7+
};
8+
var H = function H() {
9+
return React.createElement(
10+
'div', {
11+
style: style
12+
},
13+
'Hello, world'
14+
);
15+
};
16+
ReactDOM.render(React.createElement(H, null), document.getElementById('example'));

‎es5_code/es5_react_code/02/02_01.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'use strict';
2+
3+
var number = 0;
4+
var H = function H() {
5+
return React.createElement(
6+
'div', {
7+
onClick: function() {
8+
console.log(++number);
9+
}
10+
},
11+
'点击事件'
12+
);
13+
};
14+
console.log('H=',H())
15+
ReactDOM.render(React.createElement(H, null), document.getElementById('example'));

‎es5_code/es5_react_code/03/03_01.js‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
'use strict';
2+
3+
var _extends = Object.assign || function(target) {
4+
for (var i = 1; i < arguments.length; i++) {
5+
var source = arguments[i];
6+
for (var key in source) {
7+
if (Object.prototype.hasOwnProperty.call(source, key)) {
8+
target[key] = source[key];
9+
}
10+
}
11+
}
12+
return target;
13+
};
14+
15+
var _createClass = (function() {
16+
function defineProperties(target, props) {
17+
for (var i = 0; i < props.length; i++) {
18+
var descriptor = props[i];
19+
descriptor.enumerable = descriptor.enumerable || false;
20+
descriptor.configurable = true;
21+
if ('value' in descriptor) descriptor.writable = true;
22+
Object.defineProperty(target, descriptor.key, descriptor);
23+
}
24+
}
25+
return function(Constructor, protoProps, staticProps) {
26+
if (protoProps) defineProperties(Constructor.prototype, protoProps);
27+
if (staticProps) defineProperties(Constructor, staticProps);
28+
return Constructor;
29+
};
30+
})();
31+
32+
var _get = function get(_x, _x2, _x3) {
33+
var _again = true;
34+
_function: while (_again) {
35+
var object = _x,
36+
property = _x2,
37+
receiver = _x3;
38+
_again = false;
39+
if (object === null) object = Function.prototype;
40+
var desc = Object.getOwnPropertyDescriptor(object, property);
41+
if (desc === undefined) {
42+
var parent = Object.getPrototypeOf(object);
43+
if (parent === null) {
44+
return undefined;
45+
} else {
46+
_x = parent;
47+
_x2 = property;
48+
_x3 = receiver;
49+
_again = true;
50+
desc = parent = undefined;
51+
continue _function;
52+
}
53+
} else if ('value' in desc) {
54+
return desc.value;
55+
} else {
56+
var getter = desc.get;
57+
if (getter === undefined) {
58+
return undefined;
59+
}
60+
return getter.call(receiver);
61+
}
62+
}
63+
};
64+
65+
function _classCallCheck(instance, Constructor) {
66+
if (!(instance instanceof Constructor)) {
67+
throw new TypeError('Cannot call a class as a function');
68+
}
69+
}
70+
71+
function _inherits(subClass, superClass) {
72+
if (typeof superClass !== 'function' && superClass !== null) {
73+
throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass);
74+
}
75+
subClass.prototype = Object.create(superClass && superClass.prototype, {
76+
constructor: {
77+
value: subClass,
78+
enumerable: false,
79+
writable: true,
80+
configurable: true
81+
}
82+
});
83+
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
84+
}
85+
86+
var ThemeContext = React.createContext();
87+
88+
function Button(props) {
89+
console.log('props===', props);
90+
return React.createElement(
91+
'button',
92+
null,
93+
props.theme
94+
);
95+
}
96+
97+
function ThemedButton(props) {
98+
return React.createElement(
99+
ThemeContext.Consumer,
100+
null,
101+
function(theme) {
102+
console.log('theme=', theme);
103+
console.log('props==', props);
104+
return React.createElement(Button, _extends({}, props, {
105+
theme: theme
106+
}));
107+
}
108+
);
109+
}
110+
111+
function Toolbar(props) {
112+
return React.createElement(
113+
'div',
114+
null,
115+
React.createElement(ThemedButton, null)
116+
);
117+
}
118+
119+
var App = (function(_React$Component) {
120+
_inherits(App, _React$Component);
121+
122+
function App() {
123+
_classCallCheck(this, App);
124+
125+
_get(Object.getPrototypeOf(App.prototype), 'constructor', this).apply(this, arguments);
126+
}
127+
128+
_createClass(App, [{
129+
key: 'render',
130+
value: function render() {
131+
return React.createElement(
132+
ThemeContext.Provider, {
133+
value: 'dark'
134+
},
135+
React.createElement(Toolbar, null)
136+
);
137+
}
138+
}]);
139+
140+
return App;
141+
})(React.Component);
142+
143+
ReactDOM.render(React.createElement(App, null), document.getElementById('example'));

0 commit comments

Comments
 (0)