1. 函数式组件

  1. //1. 创建函数式组件
  2. function MyComponent(){
  3.   console.log(this) 
  4.   //此处的this是undefined, 因为需要经过babel翻译， babel在翻译之后开启了严格模式，"use strick"
  5.   // 严格模式禁止自定义函数中的this指向window
  6.   //  所以this指向了undefined
  7.   // 如果不是严格模式， 则指向window
  8.   return <h2>我是一个函数式组件</h2>
  9. }
  10. //2.渲染组件到页面
  11. ReactDOM.render(<MyComponent/>, document.getElementById('root'))
  12. /**
  13.  * 执行了ReactDOM.render(<MyComponent/>.....之后， 发生了什么？)
  14.  * 1. React解析组件标签， 找到了MyComponent组件
  15.  * 2. 发现组件时使用函数定义的， 随后会调用该函数，将返回的虚拟DOM转换为真实的DOM,随后搜呈现在页面上。
  16.  */

image.png

2. 类式组件

  1. //1. 创建类式组件
  2. class MyComponent extends React.Component{
  3.   render(){
  4.     console.log('render中的this:',this)
  5.     /*
  6.       * render式放在哪里的？——MyComponent的原型对象上， 供实例使用
  7.       * render中的this是谁？ ——MyComponent的实例对象，也就是的MyComponent组件的实例兑现。
  8.     */
  9.     return <h2>我式类式组件</h2>
  10.   }
  11. }
  12. //2.渲染组件到页面
  13. ReactDOM.render(<MyComponent/>, document.getElementById('root'))
  14. /**
  15.  * 执行了ReactDOM.render(<MyComponent/>.....之后， 发生了什么？)
  16.  * 1. React解析组件标签， 找到了MyComponent组件
  17.  * 2. 发现组件时使用类定义的， 随后new出来该组件的实例，并通过该实例调用到原型上的render方法。
  18.  * 3. 将render返回的虚拟DOM转为真实的DOM， 随后呈现在页面上。
  19.  */