React 入门（7）ReactHook钩子函数

序言

什么是ReactHook？

为什么要使用ReactHook？

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

React 16.6 之 React.memo()

{...props}

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

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

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

高阶组件HOC

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

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

缺点：

自定义Hook

只在最顶层

之下React函数调用

Hooks API Reference

useHooks

cnpm install axios

import React, { useState, useEffect, useRef, useContext } from 'react'

useState

useEffect

useRef

useContext

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

资料