『React-Demos』Demo-03：Component

引言

• 回顾组件化开发基础概念

demo-03:Component

• 源码：demo03/ source
• 核心代码

   <script type="text/babel">
  // 1.使用工厂函数方式定义简单组件
  function MyComponent1() {
    console.log(this);
    return < h1>使用工厂函数方式定义简单组件-MyComponent1</ h1>
  }
  // 2.使用ES6类方式定义复杂组件
  class MyComponent2 extends React.Component {
    render() {
      console.log(this);
      return <h1>使用ES6类方式定义复杂组件-MyComponent2</h1>
    }
  }
  // 将组件渲染到页面上
  ReactDOM.render(<MyComponent1 />, document.getElementById('example'))
  ReactDOM.render(<MyComponent2 />, document.getElementById('example1'))
  </script>
  

• 小结：

  1. 渲染组件标签ReactDOM.render(<MyComponent2 />, cotainerEle)

  2. ReactDOM.render()渲染组件标签的基本流程，React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象，将虚拟DOM并解析为真实DOM，插入到指定的页面元素内部

  3. 使用工厂函数方式定义简单组件，直接调用<MyComponent1 />显示结果

  4. 使用ES6类方式定义复杂组件，类不可直接调用，是先创建new实例对象，调用了实例对象的.render方法，最终得到了页面显示的结果

     通过打印this查看调用的实例对象，只要是创建了实例对象，this一定指向实例对象，render方法是为实例对象服务的，构造函数、类本身并不能使用其方法
     

• 注意：
  • 组件首字符必须大写
  • 组件标签（所有标签）必须是闭合标签
  • 可以用双标签，也可单标签，当标签里面有内容是用双标签，没有内容用单标签
  • 必须有且只有一个根元素包裹（常用div标签）
  • 组件之间引用，直接在根元素中调用即可，比如：

    class MyComponent2 extends React.Component {
      render() {
       return <div>
      <h1>使用ES6类方式定义复杂组件-MyComponent2</h1>
      <h2>MyComponent2</h2>
      //调用组件MyComponent1
      <MyComponent1/>
    </div>
      }
    }
    

总结：

• 多敲、多记、多查（面向谷歌编程）
• 原创不易，希望可以帮助到可爱的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、评论✍