网站开发设计步骤,江苏网站建设方案,网站建设与管理 吴代文,百度k了网站怎么办组件框架是用于构建应用程序的工具#xff0c;以便将UI和逻辑划分为单独的可重用组件。目前的组件框架包括React、Vue、Angular、Ember、Svelte等。
Vue和React使用了常见的框架概念#xff0c;如处理状态、道具、引用、生命周期挂钩、事件等。这两个框架在当今的web开发中被…组件框架是用于构建应用程序的工具以便将UI和逻辑划分为单独的可重用组件。目前的组件框架包括React、Vue、Angular、Ember、Svelte等。
Vue和React使用了常见的框架概念如处理状态、道具、引用、生命周期挂钩、事件等。这两个框架在当今的web开发中被广泛使用。它们使用几乎相似的模式以可重用组件的形式构建UI但在这篇博客文章中您将了解组件框架的概念以及与在React中的实现方式相比它们在Vue中是如何实现的。
安装和设置
让我们从比较两个框架的安装过程开始。
Vue
To install Vue CLI (command line interface), the following command is used:
npm install -g vue/cli
To check the version, run the following command in your terminal.
vue --version
To create a new project, run the following command.
vue create project_name
cd project_name
npm run serve
React
To install React, run the following command on your terminal:
npm install -g create-react-app
To create a new project, run the following command.
npx create-react-app project_name
cd project_name
npm run start
Props
组件框架使用props将数据从父组件传递到子组件这是两者的关键技术。
Vue
在Vue中使用引号或使用v-bind指令的变量将props作为字符串传递该指令也可以写成字符。
Passing props to child component
// passing props from to Modal component
templateModal :isOpenpageLoaded titleSurvey Form /
/template
Accessing props in child component
// Modal Component
templateform v-ifisOpenp{{ title }} /p!-- ...other form elements --/form
/templatescript setupconst props defineProps({isOpen: Boolean,title: String});
/script
React
在React中props以字符串的形式传递也使用引号或使用大括号的变量如下所示
Passing props
divModal isOpen{pageLoaded} titleSurvey Form /
/div
Accessing props
function Modal({isOpen, title}) {return ({isOpen formp{ title }/p// ...other form elements/form);
}
Events
组件可以监听特定的事件例如鼠标事件例如点击、鼠标悬停等和键盘事件例如按键向下、按键向上等。在这两个框架中事件处理也是必要的。
Vue
In Vue, events are created using the v-on directive, which can also be written as like so
templatebutton clickdisplayName Show Name /button
templatescript setupfunction displayName() {alert(Lawrence Franklin);}
/script
React
In React, events are created using the typical JavaScript inline event methods such as onClick, onKeyDown, onKeyUp, etc.
function NameAlert() {const displayName () {alert(Lawrence Franklin);}return (button onClickdisplayName Show Name /button);
}
State
组件框架使用状态来管理组件内的反应性。状态在各个组件之间实时更新。通过网站处理全球状态是一个关键问题。
Vue
In Vue, states can be created using the ref() or reactive() method, which does the same thing except ref are accessed using the .value property while reactive are used directly (they’re already unwrapped). These methods help to creative reactivity within components.
templatedivp{{ firstname }}/pp{{ lastname }}/p/div
/templatescript setupimport { ref, reactive } from vue;const firstname ref(Franklin);console.log(firstname.value);const lastname reactive(Lawrence);console.log(lastname);
/script
可以使用watch和watchEffect方法监视反应值。这些方法跟踪反应值的变化并在这些值每次变化时运行回调函数。这些方法之间的唯一区别是watchEffect最初运行一次然后开始监视更改。
import { watch, watchEffect } from vue;// watch
watch( firstname, () alert(firstname changed!);// watchEffect
watchEffect(lastname, () alert(lastname changed);
React
React uses the useState() hook to track state changes in a component and create side effects.
import { useState } from react;function ShowName() {const [firstName, setFirstName] useState(Franklin);const [lastName, setLastName] useState(Lawrence);console.log(firstName, lastName);return (divp{ firstname }/pp{ lastname }/p/div)
}
为了监听状态变化React使用useEffect钩子。这个钩子接受一个回调函数和一个依赖项数组每当这些依赖项的值发生变化时它就会触发回调函数。依赖项可以是任何数据类型。以下是一个示例
import { useEffect } from React;useEffect(() {console.log(name updated!);
}, [firstName, lastName]);
Open Source Session Replay
OpenReplay 是一个开源的会话回放套件可以让你看到用户在你的网络应用程序上做什么帮助你更快地解决问题。OpenReplay是自托管的可完全控制您的数据。 Start enjoying your debugging experience - start using OpenReplay for free.
Refs
有时您需要直接使用DOM元素例如添加一些动画、将输入字段设置为焦点或模糊等。为此大多数组件框架都为您提供了引用功能Vue和React使用ref可用于引用DOM元素。
Vue
In Vue, template ref written with the ref keyword is used on the DOM element and accessed like so:
templateinput typetext refname /
/templatescript setupimport { ref } from vue;const name ref(null);handleBtnClick(() {name.value.focus();}
/script
React
In React, refs are used a bit differently. They reference DOM elements using the ref keyword and the useRef() hook, which are then accessed using the .current property like so: import { useRef } from react;function MyName() {const name useRef(null);handleBtnClick(() {name.current.focus();});return (input typetext refname /button onClick{handleBtnClick} Start typing /button)
}
Two-way Data Binding
数据可以并且通常以“双向”绑定这意味着数据可以通过两种方式更新。这与表单输入字段一起使用如输入元素、选择元素、文本区域元素、复选框元素等。输入值可以通过元素和代码进行更改以使它们同步即以一种方式例如在代码中进行更改会更新另一个实例例如输入字段中中的值。
Vue
Vue uses the v-model directive to create a two-way binding like so:
templateinput v-modelsearchQuery /
/templatescript setup
import { ref } from vue;const searchQuery ref();
// searchQuery.value can be updated here, and it reflects in the input field instantly
/script
React
React uses something called controlled inputs to bind data two-way like so:
import { useState } from react;function MyComponent() {[searchQuery, setSearchQuery] useState();const handleChange (event) {setSearchQuery(event.target.value);}return (input value{searchQuery} onChange{handleChange}/);
}
Dynamic Rendering
有时组件会根据特定条件进行渲染。换句话说组件可以根据指定条件的结果进行动态渲染。
Vue
Vue uses the v-if, v-else and v-show directives to render a component dynamically based on a specified condition. The example below illustrates this concept:
templatedivp v-ifisLoggedIn Welcome /pp v-else Please Login /pbutton v-show!isLoggedInLogin/button/div
/template
React
React leverages JavaScript’s conditionals such as if, , or ternary operator to dynamically render a component. Here’s an example to illustrate this:
function MyComponent() {return ({isLoggedIn ? pWelcome/p :p Please Login /p}{!isLoggedIn button Login /button});
}
Passing Children
有时您希望将子元素传递给其他组件而不仅仅是道具。像Vue和React这样的组件框架为您提供了实现这一点的方法。
Vue
Vue makes use of slots to pass children elements. Here’s an example of how you can use them:
Modal Component, this is the component that receives children elements
// Modal.vuetemplatedivh1Welcome/h1slotslot/div
/template
UserPage Component, this is the parent component that passes the children elements
// UserPage.vuetemplatedivh1Survey Form/h1ModalpKindly fill out this survey.../pinput typetext /buttonSubmit/button/Modal/div
/template
React
React provides you with the children prop value similar to slots from Vue to pass children elements. Here’s an example:
Modal Component, this is the component that receives children elements
function Modal( {children} ) {return (divh1Welcome/h1{ children }/div);
}
UserPage Component, this is the parent component that passes the children elements function UserPage() {return (divh1Survey Form/h1ModalpKindly fill out this survey.../pinput typetext /buttonSubmit/button/Modal/div);
}
结论
在这一点上您已经了解了组件框架中使用的大多数概念如状态、道具、组件、事件等。您还了解了如何在Vue与React中实现这些概念。鉴于这些概念通常在组件框架中使用一旦熟悉了这些概念的工作原理就可以相对容易地从一个框架过渡到另一个框架。
