东莞网站制作的公司永久f194078w78w

东莞网站制作的公司,永久f194078w78w,价格低的股票,在线网页制作工具写在前面#xff1a;从 Vue 转到 React#xff0c;最大的挑战往往不是 JSX 语法#xff0c;而是对渲染机制底层逻辑的理解偏差。今天从一个看似简单的 Bug#xff0c;探讨 React 的 Reconciliation#xff08;协调#xff09;算法原理。 前排广告位#xff…写在前面从 Vue 转到 React最大的挑战往往不是 JSX 语法而是对渲染机制底层逻辑的理解偏差。今天从一个看似简单的 Bug探讨 React 的 Reconciliation协调算法原理。前排广告位欢迎访问我的个人网站https://hixiaohezi.com在 React 社区的问答中有一个现象非常普遍“为什么我的 Input 输入框每输入一个字符就会失去焦点”其实是因为它触及了 React 最核心的渲染原理——组件身份Identity与协调Reconciliation。问题背景很多从 Vue 转向 React 的开发者包括我自己在初期为了方便或者实现逻辑闭环可能会写出类似这样的代码export default function UserForm() { const [name, setName] useState(); // 错误示范在组件内部定义组件 // 很多开发者习惯在 Vue 的 template 中直接写局部逻辑 // 在 React 中容易误以为这样是在拆分 render 函数 const StyledInput ({ value, onChange }) ( input style{{ border: 1px solid blue, padding: 10px }} value{value} onChange{onChange} / ); return ( div h3用户录入/h3 StyledInput value{name} onChange{(e) setName(e.target.value)} / p当前输入{name}/p /div ); }Bug 出现当在输入框中按下第一个字符比如 ‘a’name状态更新组件重渲染。紧接着输入框的焦点瞬间丢失。除了失去焦点如果这个子组件里有任何内部 State它们也会全部重置。原理深度分析要理解这个问题必须深入 React 的 Diff 算法协调过程。React 在更新时会比较新旧两棵虚拟 DOM 树Fiber Tree。比较的一个核心策略是类型Type的同一性检查。1. 不同的类生成不同的树React 检查一个节点时首先看它的type如果oldNode.type newNode.typeReact 认为这是同一个组件它会保留该组件实例及其 State只更新 PropsUpdate。如果oldNode.type ! newNode.typeReact 认为这是两个完全不同的东西它会**卸载Unmount旧组件丢失其所有状态和 DOM 节点然后挂载Mount**新组件。2. 函数也是对象回到上面的代码。StyledInput是在UserForm内部定义的函数。这意味着UserForm每次渲染时都会创建一个全新的StyledInput函数引用地址不同。渲染流程回放第一次渲染创建StyledInput(函数地址 A)。渲染StyledInput /(Type 是 A)。结果挂载组件 A。用户输入 ‘a’ - 触发 setName - 触发第二次渲染UserForm重新执行。创建新的StyledInput(函数地址 B)。注意虽然代码逻辑一样但在内存中A ! B。React 比较旧节点的 Type 是 A新节点的 Type 是 B。判定Type 不同这不是同一个组件执行卸载 A移除 DOM销毁 State挂载 B创建新 DOM初始化 State。3.DOM 的毁灭与重生因为组件被卸载并重新挂载旧的inputDOM 元素被从页面中移除一个新的input被创建并插入。物理 DOM 都换了焦点自然就没了。Vue 与 React 的视角差异对于习惯 Vue 的开发者来说这种行为可能略显反直觉Vue 的视角组件通常是在.vue文件中静态定义的或者在components选项中注册。组件定义的引用在整个应用生命周期中通常是稳定的Static。即使在setup()内部返回渲染函数也不太容易犯在渲染过程中重新定义组件类的错误。React 的视角React Component 本质就是 JavaScript 函数。在 JS 中函数内定义函数等于每次执行外层函数时都新建一个闭包函数。React 的渲染完全依赖于 JS 的运行结果因此对引用的稳定性要求极高。解决方案修正方案非常简单保证组件类型Type的引用稳定性。方案一移到外部标准解法将子组件定义移到父组件外面。这样StyledInput就在模块加载时被创建一次永远不会变。// ✅ 正确定义在外部引用地址恒定 const StyledInput ({ value, onChange }) ( input ... / ); export default function UserForm() { // ... return StyledInput ... /; }方案二使用 render props 或直接写 JSX如果不仅仅是为了复用只是为了拆分 JSX 结构可以直接拆分成函数返回注意不是组件是返回 Element 的函数或者直接把 JSX 存在变量里。总结在 React 中组件在 UI 树中的位置Position和类型Type共同决定了它的身份Identity。身份变了状态就没了。欢迎访问我的个人网站 hixiaohezi.com愿我们对原理的每一次深究都能化作代码中的一份从容。