一、函数式组件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/babel">javascript">// 1.创建函数式组件function Demo() {return <h2>我是用函数定义的组件</h2>}// 2.渲染组件到页面ReactDOM.render(<Demo />, document.getElementById('test'))/*** 执行了ReactDOM.render(<MyComponent/>.....)之后，发生了什么？* 1.React解析组件标签，找到MyComponent组件。* 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。* */</script>
</body></html>
二、类式组件
类式组件的话是通过es6的语法class来实现，通过通过创建一个类来继承React.Component父类，在定义的类组件中定义一个render()方法，该方法是放在该类实例对象的原型对象上的,ReactDOM.render内部通过new出来该类的实例，并通过该实例调用原型链上的render方法，将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/babel">javascript">// 1.创建类式组件class MyComponent extends React.Component {render() {console.log(this);// render是放在哪里的？MyComponent的原型对象上，供实例使用。// render()中的this指向的是MyComponent组件实例对象return <h2>我是用函数定义的组件</h2>}}// 2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/*** 执行了ReactDOM.render(<MyComponent/>.....)之后，发生了什么？* 1.React解析组件标签，找到MyComponent组件。* 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型链上的render方法* 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body></html>
