React新特性Hooks

React 是主流的前端框架，v16.8 版本引入了全新的 API，叫做 React Hooks.作用：让在不写Class的情况下也能使用state和其他的React特性。API地址：https://reactjs.org/docs/hooks-reference.html
中文：https://zh-hans.reactjs.org/docs/hooks-intro.html

React 的核心是组件,组件的标准写法是类（class), 组件的最佳写法应该是函数，而不是类。但是函数组件必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。

React Hooks 的设计目的，就是加强版函数组件，完全不使用”类”，就能写出一个全功能的组件。就是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来

总结一下要解决的痛点问题就是：

1. 在组件之间复用状态逻辑很难

• 之前的解决方案是：render props 和高阶组件
• 缺点是难理解、存在过多的嵌套形成“嵌套地狱”

2. 复杂组件变得难以理解

• 生命周期函数中充斥着各种状态逻辑和副作用
• 这些副作用难以复用，且很零散

3. 难以理解的Class

• this指针问题
• 组件预编译技术（组件折叠）会在class中遇到优化失效的case
• class不能很好的压缩
• class在热重载时会出现不稳定的情况

React 默认提供的基础Hook。

useState()
useEffect()
useContext()

额外的 Hook

useReducer()
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

useState()：状态钩子

const [state, setState] = useState(initialState);

useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。

useContext()

const value = useContext(MyContext);

useReducer()：action 钩子

Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是(state, action) => newState。

useReducers()钩子用来引入 Reducer 功能。

const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法，它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数。

由于 Hooks 可以提供共享状态和 Reducer 函数，所以它在这些方面可以取代 Redux。但是，它没法提供中间件（middleware）和时间旅行（time travel），如果你需要这两个功能，还是要用 Redux。

useEffect()：副作用钩子

useEffect()用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前，放在componentDidMount里面的代码，现在可以放在useEffect()。

useEffect()的用法如下。

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。