React 类式组件_react类式组件-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
    <script src="https://fb.me/react-15.2.0.js"></script>

    <script src="https://fb.me/react-dom-15.2.0.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

</head>
<body>
  <div id="test">
    
  </div>
</body>

<script type="text/babel">
  // 1.创建类式组件
  class MyComponent extends React.Component {
    render() {
      // render 是放在哪里？MyComponent 类的原型对象上，供实例使用。 
      // render 中的this 是谁？MyComponent (组件)的实例对象
      console.log("this", this)
      return <h1>我是用类定义的组件，适用于复杂组件的定义</h1>
    }
  }

  // 2.渲染组件到页面
  ReactDOM.render(<MyComponent/> , document.getElementById("test"))
  /* 
    执行力 ReactDOM.render(...)之后，发生了什么呢
      1.React解析组件标签，找到了MyComponent 组件。
      2.发现组件是使用类定义的，随后new 出来该类的实例，并通过该实例调用到原型上的 render 方法。
      3.将 render 返回的虚拟 DOM 返回真实 DOM,随后呈现在页面中。
  */
</script>

</html>