引言
demo-03:Component
- 源码:demo03/ source
- 核心代码
<script type="text/babel"> // 1.使用工厂函数方式定义简单组件 function MyComponent1() { console.log(this); return < h1>使用工厂函数方式定义简单组件-MyComponent1</ h1> } // 2.使用ES6类方式定义复杂组件 class MyComponent2 extends React.Component { render() { console.log(this); return <h1>使用ES6类方式定义复杂组件-MyComponent2</h1> } } // 将组件渲染到页面上 ReactDOM.render(<MyComponent1 />, document.getElementById('example')) ReactDOM.render(<MyComponent2 />, document.getElementById('example1')) </script>
- 小结:
-
渲染组件标签ReactDOM.render(
<MyComponent2 />
, cotainerEle) -
ReactDOM.render()渲染组件标签的基本流程,React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象,将虚拟DOM并解析为真实DOM,插入到指定的页面元素内部
-
使用工厂函数方式定义简单组件,直接调用
<MyComponent1 />
显示结果 -
使用ES6类方式定义复杂组件,类不可直接调用,是先创建
new
实例对象,调用了实例对象的.render
方法,最终得到了页面显示的结果通过打印
this
查看调用的实例对象,只要是创建了实例对象,this
一定指向实例对象,render方法是为实例对象服务的,构造函数、类本身并不能使用其方法
-
- 注意:
- 组件首字符必须大写
- 组件标签(所有标签)必须是闭合标签
- 可以用双标签,也可单标签,当标签里面有内容是用双标签,没有内容用单标签
- 必须有且只有一个根元素包裹(常用div标签)
- 组件之间引用,直接在根元素中调用即可,比如:
class MyComponent2 extends React.Component { render() { return <div> <h1>使用ES6类方式定义复杂组件-MyComponent2</h1> <h2>MyComponent2</h2> //调用组件MyComponent1 <MyComponent1/> </div> } }
总结:
- 多敲、多记、多查(面向谷歌编程)
- 原创不易,希望可以帮助到可爱的你,喜欢的话请对我素质三连吧,☛点赞、✌关注、评论✍