js 实现hooks
实现 React Hooks 的 JavaScript 方法
React Hooks 是 React 16.8 引入的特性，允许在函数组件中使用状态和其他 React 特性。以下是几种常见 Hooks 的实现方法。
useState
useState 允许函数组件拥有局部状态。
function useState(initialValue) {
let state = initialValue;
const setState = (newValue) => {
state = newValue;
// 触发组件重新渲染
render();
};
return [state, setState];
}实际 React 的实现更复杂，涉及 Fiber 架构和调度机制。
useEffect
useEffect 用于处理副作用，如数据获取、订阅等。
function useEffect(callback, dependencies) {
const hasNoDependencies = !dependencies;
const depsChanged = dependencies
? !dependencies.every((dep, i) => dep === previousDeps[i])
: true;
if (hasNoDependencies || depsChanged) {
callback();
previousDeps = dependencies;
}
}React 实际实现会处理清理函数和多次调用的情况。
useRef
useRef 返回一个可变的 ref 对象。
function useRef(initialValue) {
const ref = { current: initialValue };
return ref;
}ref 对象在组件整个生命周期内保持不变。
useContext
useContext 允许订阅 React 的 Context 变化。
function useContext(Context) {
return Context._currentValue;
}实际实现会处理组件更新和嵌套 Provider 的情况。
自定义 Hook
可以创建自己的 Hook 来复用状态逻辑。
function useCounter(initialCount) {
const [count, setCount] = useState(initialCount);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return { count, increment, decrement };
}自定义 Hook 必须以 "use" 开头，这样 React 能识别其为 Hook。
Hook 规则
- 只在最顶层调用 Hook
- 只在 React 函数组件或自定义 Hook 中调用 Hook
这些规则确保 Hook 在每次渲染时以相同的顺序被调用。
注意事项
- Hooks 依赖于调用顺序，不能在条件语句或循环中使用
- Class 组件不能使用 Hooks
- 每次渲染都会调用 Hooks，但 React 会保持状态
Hooks 提供了一种更直接的 API 来使用 React 特性，减少了组件嵌套和代码复杂度。
