React组件有两种定义方式函数式组件和类组件

区别：

1.函数式组件不会被实例化，整体渲染性能得到提升

函数式组件被精简成一个 render 方法的函数，所以它没有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。同时的，函数式组件本身是没有 this 的，所以在使用 Ref 等模块时与类组件也会有所区别。

2.函数式组件没有状态

函数式组件本身没有自己的内部状态 state，数据依赖于 props 的传入，所以它又称无状态组件。

3.函数式组件无访问生命周期的方法

函数式组件是不需要组件生命周期管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。

Hook简介

1.react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks

在react 16.8版本发布后，增加了hooks新特性，hooks版本趋于稳定

2.引入hook的原因

react都核心思想就是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件，它们本身包含了状态（state），所以复用这类组件就变得很麻烦。React Hooks 要解决的问题是状态共享，是继 和 之后的第三种状态共享方案，不会产生 JSX 嵌套地狱问题。

3.明确的好处：它可以让你在不编写 class的情况下使用 state 以及其他的 React 特性。

4.注意：

<1>不要在循环，条件或嵌套函数中调用Hook，必须始终在React函数的顶层使用Hook

<2>只能在React函数式组件或自定义Hook中使用Hook。

为了避免我们无意中破坏这些规则，你可以安装一个eslint插件：

npm install eslint-plugin-react-hooks --save-dev

Hook的用法

HOOK主要的api组成：State Hooks、Effect Hooks和Custom Hooks

State Hook

State Hook提供了useState方法

useState 这个方法可以为我们的函数组件带来 local state，它接收一个用于初始 state 的值，返回一对变量。 让函数组件拥有自己的组件。

eg：const [count, setCount] = useState(0);

等价于：var const = useState(0)[0]; // 定义并赋初值

var setConst = useState(0)[1]; // 修改该state的方法

点击button实现count+1

class实现

useState实现