React组件的创建 React推出后，由于不同的原因先后出现两种定义react组件的方式: 函数式组件 类式组件
函数式组件
创建函数式组件形式是从React0.14版本中开始出现的。它是为了创建纯展示组件（简单组件），这种组件只负责根据根据传入的eprops（属性）来展示，不涉及到要state状态的操作。具体的无状态函数式组件，其官方指出：在大部分React代码中，大多数组件被携程无状态的组件，通过简单组合可以构建成其他的组件等，这种通过多个简单然后合并成一个大应用的设计模式被提倡。
特点：（函数式组件与类式组件的区别）
- 组件不能访问this对象。
- 组件不能访问生命周期的方法
- 无法访问state状态，只能访问输入的props，同样的props会得到同样的渲染结果。不会有副作用。
为什么不能访问this？
函数由react调用，调用过程中，babel转换器会将jsx转为js，这时函数会自动开启严格模式，严格模式中规定全局模式下自定义函数中的this不能指向window，所以this的结果是undefined。
语法
- 无状态函数式组件形式上表现为一个只带return的函数，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。
- 注意：函数首字母必须大写，必须要有return。
function App(){
return <div></div>
}
React.render(<App/>,document.getElementById('root'))
Hooks
简单来说hooks就是一堆钩子函数。 React的Hooks是16.8引入的新特性。允许我们在不使用class的前提下使用state和其他特征。即在函数式组件中使用类式组件的特性
Hooks的优势
也可以理解为是函数式组件的优势。
- Hooks出现之前，组件之间复用状态逻辑很难，解决方案(HOC、Render Props))都需要重新组织组件结构，且代码难以理解。
- 在React DevTools中观察过React应用，你会发现由providers，consumers，高阶组件，render props等其他抽象层组成的组件会形成“嵌套地狱”。
- 组件维护越来越复杂，譬如事件监听逻辑要在不同的生命周期中绑定和解绑，复杂的页面componentDidMount包涵很多逻辑代码阅读性变得很差。
- class组件中的this难以理解，且class不能很好的压缩，并且会使热重载（没有刷新页面，更改的dom已经更新了）出现不稳定的情况。
所以hooks就是解决这些问题而来：
- 避免地狱式嵌套，可读性高。
- 函数式组件，比class更容易理解。
- class组件生命周期太多太复杂，使函数组件存在状态。
- UI和逻辑更容易分离。
