hooks 系列八：hooks 小结

快来加入我们吧！

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

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

到此为止，我们的 hooks 系列只剩下最后一个大案例了。现在我们来对之前的内容做一个回顾。

hooks 是 React 16.8 新增的特性，它可以在不编写 类组件 的情况下使用 state 以及其他的 React 特性

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

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

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

使用多个 useState 就可以定义多个 state 变量。

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

useEffect(() => {
   // 执行一些副作用操作
}，[]);

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

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

const refContainer = useRef(initialValue)

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

useCallback 给我们带来了记忆函数，结合子组件和 useMemo 可以达到优化组件加载的效果。
如果子组件接受了一个方法作为属性，我们在使用 React.memo 这种避免子组件做没必要的渲染时候，就需要用 useCallback 进行配合，否则 React.memo 将无意义。

自定义 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 系列文章中的所学内容进行尝试。使用了一个留言功能的案例。