React学习（从零基础到精通）0101

react中定义组件

• 函数式组件

•     <script type="text/babel">
      //创建函数式组件
      function MYComponent(){
          console.log(this);//此处的this是undefined，因为babel编译后开启了严格模式
          return <h1>测试</h1>
      }
      //渲染组件到页面
      ReactDOM.render(<MYComponent/>,document.getElementById("test"))
      /*
          执行了ReactDOM.render(<MYComponent/>......之后，发生了什么？
              1.react解析组件标签，找到了MYComponent组件
              2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
      */
      </script>

   

• 类式组件

• <script type="text/babel">
      //创建类式组件
      class MyComponent extends React.Component {
          //render是放在哪里的？--类（MyComponent）的原型对象上，供实例使用。
          //render中的this是谁？--MyComponent的实例对象。
          
          render(){
              console.log("render中的this：",this)
              return <h2>类组件</h2>
          }
      }
      //渲染组件到页面
      ReactDOM.render(<MyComponent/>,document.getElementById("test"))
      /*
          执行了ReactDOM.render(<MYComponent/>......之后，发生了什么？
              1.react解析组件标签，找到了MYComponent组件
              2.发现组件是使用类定义的，随后new出该类的实例，并通过该实例调用到原型上的render方法
              将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
      */
      </script>