码迷,mamicode.com
首页 > 其他好文 > 详细

React系列--组件Component

时间:2018-11-16 01:13:02      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:class   1.2   element   解析   元素   需要   amp   工厂   end   

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 插入到指定部分

React系列--组件Component

标签:class   1.2   element   解析   元素   需要   amp   工厂   end   

原文地址:https://www.cnblogs.com/yyzyxy/p/9967008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!