前端开发必知必会：Git、React & Vue 核心知识点全景解析 （从原理到实战，掌握12大高频面试题的终极指南）
1. Git常用命令
常用命令：
git init # 初始化仓库
git clone
git add
git commit -m "message" # 提交到本地仓库
git push # 推送到远程仓库
git pull # 拉取远程更新
git branch # 查看分支
git checkout -b
git merge
git status # 查看状态
git log # 查看提交历史
git reset --hard
git stash # 暂存当前修改
解析：
Git是分布式版本控制系统，这些命令覆盖了日常开发90%的需求。git add和git commit是本地操作，git push和git pull是远程协作命令。
代码案例
# 典型工作流程
git clone https://github.com/user/repo.git
cd repo
git checkout -b feature-branch
# 修改代码...
git add .
git commit -m "Implement new feature"
git push origin feature-branch
2. React中Fragment的理解
理解：
Fragment允许你将子列表分组，而无需向DOM添加额外节点。相当于一个不可见的包裹容器。
使用场景：
需要返回多个相邻元素但不想添加额外DOM节点时
表格组件中需要渲染多个
任何需要减少DOM嵌套深度的场景
代码案例：
jsx
// 传统方式会多出一个div
function Component() {
return (
);
}
// 使用Fragment
function CleanComponent() {
return (
<>
);
}
3. React Context的理解
理解：
Context提供了一种在组件树中共享值的方式，而不必显式地通过组件树的逐层传递props。
核心API：
React.createContext：创建Context对象
Context.Provider：提供值的组件
Context.Consumer 或 useContext Hook：消费值的组件
代码案例：
jsx
const ThemeContext = React.createContext('light');
function App() {
return (
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return
}
4. 受控组件和非受控组件
受控组件：
表单数据由React组件state管理
通过props设置值，通过onChange回调更新值
示例：
非受控组件：
表单数据由DOM自身管理
通过ref获取DOM值
示例：
代码对比：
jsx
// 受控组件
function Controlled() {
const [value, setValue] = useState('');
return setValue(e.target.value)} />;
}
// 非受控组件
function Uncontrolled() {
const inputRef = useRef();
const handleSubmit = () => {
alert(inputRef.current.value);
};
return (
<>
);
}
5. React.forwardRef
作用：
forwardRef允许组件接收ref并将其向下传递给子组件。主要用于：
访问子组件的DOM节点
高阶组件中转发refs
与第三方库集成
代码案例：
jsx
const FancyButton = React.forwardRef((props, ref) => (
));
function App() {
const ref = useRef();
return (
);
}
6. setState调用后的行为
过程：
将更新加入队列
合并多个setState调用
重新渲染组件及其子组件
执行componentDidUpdate
同步/异步：
在React事件处理函数中是异步的（批量更新）
在setTimeout/native事件中是同步的
代码示例：
jsx
function Example() {
const [count, setCount] = useState(0);
// 异步示例
const handleAsync = () => {
setCount(count + 1);
console.log(count); // 输出旧值
};
// 同步示例
const handleSync = () => {
setTimeout(() => {
setCount(count + 1);
console.log(count); // 输出新值
}, 0);
};
}
7. setState和replaceState的区别
setState：
合并更新（浅合并）
保留未提及的state属性
是当前React推荐的方式
replaceState：
完全替换state
会丢失未提及的state属性
已被废弃（仅存在于class组件早期版本）
代码对比：
jsx
// setState (合并)
this.setState({ a: 1 }); // 保留其他state
// replaceState (已废弃)
this.replaceState({ a: 1 }); // 完全替换state，丢失其他属性
8. state和props触发更新的生命周期区别
props更新：
static getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
state更新：
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
关键区别：
props更新会触发getDerivedStateFromProps
只有props变化会执行componentWillReceiveProps（已废弃）
9. Vue自定义指令
定义方式：
javascript
Vue.directive('focus', {
inserted(el) {
el.focus();
}
});
使用场景：
DOM操作（自动聚焦、拖拽）
权限控制（v-permission）
埋点统计（v-track）
图片懒加载（v-lazy）
代码案例：
javascript
// 权限指令
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
// 使用
10. Vue的$nextTick
作用：
等待下一次DOM更新周期后执行回调，确保能获取到更新后的DOM。
触发时机：
数据变化后
DOM更新完成后
使用场景：
基于更新后的DOM进行计算
在修改数据后立即操作DOM
代码示例：
javascript
this.message = '更新';
this.$nextTick(() => {
console.log(this.$el.textContent); // 获取更新后的内容
});
11. React的生命周期
Class组件生命周期：
挂载阶段：
constructor
static getDerivedStateFromProps
render
componentDidMount
更新阶段：
static getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
卸载阶段：
componentWillUnmount
函数组件等效：
useEffect(() => {}, []) 替代 componentDidMount
useEffect(() => { return () => {} }, []) 替代 componentWillUnmount
useMemo/useCallback 替代 shouldComponentUpdate
12. React路由模式区别
HashRouter：
使用URL hash部分（#）实现
无需服务器配置
兼容性更好
示例：example.com/#/about
BrowserRouter：
使用HTML5 History API
URL更干净（无#）
需要服务器支持
示例：example.com/about
代码对比：
jsx
// HashRouter
import { HashRouter as Router } from 'react-router-dom';
// BrowserRouter
import { BrowserRouter as Router } from 'react-router-dom';
// 使用方式相同
服务器配置示例（BrowserRouter）：
text
# Nginx配置
location / {
try_files $uri $uri/ /index.html;
}