类组件
以类的方式封装组件，功能更为全面一些，早期(16.8版本以前)函数组件无法支持state组件状态,组件生命周期，只能使用类组件 hook 函数组件使用state和生命周期。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>类组件</title>
</head>
<body>
<div id="root"></div>
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script type="text/babel">
// 类组件
// es6语法中class是类的声明关键字
// extends 继承 可以得到复用父类的功能
// 继承了React组件父类
// 类名称大驼峰
class Hello extends React.Component {
// 方法
render() {
return <h1>hello 类组件</h1>;
}
}
// 调用方式一: 实例化对象使用
// new 关键字 通过类实例出一个对象
let vNode = new Hello().render();
// 调用方式二： 组件标签调用方式
vNode = <Hello/>
ReactDOM.render(vNode, document.getElementById("root"));
</script>
</body>
</html>
类组件传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>类组件传参</title>
</head>
<body>
<div id="root"></div>
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script type="text/babel">
class HelloName extends React.Component{
// react组件父类把props进行处理
// 方法中使用可以通过this.props调用
render(){
return <h1>hello,{this.props.name}</h1>
}
}
// JS语法调用 对象实例化时传参
let vNode = new HelloName({name:'类组件'}).render();
// 组件标签方式调用
vNode = <HelloName name="class component"/>
// 复用
vNode = (
<div>
{new HelloName({name:'类组件'}).render()}
{new HelloName({name:'类组件1'}).render()}
<HelloName name="类组件2"/>
<HelloName name="类组件3"/>
</div>
)
ReactDOM.render(vNode, document.getElementById("root"));
</script>
</body>
</html>
