React 中函数组件与类组件的样例
React中函数组件与类组件的样例
- (1) 函数组件直接从函数里面返回结果，函数组件高效、直接、粗暴有力，没有this，没有实例初始化，没有状态state。
- (2) 类组件则需要实例化，并有生命周期，有状态state。
下面就展示一下函数组件和类组件的样例：
首先html文件的head中包含以下script脚本：
1
2
3
4
5
| <head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
|
把JSX的文件，放在body里面引用：
1
2
3
4
| <body>
<div id="app"></div>
<script type="text/babel" src="example.js"></script>
</body>
|
以下展示了React中函数组件与类组件的样例，example.js的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| var app = document.getElementById("app");
function Comp1(props) {
return <h2>组件1，值为：{props.value}</h2>;
}
class Comp2 extends React.Component {
render() {
return <h2>组件2，值为： {this.props.value}. </h2>;
}
}
Comp2.defaultProps = {
value: "组件2的值"
}
function TestComp() {
return (
<div id="id-for-test">
<Comp1 value="组件1的值" />
<Comp2 />
</div>
);
}
const testComp = <TestComp/>;
const content = (
<span>
{testComp}
</span>
);
ReactDOM.render(content, app);
|