Git——hooks的原理与实战
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Git——hooks的原理与实战相关的知识，希望对你有一定的参考价值。
摘要
作为公司的新人，很多时候对代码代码的提交不是很清楚，同时作为项目的管理者的应该对公司的代码的进行的规范的管理，保证团队代码可读性和一致行，当你在推送后发现代码中有问题，甚至可以导致编译错误，或许你可以立即使用我们之前讲过的撤销操作的相关知识来重新提交一次。但是如果你的同事已经拉取了代码并且已经在他本地出现了错误呢？那么使用git的hooks的功能来实现的对代码的检查和流程的规范性进行的约束。
什么是钩子？
为了防止这种情况出现，就需要我们今天要讲到的内容了，和其它版本控制系统一样，Git 能在特定的重要动作发生时触发自定义脚本。有两种钩子:
- 客户端钩子
- 服务器端钩子。
客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。你可以随心所欲地运用这些钩子实现各种功能。
钩子的安装
.git/hooks。 当你用 git init 初始化一个新版本库时，Git 默认会在这个目录中放置一些示例脚本。 这些脚本除了本身可以被调用外，它们还透 露了被触发时所传入的参数。
所有的示例都是 shell 脚本，其中一些还混杂了 Perl 代码，不过，任何正确命名的可执行脚本都可以正常使用 —— 你可以用 Ruby 或 Python，或任何你熟悉的语言编写它们。 这些示例的名字 都是以 .sample 结尾，如果你想启用它们，得先移除这个后缀。把一个正确命名(不带扩展名)且可执行的文件放入 .git 目录下的 hooks 子目录中，即可激活该钩子脚本。 这样一来，它就能被 Git 调用。接下来，我们会讲解常用的钩子脚本类型。
钩子类型
本文主要讲客户端钩子，服务端钩子将在讲过服务端配置Git后再讲，客户端钩子分为三种：
- 提交工作流钩子
- 电子邮件工作流钩子
- 其它客户端钩子
push操作工作流钩子
pre-commit
pre-commit 钩子在键入提交信息前运行。 它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。 如果该钩子以非零值退出，Git 将放弃此次提交。 你可以利用该钩子，来检查代码风格是否一致(运行类似 lint 的程序)、尾随空白字符是否存在或新方法的文档是否适当。
pre-merge-commit
pre-merge-commit钩子由git-merge调用，在合并操作执行成功，获得提交消息之前执行该钩子。该钩子不接收任何参数，如果脚本以非0值退出，将中止合并操作。如果在合并过程中出现了冲突，且处理冲突时并不是一次处理完成，而是分为了多个commit，这种情况下该钩子不会执行。
prepare-commit-msg
prepare-commit-msg 钩子在启动提交信息编辑器之前，默认信息被创建之后运行。 它允许你编辑提交者所看到的默认信息。 该钩子接收一些选项:存有当前提交信息的文件的路径、提交类型和修补提交的提交的 SHA-1 校验。 它对一般的提交来说并没有什么用;然而对那些会自动产生默认信息的提交，如提交信息模板、合并提交、压缩提交和修订提交等非常实用。 你可以结合提交模板来使用它，动态地插入信息。
commit-msg
commit-msg 钩子接收一个参数，此参数即上文提到的，存有当前提交信息的临时文件的路径。 如果该钩子脚本以非零值退出，Git 将放弃提交，因此，可以用来在提交通过前验证项目状态或提交信息。 在本章的最后一 节，我们将展示如何使用该钩子来核对提交信息是否遵循指定的模板。
post-commit
post-commit 钩子在整个提交过程完成后运行。 它不接收任何参数，但你可以很容易地通过运行 git log -1 HEAD 来获得最后一次的提交信息。 该钩子一般用于通知之类的事情。
邮件通知工作流钩子
你可以给电子邮件工作流设置三个客户端钩子。 它们都是由 git am 命令调用的，因此如果你没有在你的工作 流中用到这个命令，可以跳到下一节。 如果你需要通过电子邮件接收由 git format-patch 产生的补丁，这些钩子也许用得上。
applypatch-msg
applypatch-msg 。 它接收单个参数:包含请求合并信息的临时文件的名字。 如果脚本返回非零值，Git 将放弃该补丁。 你可以用该脚本来确保提交信息符合格式，或直接用脚本修正格式错误。
pre-applypatch
pre-applypatch 。有些难以理解的是，它正好运行于应用补丁之后，产生提交之前，所以你可以用它在提交前检查快照。 你可以用这个脚本运行测试或检查工作区。 如果有什么遗漏，或测试未能通过，脚本会以非零值退出，中断git am的运行，这样补丁就不会被提交。
post-applypatch
post-applypatch运行于提交产生之后，是在git am运行期间最后被调用的钩子。你可以用它把结果通知给一个小组或所拉取的补丁的作者。 但你没办法用它停止打补丁的过程。
其它客户端钩子
pre-rebase
pre-rebase 钩子运行于变基之前，以非零值退出可以中止变基的过程。 你可以使用这个钩子来禁止对已经推送的提交变基。 Git 自带的 pre-rebase 钩子示例就是这么做的，不过它所做的一些假设可能与你的工作流程 不匹配。
post-rewrite
post-rewrite钩子被那些会替换提交记录的命令调用，比如git commit --amend和git rebase(不过 不包括 git filter-branch)。 它唯一的参数是触发重写的命令名，同时从标准输入中接受一系列重写的提交记录。 这个钩子的用途很大程度上跟 post-checkout 和 post-merge 差不多。
post-merge
在git merge成功运行后，post-merge钩子会被调用。你可以用它恢复Git无法跟踪的工作区数据，比如权限数据。 这个钩子也可以用来验证某些在 Git 控制之外的文件是否存在，这样你就能在工作区改变时，把这些文件复制进来。
pre-push
pre-push 钩子会在 git push 运行期间， 更新了远程引用但尚未传送对象时被调用。 它接受远程分支的名字和位置作为参数，同时从标准输入中读取一系列待更新的引用。 你可以在推送开始之前，用它验证对引用的更 新操作(一个非零的退出码将终止推送过程)。
pre-auto-gc
Git的一些日常操作在运行时，偶尔会调用git gc --auto进行垃圾回收。pre-auto-gc钩子会在垃圾回收 开始之前被调用，可以用它来提醒你现在要回收垃圾了，或者依情形判断是否要中断回收。
post-checkout
在git checkout成功运行后，post-checkout钩子会被调用。你可以根据你的项目环境用它调整你的工作目录。 其中包括放入大的二进制文件、自动生成文档或进行其他类似这样的操作
如何跳过钩子？
有些钩子可以根据返回值决定是否继续执行后续动作，这些钩子是可以跳过的。只需要在执行命令时添加--no-verify可以跳过钩子的执行。
GitHub中webhooks的使用
在自己的GitHub的项目中选中settings按钮，进入到webhooks的配置界面，然后选择左侧栏的webhooks进行配置。
详细的参数配置属性值，可以查看官方的文档https://developer.github.com/webhooks/，当然，基础的配置我们一眼就看出来了。
Web 挂钩可以安装在组织、特定仓库或 GitHub 应用程序 上。 安装后，每当发生一个或多个订阅事件时，都会发送 web 挂钩。
您可以为每个安装目标（特定组织或特定仓库）上的每个事件创建最多 20 个 web 挂钩。
创建 web 挂钩是一个两步过程。 首先需要设置 web 挂钩通过 GitHub 实施的行为 - 它应该侦听哪些事件。 之后，您将设置服务器以接收和管理有效负载。
向互联网显示本地主机
我们将使用本地服务器接收来自 GitHub 的消息。 因此，首先，我们需要将我们的本地发展环境显示给互联网。 我们将使用 ngrok 实现此目的。 所有主要操作系统均可免费使用 ngrok。（ngrok - download）在安装 ngrok 后，您可以在命令行上运行 ./ngrok http 4567 以暴露本地主机。 4567 是我们服务器侦听消息的端口号。 您应该会看到如下所示的行：
$ Forwarding http://7e9ea9dc.ngrok.io -> 127.0.0.1:4567
博文参考
Git进阶教程-6-1-如何使用钩子检查代码和流程规范？ - 何方的编程之路
Git - Git 钩子关于 web 挂钩 - GitHub Docs
React Hooks用法与实战
一、为什么要发明hooks？
1.在组件之间复用状态逻辑很难
在class组件中，我们如果复用状态逻辑，可以使用比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。而hooks可以简单的去实现状态逻辑的复用。
2.复杂组件变得难以理解
class组件的每个生命周期常常包含一些不相关的逻辑，完全不相关的代码却在同一个方法中组合在一起，如此很容易产生 bug，并且导致逻辑不一致。
3.难以理解的 class
class 是学习 React 的一大屏障，还必须去理解 JavaScript 中 this 的工作方式。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。
二、常用的hook及其用法
1.useState：让函数组件具有维持状态的能力
state（在一个函数组件的多次渲染之间，这个 state 是共享的） 是 React 组件的一个核心机制，useState 这个 Hook 就是用来管理 state 的，下面我分别用hooks组件和class组件来对比一下两种写法。
class组件：
import React from "react";
class Demo extends React.Component
constructor(props)
super(props);
this.state =
num: 1
;
handleAdd = () =>
const newNum = this.state.num + 1;
this.setState( num: newNum );
;
render()
return (
<div>
this.state.num
<button onClick=this.handleAdd>增加</button>
</div>
);
export default Demo;
hooks组件：
import React, useState from "react";
const Demo = () =>
const [num, setNum] = useState(1);
const handleAdd = () =>
const newNum = num + 1;
setNum(newNum);
;
return (
<div>
num
<button onClick=handleAdd>增加</button>
</div>
);
;
export default Demo;
useState(initialState) 的参数 initialState 是创建 state 的初始值；返回值是一个有着两个元素的数组，第一个元素用来读取 state 的值，第二个则是用来设置这个 state 的值；如果要创建多个 state，那么我们就需要多次调用 useState。
useState 应该算最简单的一个 Hooks，但在使用中，也有很多技巧可循，如果严格按照以下几点，代码可维护性直接翻倍：
重点：
1.能用其他状态计算出来就不用单独声明状态。一个 state 必须不能通过其它 state/props 直接计算出来，否则就不用定义 state。
2.保证数据源唯一。在项目中同一个数据，保证只存储在一个地方。不要既存在 redux 中，又在组件中定义了一个 state 存储；不要既存在父级组件中，又在当前组件中定义了一个 state 存储；不要既存在 url query 中，又在组件中定义了一个 state 存储。
3.useState 适当合并。useState 拆分过细，导致代码中一大片 useState，最终使得项目bug多多难以维护。
2.useEffect：执行副作用（副作用是指一段和当前执行结果无关的代码）
对应到 Class 组件，那么 useEffect 就涵盖了 ComponentDidMount、componentDidUpdate 和 componentWillUnmount 三个生命周期方法。
useEffect接收两个参数，第一个为要执行的函数 callback，第二个是可选的依赖项数组 dependencies，其中依赖项是可选的，如果不指定，那么 callback 就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行。
1.有依赖项时，只有当依赖项发生变化时才执行。例如：
const [state, setState] = useState(0);
useEffect(() =>
// state改变之后才会执行
console.log('state-changed');
, [state]);
2.没有依赖项，则每次 render 后都会重新执行。例如：
useEffect(() =>
// 每次 render 完一定执行
console.log('re-rendered');
);
3.空数组作为依赖项，则只在首次执行时触发，对应到 Class 组件就是 componentDidMount。例如：
useEffect(() =>
// 组件首次渲染时执行，等价于 class 组件中的 componentDidMount
console.log('did mount');
, [])
4.useEffect 还允许你返回一个函数，用于在组件销毁的时候做一些清理的操作，类似于componentWillUnmount，例如：
useEffect(() =>
return () =>
// 组件卸载时执行，等价于 class 组件中的 componentWillUnmount
clearInterval(timer1);
, [])
useEffect使用需注意：
重点：
React 会使用浅比较来对比依赖项是否发生了变化，所以要特别注意数组或者对象类型。如果你是每次创建一个新对象，即使和之前的值是等价的，也会被认为是依赖项发生了变化。
3.useCallback：缓存回调函数
在 React 函数组件中，每一次 UI 的变化，都是通过重新执行整个函数来完成的。你不妨思考下面代码的执行在这里插入代码片过程。每次组件状态发生变化的时候，函数组件实际上都会重新执行一遍。在每次执行的时候，实际上都会创建一个新的事件处理函数 handleIncrement。
function Counter()
const [count, setCount] = useState(0);
const handleIncrement = () =>
setCount(count + 1)
;
return <button onClick=handleIncrement>count</button>
因此，我们需要做到的是：只有当 count 发生变化时，我们才需要重新定一个回调函数，这就是useCallback这个hook的作用。
function Counter()
const [count, setCount] = useState(0);
const handleIncrement = useCallback(() =>
setCount(count + 1)
, [count]);
return <button onClick=handleIncrement>count</button>
4.useMemo：缓存计算的结果
useMemo和用法和作用与useCallback很相似，有助于避免在每次渲染时进行高开销的计算。开发中我们经常需要根据某些状态计算出我们需要的值进行渲染。
export default function Index(type)
const [count, setCount] = useState(0);
const getType = () =>
console.log('渲染了')
if (type === 1)
const a = 1;
return a + 1;
else
return 3;
return (
<span>
<span>这是type值：getType()</span>
<button onClick=() => setCount(count + 1)>count</button>
</span>
)
上面的例子中，每当页面有状态改变时，getType函数就会去执行，打印出来“渲染了”，这样就耗费了很多不必要的开销。因为getType里面依赖的是type这个状态，所以可以写成下面的代码来进行优化性能。
export default function Index(type)
const [count, setCount] = useState(0);
const getType = useMemo(() =>
console.log('渲染了')
if (type === 1)
const a = 1;
return a + 1;
else
return 3;
, [type]);
return (
<span>
<span>这是type值：getType</span>
<button onClick=() => setCount(count + 1)>count</button>
</span>
)
5.useRef：在多次渲染之间共享数据
useRef这个hook主要有两个功能：
1.结合 React 的 ref 属性和 useRef 这个 Hook，我们就可以获得真实的 DOM 节点，并对这个节点进行操作。
2.我们可以把 useRef 看作是在函数组件之外创建的一个容器空间，在函数组件的多次渲染之间共享这个值。使用 useRef 保存的数据一般是和 UI 的渲染无关的，因为当 ref 的值发生变化时，是不会触发组件的重新渲染的。
获取dom节点的功能比较简单，就不做代码展示了，下面来看一下如何用useRef来实现跨周期共享数据。
import React, useState, useRef, useCallback from 'react';
export default function Index()
const [time, setTime] = useState(0);
const timer = useRef(null);
const handleStart = useCallback(() =>
timer.current = setInterval(() =>
setTime((time) => time + 1);
, 1000);
, []);
const handlePause = useCallback(() =>
clearInterval(timer.current);
timer.current = null;
, [])
return (
<span>
time秒
<br />
<button onClick=handleStart>开始计时</button>
<button onClick=handlePause>停止计时</button>
</span>
)
6.useContext：定义全局状态
我们都知道react父组件传递数据给子组件，子组件用props接收，但是父组件传递给孙子组件甚至曾孙子组件，这个过程就会变的很繁琐。那useContext这个hook就是解决这个问题的，需要React的createContext的API来配合完成，一起来看实现代码。
//父组件
import React from 'react';
export const UserContext = React.createContext(null);
import Son from './Son';
export default function Father()
const userInfo =
name: 'Tom',
id: 1,
email: '111222333@163.com',
;
return (
<UserContext.Provider value=userInfo>
父组件
<Son />
</UserContext.Provider>
)
//子组件
import React, useContext from 'react';
import UserContext from './Father';
export default function Son()
const userInfo = useContext(UserContext);
console.log(userInfo)
return (
<span>
子组件
</span>
)
需要注意的是 子组件获取的数据必须在自己的上层组件中定义才能够获取到，在一些小型项目中使用useContext还是非常方便的。
三、自定义hooks的用法
什么是自定义hooks：声明一个名字以 use 开头的函数，你可以传递任意参数给这个 Hook，也可以返回任何值，在函数内部使用其他hooks（也可以是自定义hooks）。
为什么要用自定义hooks：方便业务逻辑拆分，使代码简洁明了容易维护；代码复用，减少代码量；
典型的使用场景：
1.抽取业务逻辑。
2.封装通用逻辑。
3.监听浏览器状态。
4.拆分复杂组件。
下面用几个例子来帮助大家更深理解自定义hooks：
1.自定义hooks-实现强制渲染(forceUpdate)
主文件：
import React from 'react';
import useUpdate from './useUpdate';
const Test = () =>
const [forceUpdate] = useUpdate();
return <span>
<button onClick=() => forceUpdate()>刷新</button>
Date.now()
</span>
;
export default Test;
hook文件：
import useState from 'react';
const useUpdate = () =>
const [, setFlag] = useState();
const update = () =>
setFlag()
;
return [update];
export default useUpdate;
2.自定义hooks-获取滚动条位置
主文件：
import React from 'react';
import useScroll from './useScroll';
const Test = () =>
const x, y = useScroll();
return <span>
横向滚动条位置：x
纵向滚动条位置：y
</span>
;
export default Test;
hook文件：
import useState, useEffect from 'react';
const useScroll = () =>
const [position, setPosition] = useState( x: window.scrollX, y: window.scrollY );
useEffect(() =>
const handler = () =>
const obj =
x: window.scrollX,
y: window.scrollY,
setPosition(obj);
;
window.addEventListener("scroll", handler);
return () =>
window.removeEventListener("scroll", handler);
;
, []);
return position;
;
export default useScroll;
3.自定义hooks-实现虚拟列表
主文件：
import React, useMemo, useRef from 'react';
import useVirtualList from './useVirtualList';
const Test = () =>
const containerRef = useRef(null);
const wrapperRef = useRef(null);
const originalList = useMemo(() => Array.from(Array(100000).keys()), []);
const [list] = useVirtualList(originalList,
containerTarget: containerRef,
wrapperTarget: wrapperRef,
//每条高度60px，未设置box-sizing属性，所以再加2px边框高度，为62px
itemHeight: 62,
);
return (
<div ref=containerRef style= height: '300px', width: '500px', overflow: 'auto', border: '1px solid' >
<div ref=wrapperRef>
list.map((ele) => (
<div
style=
height: 52,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #e8e8e8',
marginBottom: 8,
key=ele
>
Row: ele
</div>
))
</div>
</div>
);
export default Test;
hook文件：
import useEffect, useState from 'react';
interface Options
containerTarget: any;
wrapperTarget: any;
itemHeight: number;
const useVirtualList = <T>(originalList: Array<T>, options: Options) =>
const containerTarget, wrapperTarget, itemHeight = options;
const [list, setList] = useState<T[]>([]);
const handleScroll = () =>
//向上滚动的高度和个数
const scrollTop = Math.floor(containerTarget.current.scrollTop);
const scrollNum = Math.floor(scrollTop / itemHeight);
//可视区的高度和个数
const viewHeight = containerTarget.current.clientHeight;
const viewNum = Math.ceil(viewHeight/itemHeight);
const totalHeight = originalList.length * itemHeight;
wrapperTarget.current.style.height = totalHeight - scrollNum * itemHeight + 'px'<以上是关于Git——hooks的原理与实战的主要内容，如果未能解决你的问题，请参考以下文章