Skip to content

Commit 18740bd

Browse files
author
姚观寿
committed
合并代码
2 parents 792ee8c + 4205135 commit 18740bd

21 files changed

+1753
-1238
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
{
2-
"liveServer.settings.port": 5507
1+
{
2+
"liveServer.settings.port": 5507
33
}

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# react
2-
react 这是个react 源码逐行分析，并且是开源免费的，只需要你帮我们点个赞，多多支持下即可
1+
# react
2+
react 这是个react 源码逐行分析，并且是开源免费的，只需要你帮我们点个赞，多多支持下即可

‎common/js/ajax.js

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,63 @@
1-
function ajax(options){
2-
options = options ||{}; //调用函数时如果options没有指定，就给它赋值{},一个空的Object
3-
options.type=(options.type || "GET").toUpperCase();/// 请求格式GET、POST，默认为GET
4-
options.dataType=options.dataType || "json"; //响应数据格式，默认json
5-
6-
var params=formatParams(options.data);//options.data请求的数据
7-
8-
var xhr;
9-
10-
//考虑兼容性
11-
if(window.XMLHttpRequest){
12-
xhr=new XMLHttpRequest();
13-
}else if(window.ActiveObject){//兼容IE6以下版本
14-
xhr=new ActiveXobject('Microsoft.XMLHTTP');
15-
}
16-
17-
//启动并发送一个请求
18-
if(options.type=="GET"){
19-
xhr.open("GET",options.url+"?"+params,true);
20-
xhr.send(null);
21-
}else if(options.type=="POST"){
22-
xhr.open("post",options.url,true);
23-
24-
//设置表单提交时的内容类型
25-
//Content-type数据请求的格式
26-
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
27-
xhr.send(params);
28-
}
29-
30-
// 设置有效时间
31-
setTimeout(function(){
32-
if(xhr.readySate!=4){
33-
xhr.abort();
34-
}
35-
},options.timeout)
36-
37-
// 接收
38-
// options.success成功之后的回调函数 options.error失败后的回调函数
39-
//xhr.responseText,xhr.responseXML 获得字符串形式的响应数据或者XML形式的响应数据
40-
xhr.onreadystatechange=function(){
41-
if(xhr.readyState==4){
42-
var status=xhr.status;
43-
if(status>=200&& status<300 || status==304){
44-
options.success&&options.success(xhr.responseText,xhr.responseXML);
45-
}else{
46-
options.error&&options.error(status);
47-
}
48-
}
49-
}
50-
}
51-
52-
//格式化请求参数
53-
function formatParams(data){
54-
var arr=[];
55-
for(var name in data){
56-
arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
57-
}
58-
arr.push(("v="+Math.random()).replace(".",""));
59-
return arr.join("&");
60-
61-
}
62-
1+
function ajax(options){
2+
options = options ||{}; //调用函数时如果options没有指定，就给它赋值{},一个空的Object
3+
options.type=(options.type || "GET").toUpperCase();/// 请求格式GET、POST，默认为GET
4+
options.dataType=options.dataType || "json"; //响应数据格式，默认json
5+
6+
var params=formatParams(options.data);//options.data请求的数据
7+
8+
var xhr;
9+
10+
//考虑兼容性
11+
if(window.XMLHttpRequest){
12+
xhr=new XMLHttpRequest();
13+
}else if(window.ActiveObject){//兼容IE6以下版本
14+
xhr=new ActiveXobject('Microsoft.XMLHTTP');
15+
}
16+
17+
//启动并发送一个请求
18+
if(options.type=="GET"){
19+
xhr.open("GET",options.url+"?"+params,true);
20+
xhr.send(null);
21+
}else if(options.type=="POST"){
22+
xhr.open("post",options.url,true);
23+
24+
//设置表单提交时的内容类型
25+
//Content-type数据请求的格式
26+
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
27+
xhr.send(params);
28+
}
29+
30+
// 设置有效时间
31+
setTimeout(function(){
32+
if(xhr.readySate!=4){
33+
xhr.abort();
34+
}
35+
},options.timeout)
36+
37+
// 接收
38+
// options.success成功之后的回调函数 options.error失败后的回调函数
39+
//xhr.responseText,xhr.responseXML 获得字符串形式的响应数据或者XML形式的响应数据
40+
xhr.onreadystatechange=function(){
41+
if(xhr.readyState==4){
42+
var status=xhr.status;
43+
if(status>=200&& status<300 || status==304){
44+
options.success&&options.success(xhr.responseText,xhr.responseXML);
45+
}else{
46+
options.error&&options.error(status);
47+
}
48+
}
49+
}
50+
}
51+
52+
//格式化请求参数
53+
function formatParams(data){
54+
var arr=[];
55+
for(var name in data){
56+
arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
57+
}
58+
arr.push(("v="+Math.random()).replace(".",""));
59+
return arr.join("&");
60+
61+
}
62+
6363

‎common/js/browser.v5.8.38.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36472,17 +36472,17 @@ module.exports = function(it){
3647236472
return Object(defined(it));
3647336473
};
3647436474
},{"245":245}],308:[function(_dereq_,module,exports){
36475-
// 7.1.1 ToPrimitive(input [, PreferredType])
36476-
var isObject = _dereq_(265);
36477-
// instead of the ES6 spec version, we didn't implement @@toPrimitive case
36478-
// and the second argument - flag - preferred type is a string
36479-
module.exports = function(it, S){
36480-
if(!isObject(it))return it;
36481-
var fn, val;
36482-
if(S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val;
36483-
if(typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it)))return val;
36484-
if(!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val;
36485-
throw TypeError("Can't convert object to primitive value");
36475+
// 7.1.1 ToPrimitive(input [, PreferredType])
36476+
var isObject = _dereq_(265);
36477+
// instead of the ES6 spec version, we didn't implement @@toPrimitive case
36478+
// and the second argument - flag - preferred type is a string
36479+
module.exports = function(it, S){
36480+
if(!isObject(it))return it;
36481+
var fn, val;
36482+
if(S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val;
36483+
if(typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it)))return val;
36484+
if(!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val;
36485+
throw TypeError("Can't convert object to primitive value");
3648636486
};
3648736487
},{"265":265}],309:[function(_dereq_,module,exports){
3648836488
var id = 0

‎es5.html

Lines changed: 11 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,3 @@
1-
<<<<<<< HEAD
2-
<!DOCTYPE html>
3-
<html>
4-
5-
<head>
6-
<meta charset="UTF-8" />
7-
<title>Hello React!</title>
8-
<script src="./common/js/ajax.js"></script>
9-
<!--官方提供的 CDN 地址：-->
10-
<!-- <script src="./common/js/react.development.v16.12.0.js"></script>
11-
<script src="./common/js/react-dom.development.v16.12.0.js"></script> -->
12-
<!-- <script src="./common/js/browser-polyfill.5.8.38.js"></script> -->
13-
<script src="./common/js/react.v16.12.0.js"></script>
14-
<script src="./common/js/browser.5.8.38.js"></script>
15-
16-
</head>
17-
<style>
18-
.lsft-box{
19-
float: left;
20-
width: 48%;
21-
height: 100vh;
22-
}
23-
.right-box{
24-
float: right;
25-
width: 48%;
26-
height: 100vh;
27-
}
28-
*{
29-
padding: 0;
30-
margin: 0;
31-
}
32-
.textarea{
33-
font-size: 18px;
34-
display: block;
35-
/* width: 100%;
36-
height: 100vh; */
37-
}
38-
</style>
39-
<body>
40-
41-
<div id="example" class="lsft-box"></div>
42-
<script src="./es5_code/es5_react_code/01/01.js" ></script>
43-
44-
</body>
45-
46-
=======
471
<!DOCTYPE html>
482
<html>
493

@@ -60,33 +14,37 @@
6014

6115
</head>
6216
<style>
63-
.lsft-box{
17+
.lsft-box {
6418
float: left;
6519
width: 48%;
6620
height: 100vh;
6721
}
68-
.right-box{
22+
23+
.right-box {
6924
float: right;
7025
width: 48%;
7126
height: 100vh;
7227
}
73-
*{
28+
29+
* {
7430
padding: 0;
7531
margin: 0;
7632
}
77-
.textarea{
33+
34+
.textarea {
7835
font-size: 18px;
7936
display: block;
8037
/* width: 100%;
8138
height: 100vh; */
8239
}
8340
</style>
41+
8442
<body>
8543

86-
<div id="example" class="lsft-box"></div>
87-
<script src="./es5_code/es5_react_code/01/01.js" ></script>
44+
<div id="example" class="lsft-box"></div>
45+
<script src="./es5_code/es5_react_code/01/01.js"></script>
8846

8947
</body>
9048

91-
>>>>>>> 46e5d654750168326619cd5ec4cf48a1c0506d86
49+
9250
</html>

‎es6_code/es6_react_code/01/02.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
/*
2-
* @Author: your name
3-
* @Date: 2021-04-10 18:51:19
4-
* @LastEditTime: 2021-04-10 18:51:58
5-
* @LastEditors: your name
6-
* @Description: In User Settings Edit
7-
* @FilePath: /react源码分析/es6_code/es6_react_code/01/02.js
8-
*/
9-
10-
const H=()=>(<h1>Hello, world</h1>);
11-
ReactDOM.render(
12-
<H/>,
13-
document.getElementById('example')
14-
);
1+
/*
2+
* @Author: your name
3+
* @Date: 2021-04-10 18:51:19
4+
* @LastEditTime: 2021-04-10 18:51:58
5+
* @LastEditors: your name
6+
* @Description: In User Settings Edit
7+
* @FilePath: /react源码分析/es6_code/es6_react_code/01/02.js
8+
*/
9+
10+
const H=()=>(<h1>Hello, world</h1>);
11+
ReactDOM.render(
12+
<H/>,
13+
document.getElementById('example')
14+
);

‎fre.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
</head>
10+
<script src="./fre.js"> </script>
11+
12+
<body>
13+
<div id="example"></div>
14+
<script>
15+
const {
16+
render,
17+
setState,
18+
createElement
19+
} = React
20+
console.log('setState=', setState)
21+
var element = React.createElement(
22+
'h1',
23+
null,
24+
'Hello, world'
25+
)
26+
27+
console.log('element==', element)
28+
render(React.createElement(
29+
'h1',
30+
null,
31+
'Hello, world'
32+
), document.getElementById('example'));
33+
34+
35+
36+
</script>
37+
</body>
38+
39+
</html>

0 commit comments

Comments
 (0)