React 介绍

最新推荐文章于 2024-09-13 15:06:03 发布

王睿丶

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量616

点赞数

分类专栏：资讯看点文章标签： React JavaScript库 React Native 跨平台

本文链接：https://blog.csdn.net/qq_27494201/article/details/111937556

版权

资讯看点专栏收录该内容

30 篇文章 0 订阅

订阅专栏

文章目录

一丶React 背景介绍

在Web应用开发的早期，构建Web应用的唯一方案就是向服务器发送请求，然后服务端响应请求并返回一个完整的页面。从开发角度上讲这种方式非常简单，但是这种开发方式会造成很不好的用户体验，用户的很多行为都需要向服务器进行请求，等待服务端的响应。因此，开发者开始开发各种类库，使用JavaScript在浏览器端渲染应用。
React起源于Facebook公司，起初用于lnstagram网站开发。React是一个用于构建用户界面的JavaScript库，不是一个MVC框架，提出了一种新的开发模式和理念，它强调的是“用户界面”。

二丶React 特点

1、作为UI

React 可以作为MVC中的view层进行使用，并且在已有项目中很容易使用React开发新功能。

2、虚拟DOM

虚拟DOM是React最重要的特性，实现了优化视图的渲染和刷新。以前没有ajax技术的时候。web页面从服务端整体渲染出html输出到浏览器进行渲染，同样的，用户的一个改变页面的操作也会刷新整个页面来完成。直到有了ajax出现，实现页面局部刷新，带来的高效和分离让web开发者们惊叹不已。但随之而来的问题是，复杂的用户交互及展现需要通过大量的DOM操作来完成，这让页面的性能以及开发的效率又出现了新的瓶颈。如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标。
时至今日，读到前端性能优化，减少DOM元素、减少rellow和repaint、编码过程中尽量减少DOM的查询等手段是大家耳熟能详的。而页面任何UI的变化都是通过整体刷新来完成的。而React之所以快，是因为它不直接操作DOM，而是引进虚拟DOM的实现来解决这个问题。
基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建一个完整的虚拟DOM树，虚拟DOM树是内存数据，React通过自己实现的DOM Diff算法将当前虚拟DOM树和上一次的DOM树进行对比，得到两个DOM结构的差异，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。达到最小化重绘，避免不必要的DOM操作，解决了这两个公认的前端性能瓶颈，实现高效的DOM渲染。

3、组件化

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以下组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过两个页面来看组件化开发思路。
对于React而言，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。React组件应该具有如下特征：可组合、可重用、可维护。

在这里插入图片描述
4、数据流
React实现了单向的数据流，相对于传统的数据绑定，React更加灵活，便捷。

三丶React 学习准备

前端基础知识：html、css、JavaScript
JSX语法知识
ES6相关知识

四丶React和ReactNative的关系

React用于Web应用开发。ReactNative采用React方式进行移动应用开发。
ReactNative采用React语法，用于进行JavaScript跨终端应用开发。既拥有原生Native的交互体验，又能够保留React自由的开发效率。使用灵活的HTML和CSS布局，使用React语法构建组件，然后同时运行在IOS和Android平台上。“Leam once, write anywhere”。

五丶构建一个最简单的应用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
    <div id="example">
    </div>

    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello React</h1>,
        document.getElementById('example')
      );
    </script>
</body>
</html>