使用react定义组件的两种方式

react组件的两种方式：函数定义，类定义

在定义一个组件之前，首先要明白一点：react元素（jsx）是react组件的最基本的组成单位

组件要求：

1，为了和react元素进行区分，组件名字首必须大写

2、组件定以后，可以像jsx元素一样使用

 

首先要导入React 和 ReactDOM：

import React from 'react';

第一种 函数定义一个组件：

import React from 'react';

function Ws(){
  return <p>我是一个函数定义的组件</p>;
}
ReactDOM.render(<Ws/>,window.root);

定义 好的<Ws/>是<Ws></Ws>的简写 就是一个虚拟dom，是一个对象类型，里面包含定义组件时的一些值。

当使用函数定义好一个组件，使用ReactDOM.render函数将 (组件 :虚拟dom)转成真实的dom，并插入到页面。

第二中 使用类定义一个组件：

使用class定义组件的时候，首先要先从react中解构出React.Component,并继承它

import React {Component} from 'react';//解构React.Component

class He extends Component{ //继承Component，Component相当于React.Component 
 render(){ 
    return <div>我是class定义的一个组件</div>
  } 
}

 

当组件是一个类定义的时候，执行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元素，插入到容器中

 调取组件的方法：

ReactDOM.render(
<div>
 <Hes title='首页' style={{color:'red'}}/>,//单闭合  注意：这里的style是传递到组件后调用才能起到效果的
 <Hes></He > //双闭合
</div>

window.root);

import React from 'react';
function Hes(props){ //props变量存储的值是一个对象，没有传递是个空对象
   let {title,style}=props; //结构传递的属性值  
  return <p style={style}>{title}</p>;//首页
}
这里注意是是：凡是以props传递的属性都是在组件中调用才能起到效果

单闭合和双闭合的区别

双闭合可以写子孙元素

 获取子组件：

React.Children.map(children){

   return childern

}

React.Children有很多处理数组的方法