5.函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta chartset="utf-8">
<title>06_函数式组件</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
//1、创建函数式组件
function MyComponent() {
console.log(this); // 此处的this 是undefined,因为babel编译之后开启了严格模式
return <h2>函数定义的组件（适用于【简单组件】定义）</h2>
}
// 2、渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
</script>
</body>
</html>
- 执行了ReactDOM.render(...之后，发生了什么)
- 1、React解析组件标签，找到了MyComponent组件
- 2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM，随后呈现在页面上。
6. 类的基本知识
1. 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
2. 如果A类继承了B类，且A类型写了构造器，那么A类构造器中的super是必须要调用的
3. 类中所定义的方法，都是放在了类的原型对象上，供实列使用
7. 类式组件
<script type="text/babel">
// 1、创建类式组件
class MyComponent extends React.Component {
// render 是放到类原型对象上的，供实例使用
render() {
// render 中的 this 是MyComponent实例对象
console.log(this);
return <h2>我是类式组件（适用于复杂组件的定义）</h2>
}
}
// 2、渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
</script>
执行了ReactDOM.render(...之后，发生了什么)
1、React解析组件标签，找到了MyComponent组件
2、发现组件是使用类定义的，随后new 出来该类的实例，并通过该实例调用到原型上的render方法。
3、将render 返回的虚拟DOM转为真实DOM。随后呈现在页面上
8. 组件中的state
state 的值是对象（key-value的组合）
组件中render方法中的this为组件实例对象
组件自定义函数中的this 为 undefined解决办法：
1.bind 方法
2.箭头函数
状态数据不能直接修改更新，必须要用内置APL--- setState
