hooks 系列八：hooks 小结

快来加入咱们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，若是您对咱们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的联系，您也能够在微信上观看咱们的文章。每个建议或是赞同都是对咱们极大的鼓励！

Hooks 小结

到此为止，咱们的 hooks 系列只剩下最后一个大案例了。如今咱们来对以前的内容作一个回顾。

咱们首先介绍了 hooks

什么是 hooks

hooks 是 React 16.8 新增的特性，它能够在不编写 类组件 的状况下使用 state 以及其余的 React 特性

为何引入 hook

• 在组件之间复用状态逻辑很难
• 复杂组件变得难以理解（生命周期内有不相关的逻辑
• 类组件中 this 指向问题不容易理解

介绍了 useState

useState() 用于为函数组件引入状态。纯函数不能有状态，因此使用钩子来引入状态。

建立和使用

const [count, setCount] = useState(defaultValue) // 假设 defaultValue 为 0
复制代码

useState 返回的是一个数组，通常直接使用解构赋值取出两个值，state 以及 修改 state 的函数 。这两个值是须要成对获取的。

使用多个 useState 就能够定义多个 state 变量。

介绍了 useEffects

Effect Hook 可让你在函数组件中执行反作用操做，换句话说能够完成一些相似 Class 中生命周期的功能。

建立和使用

useEffect(() => {
   // 执行一些反作用操做
}，[]);
复制代码

useEffect 至关于 class 中三个生命周期的组合。在 class 中不一样，每个生命周期，都会有一些不相关的逻辑代码，useEffect 将这些代码进行了更好的拆分。

介绍了 useRefs

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

const refContainer = useRef(initialValue)
复制代码

它返回的 ref 对象在组件的整个生命周期保持不变，让咱们在函数组件中，也能够像 Class 组件同样保存一些实例属性，为咱们开发带来了许多可能性，除了这些新奇的功能，不要忘记 ref 开始获取 DOM 属性的功能，由于在 useRef 一样能够适用。

介绍了 useCallback

• useCallback 给咱们带来了记忆函数，结合子组件和 useMemo 能够达到优化组件加载的效果。
• 若是子组件接受了一个方法做为属性，咱们在使用 React.memo 这种避免子组件作不必的渲染时候，就须要用 useCallback 进行配合，不然 React.memo 将无心义。

讲述了 hook 的规则

• 只能在最顶层使用 Hook
  • 不要在循环，条件或嵌套函数中调用 Hook
• 只能在 React 函数中调用 Hook
  • 不要在普通的 JavaScript 函数中调用 Hook

介绍了自定义 hook

自定义 Hook 是一个函数，其名称以 "use" 开头，函数内部能够调用其余的 Hook

在文章中，咱们使用两个简单的案例，讲述了 自定义 hook 的建立和使用。

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  return value
}
复制代码

这就是咱们的简单建立，而使用方式与 useState 相似，只须要建立时取出值就能够进行使用。

function App() {
  const myHookValue = useMyHook('myHook')
  return <div className="app">{myHookValue}</div>
}
复制代码

下节预告

咱们在后续，还会有一个案例，对 hooks 系列文章中的所学内容进行尝试。使用了一个留言功能的案例。