React中的“函数式组件”和“类式组件”

一、函数式组件：

适用于【简单组件】的定义（简单组件指无状态组件）

<script type="text/babel">
  function MyComponent() {
   //此处的this是undefined，因为babel编译后开启了严格模式，在严格模式下禁止自定义函数指向window
    console.log(this) //undefined
    return <p>我是函数组件</p>
  }
  ReactDOM.render(<MyComponent/>,document.getElementById('app'))
</script>

执行ReactDOM.render()后：

React解析组件标签，找到了MyComponent组件。
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

二、类式组件:

适用于【复杂组件】的定义（复杂组件指有状态组件）

class MyComponent extends React.Component {
  //render 放在 MyComponent的原型对象上，供实例使用
  render() {
    //this指向MyComponent组件实例对象
    console.log(this)
    return (
      <p>我是类式组件</p>
    )
  }
}
ReactDOM.render(<MyComponent/>,document.getElementById('app'))

执行ReactDOM.render()后：

React解析组件标签，找到了MyComponent组件。
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。