React 入门(3)ReactHook

序言

 

什么是ReactHook?

为什么要使用ReactHook?

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

React 16.6 之 React.memo()

{...props}

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

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

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

高阶组件HOC

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

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

缺点:

自定义Hook

只在最顶层

之下React函数调用

Hooks API Reference

useHooks

 

cnpm install axios

 

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

useState

 

useEffect

 

useRef

 

useContext

 

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

资料

上一篇:useEffect和useLayoutEffect的区别


下一篇:深入理解 React useLayoutEffect 和 useEffect 的执行时机