承德网站制作的流程,网站建设用户需求表,长沙网站快速排名提升,项目管理软件培训目录 一、何为React二、React与传统MVC的关系三、React的特性1、声明式编程①、实现标记地图 2、高效灵活3、组件式开发(Component)①、函数式组件②、类组件#xff08;有状态组件#xff09;③、一个组件该有的特点 4、单向式响应的数据流 四、虚拟DOM1、传统DOM更新①、举… 目录 一、何为React二、React与传统MVC的关系三、React的特性1、声明式编程①、实现标记地图 2、高效灵活3、组件式开发(Component)①、函数式组件②、类组件有状态组件③、一个组件该有的特点 4、单向式响应的数据流 四、虚拟DOM1、传统DOM更新①、举例讲解 2、虚拟DOM①、举例讲解 五、创建React项目并编写React第一个应用程序1、创建React项目①、在目标文件下cmd进行创建②、成功结果说明③、运行项目 2、编写React第一个应用程序 六、React和Vue的区别七、如何在React和Vue中进行选择1、项目需求和复杂度2、团队经验和技能3、社区生态和支持4、性能和体积 八、总结 一、何为React
是一个用于构建用户界面的JavaScript库起源于Facebook的内部项目用来架设Instagram的网站并于2013年5月开源采用组件化的开发模式将用户拆分成独立的可复用的组件通过组件的组合和数据的单向流向来构建复杂的用户界面
二、React与传统MVC的关系
React不是一个完整的MVC框架最多可以认为是MV中的VView。React构建页面UI的库可以简单地理解为React将界面分成了各个独立地小块每一个块就是组件这些组件之间可以组合、嵌套就成了我们的页面
三、React的特性
1、声明式编程
声明式编程是一种编程范式它关注的是你要做什么而不是如何做 它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。
①、实现标记地图 通过命令式创建地图、创建标记、以及在地图上添加的标记的步骤如下 // 创建地图
const map new Map.map(document.getElementById(map), {zoom: 4,center: {lat,lng}
});// 创建标记
const marker new Map.marker({position: {lat, lng},title: Hello Marker
});// 地图上添加标记
marker.setMap(map);而用React实现上述功能则如下 Map zoom{4} center{lat, lng}Marker position{lat, lng} title{Hello Marker}/
/Map声明式编程方式使得React组件很容易使用最终的代码简单易于维护 2、高效灵活 react可以与已知的框架或者库配合它通过对DOM的模拟可以最大限度上减少与DOM的交互 3、组件式开发(Component) 在上边也提到了在React中一切皆为组件。通常将应用程序的整个逻辑分解为小的单个部分。我们将每个单独的部分称为组件。 组件可以是一个函数或者是一个类接受数据输入处理它并返回在UI中呈现的React元素
①、函数式组件
const Header () {return(Jumbotron style{{backgroundColor:orange}}h1TODO App/h1/Jumbotron)
}②、类组件有状态组件
class Dashboard extends React.Component {constructor(props){super(props);this.state {}}render() {return (div classNamedashboard ToDoForm /ToDolist //div);}
}③、一个组件该有的特点
可组合各个组件易于和其他组件一起使用或者嵌套在另一个组件内部可重用每个组件都是具有独立功能的它可以被使用在多个UI场景可维护每个小的组件仅仅包含自身的逻辑更容易被理解和维护
4、单向式响应的数据流 react比传统的数据绑定更为简单因为它实现了单向响应的数据流很大程度上减少了代码的重复 四、虚拟DOM
1、传统DOM更新
真实页面对应一个DOM树在传统页面的开发模式中每次需要更新页面时都要手动操作DOM来进行更新
①、举例讲解 当我们在微信朋友圈进行下拉刷新时会有新发的内容。这时出现一个场景我们拉取的朋友圈数据至少有100条这时有个人在下拉刷新这一瞬间把刚发的朋友圈内容删除了那么作为一个开发人员应如何应对呢 假如我们之前从后端返回来的数据是100条而现在后端返回来的是99条数据。那么在这块页面中最简单的方法应该怎么做 按照之前的老办法是先清空再动态创建99条数据那么大家想想如果一直按照先清空再动态创建99条树的话那浏览器会不会崩溃为了解决浏览器崩溃的情况我们可以使用虚拟DOM
2、虚拟DOM
在前端开发中性能消耗最大的就是DOM操作而且这部分代码会让整体项目的代码变得难以维护。React中在基建层会统一把我们编写的代码先编译成JavaScript对象树存在内存里然后再进一步映射成真实DOM。每次数据更新后重新计算Virtual DOM并和上一次生成的Virtual DOM做对比Diff对发生变化的部分做批量更新减少低效操作
①、举例讲解 五、创建React项目并编写React第一个应用程序
1、创建React项目
①、在目标文件下cmd进行创建
npx create-react-app reactdemo //reactdemo为创建的项目名称可任意取名②、成功结果说明 ③、运行项目
npm start2、编写React第一个应用程序
react开发需要引入多个依赖文件react.js、react-dom.js分别又有开发版本和生产版本在创建React项目时已经安装完了。然后需要把工程目录下的src目录清空在里边重新创建一个index.js
//从react的包当中引入了React。只要你要写React.js组件就必须引入React因为react里有一种语法叫JSX
import React from react
//ReactDOM可以帮助我们把React组件渲染到页面上去
import ReactDOM from react-dom//ReactDOM里有一个render方法就是把组件渲染并且构造DOM树然后插入到页面上某个特定的元素上
ReactDOM.render(h1好好学习天天向上/h1,document.getElementById(root)
)六、React和Vue的区别 Vue和React都是流行的前端框架它们有以下不同点 总的来说Vue更加简单易学适合中小型项目或者追求快速开发的团队React更加灵活和高效适合大型项目或者有一定经验的前端开发者 七、如何在React和Vue中进行选择 在考虑使用Vue还是React时需要考虑以下几个方面 1、项目需求和复杂度
如何项目需求快速构建并且组件较为简单、数据流不太复杂那么可以选择Vue如果项目涉及到大规模复杂的组件开发以及高度可定制的数据流管理那么React可能更适合
2、团队经验和技能
如果团队中已有经验丰富的Vue或React开发人员那么可以优先选择他们熟悉的框架。否则可以评估团队技能并选择相应的框架
3、社区生态和支持
Vue和React在社区方面都拥有强大的支持和生态但React更受欢迎因此可以考虑选择React框架因为它在社区的支持和解决问题方面可能更强大
4、性能和体积
Vue框架的性能和体积相对较小因此对于需要快速加载页面和处理大量数据的项目来说Vue可能更好一些。而对于需要更灵活的代码组织结构以及更好的代码复用性的项目来说React可能更适合 总之选择Vue还是React需要全面考虑项目需求、团队技能、社区支持和性能体积等方面并根据具体情况权衡利弊选择最适合项目的框架 八、总结
以上就是我们对React的初步认识包括React的概念、基础知识、如何创建React项目、编写React应用程序以及一些基本的操作。接下来还会不断地更新有关React的学习内容。
