@efox/reacttrace

给react应用注入埋点代码，实现业务代码和埋点代码隔离

初始化(ReactTrace)

import http from "./http";
import { useStores } from "./stores"; // 具体可看example项目
import ReactTrace, {Trace} from '@efox/reacttrace'

const components = {}

// 1. 实例化trace
const trace = new ReactTrace({
  components,
  axios,
  useStores
})
// 2. 暴露useTraceHook钩子
const useTraceHook = trace.useTraceHook

// 3. 给APP组件包裹上Trace组件
<Trace>
  <App />
</Trace>

ReactTrace初始化参数：Object

| Name | Type | Description | | --------- | ----------------------- | --------------------------------------------------- | | components | object | 以组件作为划分单位的埋点逻辑，格式如{[组件名]: [{单个处理行为，格式如ComponentItem格式}]}，详细使用可见以下篇章| | axios | Axios | Axios实例 | | useStores | Function | mobx的store方法，具体看example使用 |

组件中注入hook(useTraceHook)

假如我们有个组件函数，名字叫about，则在该组件引入hook书写如下：

const [count, setCount] = useState(1)

useTraceHook('about', { // 埋点逻辑中需要用到的局部变量
    count
})

useTraceHook参数：

参数1: string, 组件名，作为唯一id

参数2: object, 需要监听的使用useState生成的局部变量集合

components使用

ComponentItem参数：Object

| Name | Type | Description | | --------- | ------ | --------------------------- | | trigger | string | 处理类型，如事件和模拟生命周期 | | el | string | 事件触发时，需要填写元素目标 | | listener | ({$store, $scope, watch, request}) => void | 在对应时机触发的回调函数，具体使用看listener方法使用 |

about组件注入hook后，需要在components中写about的key值对应的埋点逻辑，具体场景划分为两类：

1. 用户行为事件触发

比如针对id为clickbutton的dom元素的用户Click事件的监听后，需要执行对应的埋点逻辑：

const components = {
    about: [
        {
            trigger: 'click', // 针对某个元素的用户行为监听
	        el: '#clickbutton',
	        listener: ({$scope, $store, request, watch}) => {
                // 埋点逻辑代码
	    	}
        }
    }
    ]
}

2. react生命周期钩子触发

比如

const components = {
    about: [
        {
            trigger: 'componentDidMount', // 在componentDidMount生命周期钩子运行
            listener: ({watch, $scope, $store, request, event}) => {
                // 埋点逻辑代码
            }
        }
    ]
}

listener方法使用

函数参数说明： object

| Name | Type | Description | | --------- | ------ | --------------------------- | | $store | object | 全部变量，useStores()生成 | | $scope | object | 组件局部变量，需要手动传入 | | watch | Function | 监听$store或者$scope方法 | | request | Function | 拦截http请求处理 |

watch方法

watch参数：Object

| Name | Type | Description | | --------- | ------ | --------------------------- | | 参数1 | string/string[] | 监听$store或者$scope下的变量，可以混合监听 | | 参数2 | (cur, pre) => void | 监听变动处理函数， cur：现在的值 pre：上一个值 |

// 监听$store基础变量
watch('$store.aboutStore.name', async (cur, pre) => {
  // 埋点逻辑
})
// 监听$store引用变量
watch('$store.aboutStore.person', async (cur, pre) => {
  // 埋点逻辑
})
// 同时监听多个$store值
watch(['$store.aboutStore.name', '$store.aboutStore.person'], async (cur, pre) => {
  // 埋点逻辑
}
// 监听$scope基础变量
watch('$scope.count', async (cur, pre) => {
  // 埋点逻辑
})
// 监听$scope引用变量
watch('$scope.query', async (cur, pre) => {
  // 埋点逻辑
})
// 监听$scope引用变量中的某个具体值
watch('$scope.query.page', async (cur, pre) => {
  // 埋点逻辑
})
// 同时监听多个$scope值
watch(['$scope.count', '$scope.query'], async (cur, pre) => {
  // 埋点逻辑
}
// 混合监听$store和$scope变量
watch(['$store.aboutStore.name', '$scope.query'], async (cur, pre) => {
  // 埋点逻辑
})

request方法