# react-hooks

**Repository Path**: codinglin/react-hooks

## Basic Information

- **Project Name**: react-hooks
- **Description**: react自定义hooks
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-14
- **Last Updated**: 2023-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React Hooks

- useRef 用来获取真实 dom 或组件实例对象

> 1. 引入 useRef
> 2. 执行 useRef 函数并传入 null，返回值是一个对象，内部有一个 current 属性存放 dom 对象(组件实例)
> 3. 通过 ref 绑定需要获取的元素或组件

- useContext 用来实现跨组件通信

> 1. 使用 createContext 创建 Context 对象
> 2. 在顶层组件使用 Provider 提供数据
> 3. 在底层组件使用 useContext(Context) 获取数据

补充：如果提供的数据是静态不变的 -- index.js(main.jsx) 包裹，如果提供的数据需要改变 -- app.js(App.jsx) 包裹可以方便更改数据

## React 自定义 hooks

- useWindowScroll 实现监听滚动距离(距离顶部)的 hooks

- useLocalStorage 实现将数据实时写入本地的 hooks

- useLog 实现自动上报 pv/click 的埋点 hooks