React中定义组件
1,函数式组件
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<body>
<!--准备好一个容器 -->
<div id="text"></div>
<!-- 加载 React。引入react核心库-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入babel，用于jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel，不写默认js*/
//1，创建函数式组件(首字母大写)
function Demo(){
console.log(this);//undefined,因为babel编译后开启了严格模式
return <h2>我是用函数定义得组件（适用于【简单组件】的定义）</h2>
}
//2，渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('text'));
/*
执行了ReactDOM.render(<Demo/>....之后，发生了什么？
1，React解析组件标签，找到了Demo组件
2，发现组件时使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现到页面中
*/
</script>
</body>
2，类式组件
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<body>
<!--准备好一个容器-->
<div id="text"></div>
<!-- 加载 React。引入react核心库-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入babel，用于jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel，不写默认js*/
//1，创建类式组件 (需要继承react中的类)
class Demo extends React.Component{
render(){
//render 是放在哪里的？ ——Demo类的原型对象上，仅供实例使用
//render 中的this是谁？——Demo的实例对象,Demo组件实例对象
console.log("render中的this:",this)
return <h2>我是用类定义得组件（适用于【复杂组件】的定义）</h2>
}
}
// 2，渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('text'));
/*
执行了ReactDOM.render(<Demo/>....之后，发生了什么？
1，React解析组件标签，找到了Demo组件
2，发现组件时使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3，将render返回的虚拟dom转为真实dom，随后呈现在页面中
*/
</script>
</body>
腾讯云开发者
