说说对 React Hooks 的了解？解决了什么问题？
一、是什么
Hook 是 React 16.8 的新增个性。它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性
至于为什么引入hook，官网给出的动机是解决长时间应用和保护react过程中常遇到的问题，例如：
难以重用和共享组件中的与状态相干的逻辑
逻辑简单的组件难以开发与保护，当咱们的组件须要解决多个互不相干的 local state 时，每个生命周期函数中可能会蕴含着各种互不相干的逻辑在外面
类组件中的this减少学习老本，类组件在基于现有工具的优化上存在些许问题
因为业务变动，函数组件不得不改为类组件等等
在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作
因而，当初的函数组件也能够是有状态的组件，外部也能够保护本身的状态以及做一些逻辑方面的解决
二、有哪些
下面讲到，Hooks让咱们的函数组件领有了类组件的个性，例如组件内的状态、生命周期
最常见的hooks有如下：
useState
useEffect
其余
useState
首先给出一个例子，如下：
import React, { useState } from 'react';function Example() { // 申明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p > <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}在函数组件中通过useState实现函数外部保护state，参数为state默认的值，返回值是一个数组，第一个值为以后的state，第二个值为更新state的函数
该函数组件等价于的类组件如下：
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p > <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); }}从上述两种代码剖析，能够看出两者区别：
state申明形式：在函数组件中通过 useState 间接获取，类组件通过constructor 构造函数中设置
state读取形式：在函数组件中间接应用变量，类组件通过this.state.count的形式获取
state更新形式：在函数组件中通过 setCount 更新，类组件通过this.setState()
总的来讲，useState 应用起来更为简洁，缩小了this指向不明确的状况
useEffect
useEffect能够让咱们在函数组件中进行一些带有副作用的操作
同样给出一个计时器示例：
class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; } render() { return ( <div> <p>You clicked {this.state.count} times</p > <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); }}从下面能够看见，组件在加载和更新阶段都执行同样操作
而如果应用useEffect后，则可能将雷同的逻辑抽离进去，这是类组件不具备的办法
对应的useEffect示例如下：
import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p > <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}useEffect第一个参数承受一个回调函数，前端培训默认状况下，useEffect会在第一次渲染和更新之后都会执行，相当于在componentDidMount和componentDidUpdate两个生命周期函数中执行回调
如果某些特定值在两次重渲染之间没有发生变化，你能够跳过对 effect 的调用，这时候只须要传入第二个参数，如下：
useEffect(() => { document.title = `You clicked ${count} times`;}, [count]); // 仅在 count 更改时更新上述传入第二个参数后，如果 count 的值是 5，而且咱们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比拟，如果是相等则跳过effects执行
回调函数中能够返回一个革除函数，这是effect可选的革除机制，相当于类组件中componentwillUnmount生命周期函数，可做一些革除副作用的操作，如下：
useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); };});所以， useEffect相当于componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合
其它 hooks
在组件通信过程中能够应用useContext，refs学习中咱们也用到了useRef获取DOM构造......
还有很多额定的hooks，如：
useReducer
useCallback
useMemo
useRef
三、解决什么
通过对下面的初步意识，能够看到hooks可能更容易解决状态相干的重用的问题：
每调用useHook一次都会生成一份独立的状态
通过自定义hook可能更好的封装咱们的性能
编写hooks为函数式编程，每个性能都包裹在函数中，整体格调更清新，更优雅
hooks的呈现，使函数组件的性能失去了裁减，领有了类组件类似的性能，在咱们日常应用中，应用hooks可能解决大多数问题，并且还领有代码复用机制，因而优先思考hooks