React 入门（7）钩子函数

序言

为什么要使用Hook？

常用的两种编写组件的方式就是就是class组件和函数组件。class组件：通过继承React.Component来构建组件，虽然提供了state状态和完备的生命周期函数，但是也有很多不方便的地方。

很多事件需要在挂载期componentDidMount和更新期componentDidUpdate重复书写。有些副作用还需要在卸载期componentWillUnmount卸载。代码重复度很高，而且难以理解，一旦忘记了就会引起不少bug。

通过class书写自然会碰到this的问题，要想使用this函数不能忘记绑定。代码十分冗余。

函数组件：通过函数直接书写的组件，看起来是简洁了许多，但是不能使用state，也没有生命周期函数、更不能使用react的一些其他特性。只能通过父组件传递进来，任人鱼肉，只能惨淡的沦为展示组件。

那么，函数组件就只能沦为展示的花瓶吗？能结合class组件能使用react特性的优点和函数组件简洁优雅的特性吗？好在react hook来了，函数组件的春天来了。

React 16.8 新增Hook特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

单从图两个特性，就能看出Hook大大简化了React的状态管理和生命周期，并且在无状态函数中可用。

React中Function Component与Class Component 有何不同？

使用useEffect，可以直接在函数组件内处理生命周期事件。 如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

React进阶 会使用Hook吗？推荐

什么是Hook？

是不是感觉hook挺神奇的？hook是什么？怎么使用？不用惊讶，hook就是一个钩子函数，钩着react的一些api供给函数组件使用。

自定义Hook

只在最顶层

之下React函数调用

Hooks API Reference

useHooks

我们为什么要拥抱React Hook

基本的钩子

useState

useEffect

useContext

useContext-解决多层传递属性的灵丹妙药

添加的钩子

useReducer

useReducer代替Redux

useCallback

useMemo

useRef

useImperativeMethods

useMutationEffect

useLayoutEffect

高阶组件HOC

简单来说，高阶组件可以看做一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。

高阶组件就是把一个旧的组件变为新的组件。同时增加一些属性。

缺点：

children: React.ReactNode;

defaultProps

在 React 中，数据是单向流动的。从示例中，我们能看出来表单的数据源于组件的 state，并通过 props 传入，这也称为单向数据绑定。然后，我们又通过 onChange 事件处理器将新的表单数据写回到组件的 state，完成了双向数据绑定。

React 16.6 之 React.memo()

{...props}

复杂组件难以理解，尤其是生命周期函数

eslint

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]

命令

yarn add  axios

cnpm install axios

资料

Hook React hooks React Hook 16.12版本新特性Hook详解