Skip to content

Commit f566c7a

Browse files
tyaweityawei
committed
commit all files
1 parent 031a532 commit f566c7a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+97593
-0
lines changed

‎1.示例代码.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<script src="./build/react.js"></script>
7+
<script src="./build/react-dom.js"></script>
8+
<script src="./build/browser.min.js"></script>
9+
</head>
10+
<body>
11+
<div id="example"></div>
12+
<div id="example1"></div>
13+
<div id="example2"></div>
14+
<script type="text/babel">
15+
var HelloWorld = React.createClass({
16+
render: function() {
17+
return (
18+
<p>
19+
Hello, <input type="text" placeholder="Your name here" />!
20+
It is {this.props.date.toTimeString()}
21+
</p>
22+
);
23+
}
24+
});
25+
26+
setInterval(function() {
27+
ReactDOM.render(
28+
<HelloWorld date={new Date()} />,
29+
document.getElementById('example')
30+
);
31+
}, 1000);
32+
</script>
33+
34+
</body>
35+
</html>

‎10.与浏览器协作-组件生命周期.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<script src="./build/react.js"></script>
7+
<script src="./build/react-dom.js"></script>
8+
<script src="./build/browser.min.js"></script>
9+
</head>
10+
<body>
11+
<div id="example"></div>
12+
<div id="example1"></div>
13+
<div id="example2"></div>
14+
<script type="text/babel">
15+
/* 与浏览器协作 */
16+
/* React提供了强大的抽象机制，使你在大多数情况下免于直接接触DOM，但有时你仅仅只需要访问底层API，也许是为了与第三方库或者已有的代码协作*/
17+
/* 虚拟DOM */
18+
/* React非常快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。render() 方法实际上返回一个对DOM的描述，然后React能将其与内存中的“描述”进行比较，以计算出最快速的方式更新浏览器;
19+
此外，React实现了一个完备的合成事件（synthetic event）系统，以使得所有的事件对象都被保证符合W3C细则，而不论各个浏览器的怪癖，并且所有事件跨浏览器地一致并高效的冒泡（bubbles），你甚至能在IE8里使用一些HTML5事件;
20+
大多数时间你应该和React的"伪造浏览器"呆在一起，因为它更高性能并且容易推理。然而，有时你只需要访问底层API，或许是为了与第三方库比如一个jQuery插件协作。React为你提供了安全舱口来直接使用底层API。 */
21+
/* refs和findDOMNode() */
22+
/* 为了与浏览器互动，你需要一个指向DOM node的引用。你可以连接一个 ref 到任何的元素，这允许你引用组件的 backing instance 。如果你需要在组件上调用命令式函数，或者想访问底层的DOM节点，它很有用。要了解更多关于 refs，包括更有效使用他们的方法，请查看我们的 关于Refs的更多内容 文档 */
23+
24+
25+
/* 组件的生命周期 */
26+
/* 组件的生命周期有三个主要部分：
27+
挂载：组件被注入DOM；
28+
更新：组件被重新渲染来决定DOM是否应该被更新；
29+
卸载：组件从DOM中被移除
30+
React提供生命周期方法，一边你可以指定钩挂到这个过程上。我们提供了 will 方法，该方法在某事件发生前被调用 did 方法，在某事件发生后被调用 */
31+
32+
/* 挂载：
33+
getInitialState():obj 在组件挂载前被调用。有状态组件(Stateful components)应该实现此函数并返回初始 state 的数据；
34+
componentWillMount():obj 在挂载发生前被立即调用；
35+
componentDidMount():obj 在挂载发生后被立即调用。需要DOM node的初始化应该放在这里；
36+
*/
37+
/* 更新：
38+
componentWillReceiveProps(object nextProps)当挂载的组件接收到新的props 时被调用。此方法应该被用于比较 this.props 和 nextProps以用于使用 this.setState() 执行状态转换；
39+
shouldComponentUpdate(object nextProps, object nextState)：boolean 当组件决定任何改变是否更新到DOM时被调用。作为一个优化实现比较 this.props和 nextProps、this.state和 nextState，如果React应该跳过更新，返回false；
40+
componentWillUpdate(object nextProps, object nextState) 在更新发生前被立即调用。你不能在此调用 this.setState();
41+
componentDidUpdate(object prevProps, object prevState) 在更新发生后被立即调用。
42+
*/
43+
/* 卸载：
44+
componentWillUnmount() 在组件被卸载和摧毁前被立即调用。清理应该放在这里。
45+
*/
46+
/* 已挂载的方法：
47+
Mounted复合组件同样支持以下方法：
48+
component.forceUpdate() 可以在任何已经挂载的组件上调用，在你知道某些深处的组件状态在未使用 this.setState() 就被改变了时 */
49+
50+
/* 浏览器支持：
51+
React支持绝大多数流行的浏览器，包括IE9及以上 */
52+
</script>
53+
54+
</body>
55+
</html>

