React自定义组件React解析组件标签，找到HelloMessage组件。是类的实例对象。 React解析组件标签

定义组件的方式

1：函数式组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>函数式组件</title>
<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>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example">

</div>
<script type="text/babel">

// 1：创建函数式组件
function HelloMessage () {
  console.log('this=',this) // 此处this为undefined
    return <h1>学习是一种信仰dasd</h1>
}
//:2：渲染组件到页面
  ReactDOM.render(
    <HelloMessage/>,
    document.getElementById('example')
  );
</script>

</body>
</html>

注意：

首字母一定要大写
函数式里this为undefined,因为babel编译后开启了严格模式

执行了ReactDOM.render()发生了什么？

React解析组件标签，找到HelloMessage组件。
发现组件是使用函数式定义，随后调用该函数，讲返回的虚拟DOM转为真实的DOM，并呈现在页面中

2:类式组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>类式组件</title>
<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>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example">

</div>
<script type="text/babel">
  // 1: 创建类式组件
  class MyComponent extends React.Component {
    render() {
      return <h1>我是类式组件</h1>
    }
  }
  // 2: 渲染组件
  ReactDOM.render(
    <MyComponent/>,
    document.getElementById('example')
  );
</script>

</body>
</html>

类式组件中render内的this是什么？

是类的实例对象。

执行了ReactDOM.render()发生了什么？

React解析组件标签，找到MyComponent组件。
发现组件是类式定义的，随后new出该类的实例，并通过该实例调用原型上的render方法
将render返回的虚拟DOM转为真实DOM，并渲染到页面上。