react组件的两种方式:函数定义,类定义
在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位
组件要求:
1,为了和react元素进行区分,组件名字首必须大写
2、组件定以后,可以像jsx元素一样使用
首先要导入React 和 ReactDOM:
第一种 函数定义一个组件:
定义 好的<Ws/>是<Ws></Ws>的简写 就是一个虚拟dom,是一个对象类型,里面包含定义组件时的一些值。
当使用函数定义好一个组件,使用ReactDOM.render函数将 (组件 :虚拟dom)转成真实的dom,并插入到页面。
第二中 使用类定义一个组件:
使用class定义组件的时候,首先要先从react中解构出React.Component,并继承它
当组件是一个类定义的时候,执行ReactDOM.render函数的原理:
1、首先找到组件对应的类,并new了这个类的一个实例
2、通过实例找到原型上的render函数,让render执行
3、ReactDOM.render接收到原型上render函数retrun的虚拟的dom
4、将虚拟dom转换成真实dom,插入到页面中
函数式组件是静态组件:和执行普通方法一样,调取一次组件,就把组件中的内容获取到,插入到页面中,如果不重复调取组件,显示的内容不会发生任何改变
一般组件中的内容不会再次改变的情况下,会使用函数式组件
详解组件的运行机制:
create-element在处理的时候,遇到一个组件,返回的对象中:type就不在是字符串标签名了,而是一个函数(类),但是属性还是存在props中
rander渲染的时候,首先判断type的类型,如果是字符串就创建一个元素标签,如果是函数或者类,就把函数执行,把props中的每一项(包含children)传递给函数,在执行函数的时候,把函数中return的JSX通过create-element转换为新的对象,把这个对象返回,再通过render渲染方式,创建dom元素,插入到容器中
调取组件的方法:
单闭合和双闭合的区别
双闭合可以写子孙元素
获取子组件:
React.Children有很多处理数组的方法