SDU项目实训——react框架学习

react简介

react历史

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

框架用途

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

框架特点

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。
2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。

框架设计思想

1.原生JS

React相比于vue来说更接近原生JS，因为在react内部，jsx模板经babel转化后是一个对象，所有的操作都是基于这个对象和其对应的fiber结构来操作的，而vue.js通过编译将templete模板转换成渲染函数(render),执行渲染函数就可以得到一个虚拟节点树。

2.实现和更新原理

React将每个节点转化为fiber对象,最终形成一个fiber树结构，来依次渲染。通过两个fiber的对比来实现更新。这里要说到几个diff算法，分别是tree diff,component diff和element diff。同时更新过程可能会被打断，让优先级更高的任务优先执行(例如浏览器渲染)

3.单项数据绑定

父传子用props，有子传父的方法，不支持双向绑定，需要手动配置。

4.模板的格式和转换

用jsx指定模板，jsx类似JavaScript的扩展，在函数组件返回jsx,或者class组件的render方法内返回jsx，jsx将转换成对象。

5.关注运行时

React 更像是一种编程运行时。

React 程序通常会输出一个会随时间变化的树。 它有可能是 DOM 树 、iOS 视图层、PDF 原语 ，或者是 JSON 对象 。不过通常我们希望用它来展示 UI 。我们称它为“宿主树”，因为它往往是 React 之外宿主环境中的一部分 —— 就像 DOM 或 iOS 。宿主树通常有它自己的命令式 API 。而 React 就是它上面的那一层。

react和vue的区别

一、监听数据变化的实现原理不同

Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化；React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。

二、数据流的不同

React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。

三、HoC和mixins

Vue组合不同功能的方式是通过mixin，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个HoC，那么这个被包装的组件就无法正常工作了。

React组合不同功能的方式是通过HoC(高阶组件）。React最早也是使用mixins的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了mixinx转而使用HoC。高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

四、组件通信的区别

Vue中有三种方式可以实现组件通信：父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据；子组件通过事件向父组件发送消息；通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级。

React中也有对应的三种方式：父组件通过props可以向子组件传递数据或者回调；可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾向于使用事件。在React中我们都是使用回调函数的，这可能是他们二者最大的区别。

五、模板渲染方式的不同

在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这只是表面现象，毕竟React并不必须依赖JSX。

在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。

举个例子，说明React的好处：react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

六、渲染过程不同

Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。

如果应用中交互复杂，需要处理大量的UI变化，那么使用Virtual DOM是一个好主意。如果更新元素并不频繁，那么Virtual DOM并不一定适用，性能很可能还不如直接操控DOM。

七、框架本质不同

Vue本质是MVVM框架，由MVC发展而来；

React是前端组件化框架，由后端组件化发展而来。

二者对比图如下：
vue和react的选择：
在以下的情况下Vue比React好：

• 最新文档和更简单的语法， 更小，更快，更灵活， 需要丰富的HTML模板，易于开发。

在以下的情况下React比Vue好：

• 需要构建移动应用程序， 需要构建大型应用程序，轻量级，易于版本迁移。

总之如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js，如果是大规模应用程序和移动应用程序的应该选择React。

框架使用

react的项目安装及其启动

npm i -g create-react-app 

yarn global add create-react-app

cnpm i -g create-react-app

创建项目的命令

create-react-app <项目名称>
npx create-react-app <项目名称>

安装项目以后使用npm start进行启动项目