asp 网站图标wordpress后台登录慢

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

asp 网站图标,wordpress后台登录慢,wordpress开启mu,nas搭建wordpress博客网站Vue、React和Angular是三个流行的前端框架#xff0c;采用组件化的开发方式。支持虚拟DOM#xff08;Virtual DOM#xff09;技术#xff0c;有丰富的生态系统、大量的插件和工具可以使用。Vue的语法是传统的HTML和JavaScript#xff0c;React使用JSX语法#xff0c;Angu… Vue、React和Angular是三个流行的前端框架采用组件化的开发方式。支持虚拟DOMVirtual DOM技术有丰富的生态系统、大量的插件和工具可以使用。Vue的语法是传统的HTML和JavaScriptReact使用JSX语法Angular使用了TypeScript。Vue和React使用的是响应式数据绑定机制即数据变化会自动更新视图Angular使用的是双向数据绑定机制即视图和数据之间可以互相同步变化。Vue和React是轻量级的框架只关注视图层Angular是完整的MVC框架提供了更多的功能和约束Vue和React比较适合中小型项目Angular更适合中大型项目但这只是建议读者可以根据项目需求和个人喜好选择适合的框架。本文主要介绍React 的基础知识。 一、 React特点优缺点 特点 组件化React通过将UI分解为独立的可重用组件来构建复杂的用户界面。每个组件都有自己的状态和属性可以独立地进行开发、测试和维护。 虚拟DOMReact使用虚拟DOMVirtual DOM来管理用户界面的更新。虚拟DOM是一个轻量级的JavaScript对象树它与实际DOM保持同步并且只在需要更新时才更新实际DOM以提高性能。 单向数据流React采用单向数据流的数据模型即数据从父组件传递到子组件子组件不能直接修改父组件的数据。这样可以更好地管理和跟踪数据的变化。 高性能由于使用虚拟DOM和精确的DOM更新算法React能够提供出色的性能。它只更新需要更改的部分而不是整个界面从而减少了不必要的DOM操作。
优点 组件化开发使代码更易于维护和重用提高开发效率。虚拟DOM的使用减少了对实际DOM操作的频率提高了性能。单向数据流使数据的变化更易于追踪和调试。 缺点 学习曲线较陡峭对于初学者来说可能需要一些时间来熟悉其概念和使用方法。React仅关注于用户界面的构建对于其他方面如路由、状态管理等需要结合其他库或框架来使用。 二、组件概念特点 React 中的组件是用来封装可重用代码的基本单元。组件可以是函数式组件或类组件并且可以通过组合其他组件来创建更大的组件。 组件的特点如下 可组合性组件可以通过嵌套和组合的方式来创建更复杂的组件这使得代码更具有模块化和可重用性。可重用性组件可以在应用程序的不同部分进行重复使用从而减少了重复编写代码的工作量。可维护性组件可以独立进行开发、测试和维护使代码的维护更加容易。单一职责每个组件应该只关注一项功能并且应该尽可能地小而简单。状态管理组件可以通过状态state来保存和管理数据并且可以通过 props 属性向子组件传递数据。视图渲染组件可以根据状态的变化自动更新视图使用户界面保持与数据同步。 总之组件是 React 中非常重要的概念它们使得构建复杂的用户界面变得更加简单和可维护。通过将应用程序拆分为多个组件我们可以提高代码的可读性和可重用性并且更容易进行维护和扩展。 三、简单组件制作实例 1、创建项目 使用vite创建React项目此项目执行环境为Window 10系统执行下列命令前必须选安装 nodejs模块具体方法可以查询其它文章。 首先在Window 10上打开命令行窗口改变当前目录在您所在的练习目录下例如练习目录为“d:\data目录。输入命令 d:  回车 cd data  回车 创建项目命令如下 npm  create vite  my-app   回车选择React和Javascript cd  my-app  回车 npm install  回车 npm  run   dev  回车 (项目启动) 在浏览器中的地址栏中输入http://localhost:5173,出现如下效果即是项目初始化成功。 2、编写简单组件 用以下代码二覆盖App.jsx,代码如下 import React,{ Component }from react;class App extends Component {render() {return (divh1Hello, React!/h1pThis is a simple React component./p/div);} }export default App; 这是一个名为App的React组件它在这里作为应用的主组件。它继承自React.Component类并实现了一个render方法。render方法返回了一个JSX元素包含一个h1标题和一个p段落。最后通过export default语句将该组件导出以供其他组件使用。 四、 复杂组件示例 此示例是 一个简易的BBS的项目在这个项目中有两个组件一个是PostList用于展示BBS的帖子列表另外一个是PostItem组件用于展示BBS帖子PostList使用PostItem组件这样两者就形成了父子关系。最终效果如下所示 1、设计思路 React 应用组件设计的一般思路是通过定义少数有状态的组件管理整个应用状态的变化 并且将状态通过props传递给其余无状态组件由无状态组件完成界面绝大部分UI的渲染工作。总之有状态组件主要关注状态变化的业务逻辑无状态组件主要关注组件UI渲染。 根据设计思路可以将 PostList组件设计为一介有状态组件负责帖子列表数据的获取及点赞行为的处理主要设计为一个继承Component的组件类使用数据posts存储帖子数据handleVote函数负责处理点赞行为具体代码如下 import React, { Component } from react; import ./PostList.css; import PortItem from ./PostItem; class PostList extends Component { constructor(props) {super(props);this.state {posts:[]};this.timernull;//定义定时器this.handleVotethis.handleVote.bind(this);//绑定this }componentDidMount(){this.timersetTimeout((){this.setState({posts:[{id:1,title:大家一起讨论吧,author:张三,date:2017-09-01 1000,vote:0},{id:2, title:今天天气不错,author:李四,date:2017-09-01 1000,vote:0},{ id:3,title:明天天气不错,author:王五,date:2017-09-01 1000,vote:0}]});},1000)}componentWillUnmount(){if(this.timer){clearTimeout(this.timer);}}handleVote(id){//根据帖子id找到对应帖子并修改vote值const poststhis.state.posts.map(item{const newItemitem.idid ? {…item,vote:item.vote1}:item;return newItem; });//使用新的帖子数组更新state this.setState({posts}); }render() {return (div classNamecontainerh2帖子列表/h2 ul{this.state.posts.map(itemPortItem post{item} onVote{this.handleVote} key{item.id} /)}/ul/div); } }export default PostList; PostItem组件设计为一个无状态组件只负责每一个帖子的展示内部有一个状态变量vote记录每个帖子的点赞数主要设计为组件函数根据PostList传递的post属性渲染UI当发生点赞行为时调用props.onVote方法将点赞逻辑交给PostList中的handleVote方法处理。代码如下 //PortItem.jsx import React from react; import ./PostItem.css;function PostItem(props){const handleClick(){props.onVote(props.post.id);}const { post }propsreturn (li classNameitemdiv classNametitle{post.title}/divdiv classNameauthor创建人span{post.author}/span/divdiv创建时间span{post.date}/span/divdiv classNamelikebutton onClick{handleClick}点赞/buttonnbsp;span{post.vote}/span/div/li); }export default PostItem; 本文从React基本知识说起简要说明了React的特点和优缺点组件概念和特点简单组件的编写最后以一简化的BBS项目讲述了组件的设计原则和技术细节。