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 插入到指定部分
posted on 2018-11-16 00:12  yyzyyx  阅读(199)  评论(0编辑  收藏  举报