组件：组件页面的零件
React制作组件共有两种方式：
- 函数式：制作简单组件
- 类方式：制作复杂组件
1.函数式组件制作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 快速创建元素 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 快速渲染元素到页面上 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- babel编译器 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 组件的制作
// 组件的命名：类似于vue，必须大驼峰命名
// 原因：小写名称，容易和系统元素命名冲突
function HelloWorld(){
return <h2>hello world</h2>
}
// 系统检测到 <helloworld/>标签时，就会自动调用函数HelloWorld()
// <HelloWorld/>:jsx语法 ，更加符合html的样式，容易被接受，
// ReactDOM.render(HelloWorld(),app);本质与jsx相同
ReactDOM.render(<HelloWorld/>,app);
// 组件具有可复用特征：因为本质就是函数，
let more=(
<div><HelloWorld/>
<HelloWorld/>
<HelloWorld/>
</div>
);
// render方法会覆盖前面的方法
ReactDOM.render(more,app)
</script>
</body>
</html>
函数式的传参：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 快速创建元素 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 快速渲染元素到页面上 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- babel编译器 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Hello(props){
return <h2>hello,{props.name},年龄{props.age}</h2>
}
// ReactDOM.render(Hello({name:'东东',age:'10'}),app)
// jsx写法
ReactDOM.render(<Hello name='东东'/>,app)
let item=(
<div>
<Hello name='东东' age='10'/>
<Hello name='东东' age='12'/>
<Hello name='东东' age='10'/>
</div>
);
ReactDOM.render(item,app)
</script>
</body>
</html>
2.类方式的组件：适合复杂功能的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 快速创建元素 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 快速渲染元素到页面上 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- babel编译器 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 面向对象写法：类名大驼峰,必须指定继承的父类
class HelloWorld extends React.Component{
// 内容只能是属性和方法
render() {
return <div>HelloWorld</div>
}
}
ReactDOM.render(new HelloWorld().render(),app);
// 简写：
ReactDOM.render(<HelloWorld/>,app)
</script>
</body>
</html>
类组件的参数
<!-- 类组件的参数 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 快速创建元素 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 快速渲染元素到页面上 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- babel编译器 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Hello extends React.Component{
// 在面向对象中称为重写
constructor(props) {
// 子类重写父类的构造，需要用super来调用父类的构造，
super(props)
// 父类会隐藏性的：this.props=props
// 这就是render（）中的this.props的由来
console.log(props);
}
render() {
// this.props:来自于父类
return <div>Hello,{this.props.name},{this.props.age}</div>
}
}
ReactDOM.render(new Hello({ name:"东东",age:"10" }).render(),app)
// 简写：
ReactDOM.render(<Hello name="东东" />,app)
let item=(
<div>
<Hello name="东东" age="10" />
<Hello name="东2东" age="10"/>
<Hello name="东3东" age="10"/>
</div>
);
ReactDOM.render(item,app)
</script>
</body>
</html>
