hook常用操作

Hook 是一种钩子技术,在系统没有调用函数之前,钩子程序就先得到控制权,这时钩子函数既可以加工处理(改变)该函数的执行行为,也可以强制结束消息的传递。简单来说,修改原有的 JS 代码就是 Hook

Hook 技术之所以能够实现有两个条件:

  • 客户端拥有JS的最高解释权,可以决定在任何时候注入JS,而服务器无法阻止或干预。服务端只能通过检测和混淆的手段,另 Hook 难度加大,但是无法直接阻止。

  • 除了上面的必要条件之外,还有一个条件。就是 JS 是一种弱类型语言,同一个变量可以多次定义、根据需要进行不同的赋值,而这种情况如果在其他强类型语言中则可能会报错,导致代码无法执行。js 的这种特性,为我们 Hook 代码提供了便利。

1. 我们知道在 JavaScriptJSON.stringify() 方法用于将JavaScript 对象或值转换为 JSON 字符串,JSON.parse() 方法用于将一个 JSON字符串转换为JavaScript 对象,某些站点在向web 服务器传输用户名密码时,会用到这两个方法

(function() {
    var _stringify = JSON.stringify;
    JSON.stringify = function(ps) {
        console.log("Hook JSON.stringify ——> ", ps);
        debugger;
        return _stringify(ps);  // 不改变原有的执行逻辑 
    }
})();


(function() {
    var _parse = JSON.parse;
    JSON.parse = function(ps) {
        console.log("Hook JSON.parse ——> ", ps);
        debugger;
        return _parse(ps);  // 不改变原有的执行逻辑 
    }
})();

首先定义了一个变量 stringify 保留原始 JSON.stringify 方法,然后重写 JSON.stringify 方法,遇到 JSON.stringify 方法就会执行 debugger 语句,会立即断下,最后将接收到的参数返回给原始的 JSON.stringify 方法进行处理,确保数据正常传输

2. hook XHR请求

// 如果是正数 表示存在里面
// 如果是-1 表示不在里面
(function () {
    var open = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (method, url, async) {
        if (url.indexOf("analysis") != -1) {
            debugger;
        }
        return open.apply(this, arguments);
    };
})();


(function () {
    var open = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (method, url, async) {
        if (url.indexOf("analysis") != -1) {
            debugger;
        }
        return open.apply(this, arguments);
    };
})();

3. Interceptors-拦截器

  • 请求拦截器:在发送请求之前,可以借助一些函数来对请求的内容和参数做一些检测。若有问题可以直接取消请求。

  • 响应拦截器:当服务器返回响应数据时,响应拦截器会在我们拿到结果前预先处理响应数据。例如对响应数据做一些格式化处理,或者当响应失败时,可以做一些失败提醒和纪录。

// npm install axios
axios = require('axios')
//设置请求拦截器
axios.interceptors.request.use(function (config) {
    console.log('请求拦截器 成功')
    config.headers['sign'] = 'lili'
    return config;
}, function (error) {
    console.log('请求拦截器 失败')
    return Promise.reject(error);
});

//设置响应拦截器
axios.interceptors.response.use(function (response) {
    console.log('响应拦截器 成功')
    console.log('调解密函数进行解密数据')
    //return response;
    return response.data; //修改响应数据
}, function (error) {
    console.log('响应拦截器 失败')
    return Promise.reject(error);
});

//发送请求
axios.get('http://httpbin.org/get').then(res=>console.log(res))

4.爬虫常用hook cookie操作

WEBAPI地址:Web API 接口参考 | MDN

Object.defineProperty为对象的属性赋值,替换对象属性

基本语法:Object.defineProperty(obj, prop, descriptor),它的作用就是直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,接收的三个参数含义如下:

  • obj:需要定义属性的当前对象;

  • prop:当前需要定义的属性名;

Object.defineProperty(user,"age",{
 get:function(){
      console.log("这个人来获取值了!!");
      return count;
 },

 set:function(newVal){
      console.log("这个人来设置值了!!");
      count=newVal+1;
 }
})

cookie 钩子用于定位 cookie 中关键参数生成位置,以下代码演示了当 cookie 中匹配到了 v, 则插入断点:

(function () {
  var cookieTemp = '';
  Object.defineProperty(document, 'cookie', {
    set: function (val) {
      if (val.indexOf('v') != -1) {
        debugger;
      }
      console.log('Hook捕获到cookie设置->', val);
      cookieTemp = val;
      return val;
    },
    get: function () {
      return cookieTemp;
    },
  });
})();

注:正常hook cookie操作的时候需要清除下cookie

### React 中常用Hooks 列表及示例如下 #### 1. **useState** `useState` 是最基础的 Hook,用于在函数组件中添加状态管理能力。 ```javascript import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` 此代码展示了如何使用 `useState` 来创建一个计数器[^1]。 #### 2. **useEffect** `useEffect` 用来处理副作用的操作,类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount[^4]。 ```javascript import React, { useState, useEffect } from 'react'; function Example() { const [docs, setDocs] = useState([]); useEffect(() => { fetch('https://api.example.com/items') .then(response => response.json()) .then(data => setDocs(data)); }, []); return ( <ul> {docs.map(doc => ( <li key={doc.id}>{doc.title}</li> ))} </ul> ); } ``` 这段代码演示了如何利用 `useEffect` 在组件加载时获取远程数据[^3]。 #### 3. **useContext** `useContext` 提供了一种无需将 props 手动逐层传递就能消费 context 的方法。 ```javascript const ThemeContext = React.createContext('light'); function ThemedButton() { const theme = useContext(ThemeContext); return <button style={{ background: theme === 'dark' ? '#3c7dcf' : '#eaeaea' }}>Themed Button</button>; } ``` 这里展示的是通过 `useContext` 动态改变按钮样式的例子[^1]。 #### 4. **useReducer** 对于复杂的状态逻辑,推荐使用 `useReducer`。它接受 reducer 函数以及初始值,并返回当前 state 和 dispatch 方法。 ```javascript import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'increment': return { ...state, count: state.count + 1 }; case 'decrement': return { ...state, count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </> ); } ``` 上面的例子显示了一个简单的加减计算器实现方式[^1]。 #### 5. **useCallback & useMemo** 这两个 hooks 都是为了性能优化设计的。其中 `useMemo` 返回记忆后的计算结果;而 `useCallback` 则返回记忆后的回调函数。 ```javascript import React, { useMemo, useCallback } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent(props) { const memoizedValue = useMemo(() => computeExpensiveValue(props), [props]); const callbackFunction = useCallback(() => { doSomething(memoizedValue); }, [memoizedValue]); return <ChildComponent onSomeEvent={callbackFunction} />; } ``` 在这个案例里可以看到怎样运用 `useMemo` 缓存昂贵运算的结果和 `useCallback` 创建稳定的事件处理器[^1]。 #### 6. **custom Hooks 自定义 Hook** 自定义 hook 可以帮助提取组件间的逻辑复用部分。 ```javascript // useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { try { const res = await fetch(url); if (!res.ok) throw new Error(res.statusText); const json = await res.json(); setData(json); } catch (err) { setError(err.message); } finally { setLoading(false); } } fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ``` 这是一个典型的自定义 hook —— `useFetch` ,封装了网络请求的相关逻辑[^5]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值