React系列--组件Component

Posted 2021-01-20 yyzyxy

1. 组件其实可以理解为 虚拟 dom对象的集合。也是一个虚拟dom。

1.1组件定义有两种方式

　　// 　1） 工厂函数，无状态，（定义一些比较简洁的组件，推荐使用）

　　　　function MyComponent1(){

　　　　　　return <h2>工厂函数</h2>;

　　　　}

　　// 　　2) ES6 class方式定义组件      //推荐

　　　　class MyComponent2 extends React.Component{

　　　　　　render(){

　　　　　　　　return <h3>ES6 class定义组件</h3>;

　　　　　　}

　　　　}

1.2// 渲染组件：

　　ReactDOM.render(<MyComponent1/>,document.getElementById("example1"));

　　ReactDOM.render(<MyComponent2/>,document.getElementById("example2")); //注意组件的传入方式是</>，而之前的直接是一个虚拟dom对象 example=<h1>haha</h1>

 2.在组件的写法上需要注意以下几点：

　　2.1 组件类首字母必须大写

　　2.2 虚拟dom元素只有一个根元素，即需要一个总的标签包裹住所有的虚拟dom， <div>10个h1标签</div>

　　2.3 虚拟dom必须有结束标签，所以组件是 <MyCom/>   或者是 <ul>haha</ul>

3. ReactDOM.render()渲染组件标签的基本流程

　　3.1 React内部会创建组件实例对象

　　3.2 得到包含的虚拟DOM,并解析为真实DOM

　　3.3 插入到指定部分