共计 3464 个字符，预计需要花费 9 分钟才能阅读完成。
前言
在 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 代码非常简略
