react 中组件区分

1: React 组件中复杂组件和简单组件

react 组件复杂组件和简单组件：
有状态的组件就是复杂组件。  无状态的组件就是简单组件
什么是有状态组件？ 什么是无状态组件？
对比：
人     状态    影响   行为
组件   状态    驱动   页面
我们的数据放在放在组件的state 里边, 状态改变驱动虚拟DOM该变, 从而驱动页面的改变。
 // 创建一个容器
<div id="test"><div/>
<script type="text/babel">
   // 1: 创建类组件
   class MyComponent extends Component {
      render() {
        return <h2>我是用类定义的组件, 适用于复杂组件的定义</h2>
      }
   }
  // 2: 将类组件渲染到页面
  reactDOM.render(<MyComponent />, document.getElementById('test'));
</script>
// 函数式组件也叫做无状态组件, 因为函数式组件中的this: 指向undefined
 为什么指向undefined?  因为在函数组件中写的是jsx 语法, jsx 语法要经过babel.js 翻译
 开启了严格模式： 所以this ==> 指向了undefined
// 但是类组件 ==> 也叫做有状态组件,  因为定义类组件需要继承React.Component 父类组件
   在类组件中必须要有render 函数,  render 函数必须要有返回值， 返回值就是VDOM
   但是在类组件中的this 指向创建类组件的实例对象。 在这个实例对象中, 有props, 属性
   state: 属性, refs 属性
// 类式组件的三大属性:
 props 属性,  refs 属性,  state 属性

状态既是数据, 就是数据改变影响虚拟DOM 的改变。 虚拟dom 改变影响 页面dom 改变。