前言
在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 呈现之前，UI 组件咱们能够应用函数，无状态组件来展现 UI，而对于容器组件，函数组件就显得无能为力，咱们依赖于类组件来获取数据，解决数据，并向下传递参数给 UI 组件进行渲染。在我看来，应用 React Hooks 相比于从前的类组件有以下几点益处：
- 代码可读性更强，本来同一块性能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于保护和迭代，通过 React Hooks 能够将性能代码聚合，不便浏览保护
- 组件树层级变浅，在本来的代码中，咱们常常应用 HOC/render props 等形式来复用组件的状态，加强性能等，无疑减少了组件树层数及渲染，而在 React Hooks 中，这些性能都能够通过弱小的自定义的 Hooks 来实现
React 在 v16.8 的版本中推出了 React Hooks 新个性，尽管社区还没有最佳实际如何基于 React Hooks 来打造简单利用(至多我还没有)，凭借着浏览社区中大量的对于这方面的文章，上面我将通过十个案例来帮忙你意识了解并能够纯熟使用 React Hooks 大部分个性。
useState 保留组件状态
在类组件中，咱们应用 this.state 来保留组件状态，并对其批改触发组件从新渲染。比方上面这个简略的计数器组件，很好诠释了类组件如何运行：
`import` `React from` `"react"``;``class` `App` `extends` `React.Component {` `constructor(props) {` `super``(props);` `this``.state = {` `count: 0,` `name:` `"alife"` `};` `}` `render() {` `const { count } =` `this``.state;` `return` `(` `<div>` `Count: {count}` `<button onClick={() =>` `this``.setState({ count: count + 1 })}>+</button>` `<button onClick={() =>` `this``.setState({ count: count - 1 })}>-</button>` `</div>` `);` `}``}`一个简略的计数器组件就实现了，而在函数组件中，因为没有 this 这个黑魔法，React 通过 useState 来帮咱们保留组件的状态。
`import` `React, { useState } from` `"react"``;``function` `App() {` `const [obj, setObject] = useState({` `count: 0,` `name:` `"alife"` `});` `return` `(` `<div className=``"App"``>` `Count: {obj.count}` `<button onClick={() => setObject({ ...obj, count: obj.count + 1 })}>+</button>` `<button onClick={() => setObject({ ...obj, count: obj.count - 1 })}>-</button>` `</div>` `);``}`通过传入 useState 参数后返回一个带有默认状态和扭转状态函数的数组。通过传入新状态给函数来扭转本来的状态值。值得注意的是 useState 不帮忙你解决状态，相较于 setState 非笼罩式更新状态，useState 笼罩式更新状态，须要开发者本人解决逻辑。(代码如上)
仿佛有个 useState 后，函数组件也能够领有本人的状态了，但仅仅是这样齐全不够。
useEffect 解决副作用
函数组件能保留状态，然而对于异步申请，副作用的操作还是无能为力，所以 React 提供了 useEffect 来帮忙开发者处理函数组件的副作用，在介绍新 API 之前，咱们先来看看类组件是怎么做的：
`import` `React, { Component } from` `"react"``;``class` `App` `extends` `Component {` `state = {` `count: 1` `};` `componentDidMount() {` `const { count } =` `this``.state;` `document.title =` `"componentDidMount"` `+ count;` `this``.timer = setInterval(() => {` `this``.setState(({ count }) => ({` `count: count + 1` `}));` `}, 1000);` `}` `componentDidUpdate() {` `const { count } =` `this``.state;` `document.title =` `"componentDidMount"` `+ count;` `}` `componentWillUnmount() {` `document.title =` `"componentWillUnmount"``;` `clearInterval(``this``.timer);` `}` `render() {` `const { count } =` `this``.state;` `return` `(` `<div>` `Count:{count}` `<button onClick={() => clearInterval(``this``.timer)}>clear</button>` `</div>` `);` `}``}`在例子中，组件每隔一秒更新组件状态，并且每次触发更新都会触发 document.title 的更新(副作用)，而在组件卸载时批改 document.title（相似于革除）
从例子中能够看到，一些反复的性能开发者须要在 componentDidMount 和 componentDidUpdate 反复编写，而如果应用 useEffect 则齐全不一样。
`import` `React, { useState, useEffect } from` `"react"``;``let` `timer =` `null``;``function` `App() {` `const [count, setCount] = useState(0);` `useEffect(() => {` `document.title =` `"componentDidMount"` `+ count;` `},[count]);` `useEffect(() => {` `timer = setInterval(() => {` `setCount(prevCount => prevCount + 1);` `}, 1000);` `// 肯定留神下这个程序：` `// 通知react在下次从新渲染组件之后，同时是下次执行下面setInterval之前调用` `return` `() => {` `document.title =` `"componentWillUnmount"``;` `clearInterval(timer);` `};` `}, []);` `return` `(` `<div>` `Count: {count}` `<button onClick={() => clearInterval(timer)}>clear</button>` `</div>` `);``}`咱们应用 useEffect 重写了下面的例子，**useEffect 第一个参数接管一个函数，能够用来做一些副作用比方异步申请，批改内部参数等行为，而第二个参数称之为dependencies，是一个数组，如果数组中的值变动才会触发 执行useEffect 第一个参数中的函数。返回值(如果有)则在组件销毁或者调用函数前调用**。* 1.比方第一个 useEffect 中，了解起来就是一旦 count 值产生扭转，则批改 documen.title 值；* 2.而第二个 useEffect 中传递了一个空数组[]，这种状况下只有在组件初始化或销毁的时候才会触发，用来代替 componentDidMount 和 componentWillUnmount，慎用；* 3. 还有另外一个状况，就是不传递第二个参数，也就是useEffect只接管了第一个函数参数，代表不监听任何参数变动。每次渲染DOM之后，都会执行useEffect中的函数。基于这个弱小 Hooks，咱们能够模仿封装出其余生命周期函数，比方 componentDidUpdate 代码非常简略