‎10.组件生命周期es6小例.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<script src="./build/react.js"></script>
7+
<script src="./build/react-dom.js"></script>
8+
<script src="./build/browser.min.js"></script>
9+
</head>
10+
<body>
11+
<div id="example"></div>
12+
<div id="example1"></div>
13+
<div id="example2"></div>
14+
<script type="text/babel">
15+
class Hello extends React.Component{
16+
constructor(props) {
17+
super(props);
18+
this.state={
19+
opacity:1
20+
}
21+
}
22+
render() {
23+
return (
24+
<div style={{opacity:this.state.opacity}}>
25+
Hello {this.props.name}
26+
</div>
27+
)
28+
}
29+
componentDidMount() {
30+
this.timer=setInterval(
31+
()=>{
32+
var opacity=this.state.opacity;
33+
opacity-=.05;
34+
if (opacity<0.1) {
35+
opacity=1;
36+
}
37+
this.setState({
38+
opacity:opacity
39+
})
40+
}
41+
,100)
42+
}
43+
}
44+
ReactDOM.render(
45+
<Hello name="world" />, document.getElementById("example")
46+
)
47+
</script>
48+
49+
</body>
50+
</html>

‎10.组件的生命周期2.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<script src="./build/react.js"></script>
7+
<script src="./build/react-dom.js"></script>
8+
<script src="./build/browser.min.js"></script>
9+
</head>
10+
<body>
11+
<div id="example"></div>
12+
<div id="example1"></div>
13+
<div id="example2"></div>
14+
<script type="text/babel">
15+
/*
16+
一个组件类由调用 React.createClass 创建，并且提供一个render方法以及其他可选的生命周期函数，组件相关的时间或方法定义；
17+
*/
18+
19+
/* getInitialState :初始化 this.state的值，只在组件装载之前调用一次 */
20+
var LikeButton=React.createClass({
21+
getInitialState:function() {
22+
return {liked:false};
23+
},
24+
handleClick:function(event) {
25+
this.setState({liked:!this.state.liked});
26+
},
27+
render:function() {
28+
var text=this.state.liked? "like":"haven\'t liked";/* this.state来调用getInitialState中设置的状态 */
29+
return (
30+
<p onclick={this.handleClick}>
31+
You {text} this. Click to toggle.
32+
</p>
33+
)
34+
}
35+
});
36+
ReactDOM.render(
37+
<LikeButton />,
38+
document.getElementById("example")
39+
);
40+
41+
/* getDefaultProps:只在组件创建时调用一次并缓存返回的对象（即在React.createClass之后就会调用）。因为这个方法在实例初始化之前调用，所以这个方法里面不能依赖this获取到这个组件的实例。在组件装载之后，这个方法缓存的结果会用来保证访问 this.props 的属性时，当这个属性没有在父组件中传入(在这个组件的JSX属性里设置)，也总是有值的。*/
42+
var MyTitle=React.createClass({
43+
getDefaultProps:function() {
44+
return {
45+
title:"Hello World"
46+
}
47+
},
48+
render:function() {
49+
return <h1>{this.props.title}</h1>;
50+
}
51+
});
52+
ReactDOM.render(
53+
<MyTitle />,
54+
document.getElementById("example1")
55+
);
56+
57+
58+
/* 生命周期函数：27页底部
59+
装载组件：
60+
componentWillMount
61+
只会在装载之前调用一次，在render之前调用，可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render。
62+
63+
componentDidMount
64+
只会在装载完成之后调用一次，在render之后调用。从这里开始可以通过 this.getDOMNode() 获取组件的DOM节点
65+
*/
66+
var MyDOM=React.createClass({
67+
render:function() {
68+
return <div>Hello,guys!</div>
69+
},
70+
componentWillMount:function() {
71+
alert("Start!")
72+
},
73+
componentDidMount:function() {
74+
/*alert("End!")*/
75+
alert(this.getDOMNode)
76+
}
77+
})
78+
ReactDOM.render(<MyDOM />,document.getElementById("example2"))
79+
</script>
80+
<!-- 更新组件状态：
81+
这些方法不会在首次 render 组件的周期调用：
82+
componentWillReceiveProps
83+
shouldComponentUpdate
84+
componentWillUpdate
85+
componentDidUpdate
86+
卸载(删除)组件：
87+
componentWillUnmount
88+
-->
89+
</body>
90+
</html>

0 commit comments

Comments
 (0)