南昌做网站费用哪个网站有摄影作品

当前位置： 首页 > news >正文

南昌做网站费用,哪个网站有摄影作品,绿色环保企业网站模板,wordpress首页文章显示缩略图自己之前的开发栈一直是 Vue#xff0c;对 Vue 的设计理念及底层实现原理算是颇有了解#xff1b;随着公司技术迭代#xff0c;近半年来开始接触使用 React。 前面写了几篇关于 React 的文章#xff0c;但大部分都是知识点以及开发过程问题的沉淀总结。 这篇文章想尝…自己之前的开发栈一直是 Vue对 Vue 的设计理念及底层实现原理算是颇有了解随着公司技术迭代近半年来开始接触使用 React。 前面写了几篇关于 React 的文章但大部分都是知识点以及开发过程问题的沉淀总结。 这篇文章想尝试聊一下从个人使用角度 React 和 Vue 的区别到底“孰优孰劣” 说明这里 React 以 V16.8.0 版本为基准 正式引入 Hooks 说在前面 随着 Vue、React 的演进其各自框架的基本形态和功能已经很完备最根本差异点逐渐演变成了框架开发者各自的 理念差异 不同的理念让框架有了各自的 设计模式和最佳实践 。然而对于使用者来说搞懂其设计模式、沉淀其最佳实践、了解其基本原理是掌握一门框架的捷径也是衡量对其熟悉程度的标尺。 数据驱动 ྀི Vue设计了新的类似 HTML 模板语法通过选项属性vue3组合式为开发者提供编写逻辑和 state 的地方再通过 viewModel当监听到 state 变化时再去更新 view通过众多的 “语法糖” 让使用变得的更加容易。 templatediv v-foritem in items{{ item.text }}/div /template scriptexport default () {return {data () {items: [{text: }]}}} /script#mermaid-svg-s7WJ5epaUpLuXcJQ {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .error-icon{fill:#552222;}#mermaid-svg-s7WJ5epaUpLuXcJQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-s7WJ5epaUpLuXcJQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .marker.cross{stroke:#333333;}#mermaid-svg-s7WJ5epaUpLuXcJQ svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster-label text{fill:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster-label span{color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .label text,#mermaid-svg-s7WJ5epaUpLuXcJQ span{fill:#333;color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .node rect,#mermaid-svg-s7WJ5epaUpLuXcJQ .node circle,#mermaid-svg-s7WJ5epaUpLuXcJQ .node ellipse,#mermaid-svg-s7WJ5epaUpLuXcJQ .node polygon,#mermaid-svg-s7WJ5epaUpLuXcJQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .node .label{text-align:center;}#mermaid-svg-s7WJ5epaUpLuXcJQ .node.clickable{cursor:pointer;}#mermaid-svg-s7WJ5epaUpLuXcJQ .arrowheadPath{fill:#333333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-s7WJ5epaUpLuXcJQ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster text{fill:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ .cluster span{color:#333;}#mermaid-svg-s7WJ5epaUpLuXcJQ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-s7WJ5epaUpLuXcJQ :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 绑定 渲染 data数据 template代码段 HTML ྀི React当数据变化时UI随之更新使用 “函数” 承载所有的功能对于 React 来说函数组件本质上就是 js 的普通函数抹平了 HTML 与 JavaScript 的割裂感让使用更加专注 JavaScript 逻辑无需额外心智负担。 export default () {const [items, setItems] useState([{text: }]);return (items.map(item div{item.text}/div)/) }#mermaid-svg-vljV7w8hI5sccWJA {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vljV7w8hI5sccWJA .error-icon{fill:#552222;}#mermaid-svg-vljV7w8hI5sccWJA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vljV7w8hI5sccWJA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vljV7w8hI5sccWJA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vljV7w8hI5sccWJA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vljV7w8hI5sccWJA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vljV7w8hI5sccWJA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vljV7w8hI5sccWJA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vljV7w8hI5sccWJA .marker.cross{stroke:#333333;}#mermaid-svg-vljV7w8hI5sccWJA svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vljV7w8hI5sccWJA .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-vljV7w8hI5sccWJA .cluster-label text{fill:#333;}#mermaid-svg-vljV7w8hI5sccWJA .cluster-label span{color:#333;}#mermaid-svg-vljV7w8hI5sccWJA .label text,#mermaid-svg-vljV7w8hI5sccWJA span{fill:#333;color:#333;}#mermaid-svg-vljV7w8hI5sccWJA .node rect,#mermaid-svg-vljV7w8hI5sccWJA .node circle,#mermaid-svg-vljV7w8hI5sccWJA .node ellipse,#mermaid-svg-vljV7w8hI5sccWJA .node polygon,#mermaid-svg-vljV7w8hI5sccWJA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vljV7w8hI5sccWJA .node .label{text-align:center;}#mermaid-svg-vljV7w8hI5sccWJA .node.clickable{cursor:pointer;}#mermaid-svg-vljV7w8hI5sccWJA .arrowheadPath{fill:#333333;}#mermaid-svg-vljV7w8hI5sccWJA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-vljV7w8hI5sccWJA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-vljV7w8hI5sccWJA .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-vljV7w8hI5sccWJA .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-vljV7w8hI5sccWJA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-vljV7w8hI5sccWJA .cluster text{fill:#333;}#mermaid-svg-vljV7w8hI5sccWJA .cluster span{color:#333;}#mermaid-svg-vljV7w8hI5sccWJA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-vljV7w8hI5sccWJA :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 渲染 state数据 jsx HTML React 采用 hooks 如上述 useState为组件提供状态状态写在函数中既不破坏纯函数的特性又能在状态变更时使函数组件以最新的状态重新执行更新DOM。 useState Hook 提供了这两个功能 State 变量 用于保存渲染间的数据。 State setter 函数 更新变量并触发 React 再次渲染组件。 可参考开篇通过 state 阐述 React 渲染 ✈️ vue 中提供了 v-for 语法糖提供循环能力React 则回归开发语言本身直接使用使用 JavaScript 原生 map 实现。 生命周期 ྀི Vue有明确的生命周期针对组件的不同阶段去更新视图 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤比如设置好数据侦听编译模板挂载实例到 DOM以及在数据改变时更新 DOM。在此过程中它也会运行被称为生命周期钩子的函数让开发者有机会在特定阶段运行自己的代码。 ྀི React摒弃了生命周期概念只在特定的时机会触发整个函数组件的重新执行从而生成最新的视图不需要做不同的逻辑。这一切通过相关 Hooks 即可实现 useState 保存渲染间的数据其发生改变会触发重新渲染可查看总结React 中的 state 状态。React 设计了 useEffect 用来处理与渲染无关的副作用代码可查看「Effect由渲染本身引起的副作用」。同样的React 中设计了 useRef 来存储与渲染无关的数据其可以贯穿重复的函数执行变更后不需要触发函数重新渲染并且不需要在意此时函数的渲染过程可查看脱围使用 ref 保存值及操作DOM。 正常的开发过程中 useState、 useEffect、 useRef 几乎可以解决所有问题其他的 Hooks 多数为了优化而设计后续单独文章讲述。 逻辑复用 可以通过封装 JavaScript 函数来处理一些公共逻辑但对于封装一个 带响应式 的方法异常困难。 ྀི Vue采用 Mixin 方式使用过程比较爽但是后续维护异常困难“搞不清不敢动”。甚至不少团队规范中要求宁肯copy也不要用 Mixin。 Vue.component(my-component, {mixins: [myMixin],created() {this.greet(); // 调用mixin中的方法} });ྀི React采用自定义 Hooks。相同业务逻辑拆分的更清晰降低代码的冗余。 自定义 Hook 共享的只是状态逻辑而不是状态本身。对 Hook 的每个调用完全独立于对同一个 Hook 的其他调用。 每当组件重新渲染自定义 Hook 中的代码就会重新运行。组件和自定义 Hook 都 需要是纯函数。 // useWindowSize.js export default function useWindowSize (){const [size, setSize] useState(getSize());useEffect(() {const handler () {setSize(window.innerWidth)};window.addEventListener(resize, handler);return () {window.removeEventListener(resize, handler);};}, []);return [size]; };// jsx中使用 export default function{const [size] useWindowSize(); }总结 1️⃣ Vue 可能不断推出新功能让开发变的更舒适React 没有模板、没有生命周期、没有指令、没有各种各样的语法糖、没有复杂的执行过程是一个只有函数的世界 2️⃣ Vue 更贴近传统前端开发方式更符合人的直觉更易上手更简单React 让函数变得更加复杂使用者有更大的控制权更加灵活从而优雅。 3️⃣ React 采用函数式编程函数式编程更加强调 程序执行的结果 而非执行的过程倡导利用若干简单的执行单元让计算结果不断渐进逐层推导复杂的运算而不是设计一个复杂的执行过程。