从Vue2.0到React17——React开发入门

找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue20开发项目已经四年了，故用Vue20开发项目的思路来学习React。

前端项目是由一个个页面组成的，对于Vue来说，一个页面是由多个组件构成的，页面本身也是一个路由组件。对于React来说也是如此。Vue会提供一系列技术支持来完成一个组件的开发，可以从这一系列技术支持出发，去React中寻找对应的技术支持来入门React，比如React中如何开发组件的UI，React中如何使用组件，React中如何定义组件数据等等。

本专栏将按照这个思路带领你从Vue20入门React17。

首先得选择一个脚手架搭建一个React工程，React有很多脚手架，为什么选择UmiJS这个脚手架，不为什么，这个脚手架和Vue Cli比较类似，至少路由配置和Vue Router很类似。

在学习前，先用UmiJS搭建一个React工程，步骤很简单：

可以看见myapp这个React工程的目录结构如下所示：

打开 umircts 文件，其内容如下所示

其路由是在 routes 选项中配置，配置和Vue Router非常相似，具体如何配置放在后面介绍路由跳转和传参中一并介绍。

接下来在 src/pages/indextsx 文件中书写demo来学习React。

Vue和React中所开发的都是组件，其页面也是一个路由组件。在Vue中组件是定义在后缀为 vue 的文件中，在React中组件是定义在后缀为 js 的文件中，若使用TypeScript来开发React，则其组件是定义在后缀为 tsx 的文件中。

那如何开发一个组件的UI部分，例如开发一个 HelloWorld 组件在浏览器页面上展示 hello world ，一个组件的UI包括HTML部分和CSS部分。

组件的HTML部分，Vue推荐使用template模板，React推荐使用JSX语法。

在工程的 src/pages 文件夹中创建一个 HelloWorldjs 文件，在其中开发HelloWorld组件。

此外React组件有两种定义方法，一种是函数形式，一种是ES6的class形式。

函数形式，称为函数组件：

ES6的class形式，称为类组件：

这里要注意函数名的首字母要大写 。在函数中的 return 后面用JSX语法来开发组件的UI部分。

另外还要注意在 return 后面的内容最外面要用 () 括起来，否则在 return 同一行后面最少跟一个 < 才可以，如下所示：

这样看起来是不是怪怪的，所以最好加个 () 。

关于组件的CSS部分，其最重要的是绑定 Class 和 Style，才能给组件的HTML添加样式。

先来看一下 Class 与 Style 是固定不变，React 中是怎么绑定的。

React中是用 className 来绑定 Class，用 style 来绑定 Style。其中 style 接受的值是一个对象，且用 {} 中括号传入，而且对象的属性名只能用驼峰式 (camelCase) 来命名。

在来看一下 Class 与 Style 是变量，在React中是怎么绑定的。

在React中是使用 {} 给属性赋值变量，且 className 只接受字符串，不接受数组或者对象，可以用ES6的模板字符串功能来拼接变量生成字符串。

在函数组件的写法中用 useState 这个React Hook定义了一些变量， useState 的作用放在后面介绍。

HelloWorld 组件写好了，要如何使用呢？先回顾一下在Vue中是如何使用组件的，在使用组件前要先注册，可以注册为全局组件或局部组件。

在React中是没有注册组件的概念，因为组件相当一个函数，只有引入组件的概念，也没有全局组件的概念。使用组件前必须用 import 先把组件引入并命名。

在React中组件的命名必须以大写字母开头，因为 React 会将以小写字母开头的组件视为原生 DOM 标签 。

从开发Vue组件的经验来说，一个组件的数据，可以分为内部数据和参数数据两种。对于React也是如此，在React中把内部数据称为state，把参数数据称为props。

在上面介绍React中如何绑定变量形式的 Class 和 Style 的过程已经定义了 styleData 、 isHead 、 className 这些内部数据。

个人推荐使用函数形式来开发React组件，可以使用React Hook，来避免去学习 ES6 中 的 class 语法，还有烦人的 this 指向问题，从而来降低入门难度。

关于的React Hook 可以看 这里 。

props用来接收外部传递给组件的数据。例如在 HelloWorld 组件中定义 title 一个参数数据。

在类组件中的构造函数 constructor 接受 props 作为传入组件的参数数据集合，并调用 super(props) 把 props 传给 ReactComponent 构造函数，这样类组件才能接受参数数据集合 props ，再用 thispropstitle 来读取 title 参数数据的值，另外可以用 defaultProps 来定义 title 参数数据的默认值。

函数组件接收一个 props 作为传入组件参数数据的集合，利用 ES6 解构赋值的功能，来获取组件的参数数据，并可以给参数数据设置默认值。

这里要注意了 ，在Vue的template模板中是用 {{}} （双大括号）来使用数据的，而在React中是统一用 {} （单大括号）来使用数据的。

参数数据Props是用接收外部传递给组件的数据，那React中如何向组件传递数据呢？

在Vue中规定了动态数据和字符串、数字、布尔值、数组、对象类型的静态数据如何传递给组件，我们一一对应去寻找React中如何传递。

可见在React中，除了传递字符串类型的静态数据，都要用 {} 包裹数据再赋值给组件标签上的属性来传递数据给组件。

React中用 onClick 来监听点击事件，用 {} 包裹点击事件触发时执行的函数，再赋值给 onClick 。

其中 onClick 是一个合成事件，在Vue中 @ 后面跟着是DOM的原生事件，而React中 on 后面跟着并不是DOM的原生事件。例如Vue中监听双击事件 @dblclick ，而React中监听双击事件 onDoubleClick 。

React中的合成事件具体可以看 这里 。

在Vue中用 native 修饰符来监听组件上的DOM事件，而在React中监听组件上的DOM事件要这样实现。

例如在组件上监听click事件，先要把click事件触发时要执行的函数当作Props给组件传递进去，在组件的根元素上监听click事件，click事件触发时执行该Props，这样来间接监听组件上的click事件。具体实现如下所示：

上面介绍了，React组件的数据分为内部数据state和参数数据props，对应的改变方法也不一样。

比如要改变组件中定义的内部数据 title 。

在 thissetState() 中可以传递一个函数或一个对象，建议传递一个函数 (state,props) =>{} ，函数可以接受内部数据state和参数数据props作为参数，而且 state 和 props 只读无法修改，每次调用 thissetState 时读取到的state和Props都是最新，特别适用多次调用 thissetState 修改同一个state的场景。最后函数放回一个对象，对象的内容为要修改的state。

在React中称内部数据为state，使用 useState(param) 定义一个state时，可以通过参数 param 设置state的默认值，其返回一个数组，数组的第一个值是state，数组的第二个值是改变state的函数，可以调用该函数来改变state。

另外用 useState 定义的数据是响应式的，若页面有使用该数据，该数据改变后页面会重新渲染。

跟Vue一样，在组件中是不能直接改变props，假如要改变props，只能通过在父组件中改变传递给子组件的数据来间接改变props，那在子组件中怎么让父组件改变传递给子组件的数据呢，将在React中父子组件如何通讯介绍。

用一个例子来介绍，假如 HelloWorld 组件的 “hello world” 是用参数数据props中的 title 展示，点击组件中的改变标题按钮时变成 “hello React” 。

在父组件中定义一个 info 数据传递给子组件的 title 参数数据，同时也定义了一个回调函数 handleChangeTitle 来改变 info 数据，并把回调函数也传递给子组件的 changeTitle 参数数据。

这样子组件的 changeTitle 参数数据可以作为一个函数来调用，调用 changeTitle 时相当调用 handleChangeTitle 回调函数，可以把要改变的值通过 data 函数参数传递出来，再执行 setInfo(data) 改变 info 数据，再传递给子组件的 title 参数数据，间接改变了 title 参数数据，实现了React中组件如何改变参数数据。

在父组件中也可以调用 setInfo 改变传递给子组件的 title 参数数据的 info 数据，以上就是React中父子组件通讯的一个方法。

在Vue中可以用简单地用 watch 来监听数据的变化，而在React中比较复杂，子组件的类型不同实现方法也不同。

在类组件中用 componentDidUpdate 这个生命周期方法来实现，该方法首次渲染时 componentDidUpdate 不会执行，在后续props和state改变时会触发 componentDidUpdate ，其接受的第一个参数 prevProps 代表改变前的props，第二参数 prevState 代表改变前的state。

在函数组件中，可以 useEffect 这个React Hook监听数据的变化，但是无法像Vue的 watch 能够获取改变前的旧数据。所以要自定义一个Hook来实现类似Vue的 watch 的功能。自定义Hook是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。故把这个自定义Hook称为 useWatch 。

如何获取改变前的旧数据，可以在第一次数据改变时触发 useWatch 时用一个容器把旧数据存储起来，下次再触发 useWatch 时通过读取容器中的值就可以获取改变前的旧数据。容器可以用 useRef 这个 Hook 来创建。

但是 useEffect 会在组件初次渲染后就会调用一次，导致 callback 回调函数会被执行一次，另外在Vue的 watch 是用 immediate 配置来控制在组件初次渲染后马上执行 callback 回调函数，且默认不会在组件初次渲染后执行 callback 回调函数，接着在 hookjs 中定义一个 useWatch 。

首先实现一下组件初次渲染不执行 callback 回调函数。

再添加 immediate 配置来控制在组件初次渲染后是否马上执行 callback 回调函数。

另外Vue的 watch 还返回一个 unwatch 函数，调用 unwatch 函数可以停止监听该数据。

useWatch 这个Hook 定义好后，这么使用。

在Vue中是使用 ref 给子组件赋予一个标识 ID ，再使用 this$refs[ID] 访问到这个子组件的实例对象，然后通过实例对象去调用子组件的方法。而在React中比较复杂，子组件的类型不同实现方法也不同。

useRef() 无法使用在函数组件上使用，在函数组件中要先使用 useImperativeHandle 定义要暴露给父组件的实例值，另外要把函数组件传入 forwardRef 处理后再导出。

其实React中是没有插槽的概念，不过可以用 propschildren 来实现插槽的功能。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，也可以用插槽的形式来实现，通过 propschildren 把 “ hello World ” 从父组件传递进去。

类组件的写法：

函数组件的写法：

可以通过props给子组件传递一个函数，如果这个函数最后返回React元素，其React元素是用JSX语法编写的，这样就间接实现具名插槽的功能。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，用具名插槽的形式来实现。

类组件的写法：

函数组件的写法：

Vue的作用域插槽的作用是用子组件中的数据在父组件中写插槽内容。

回顾上面具名插槽的实现过程，先在父组件中定义一个函数，该函数能返回一个React元素，再通过props把该函数传递给子组件，在子组件中执行该函数，把执行结果添加到子组件的React元素中。

如果在子组件中执行该函数时，把子组件的数据当作参数传递进去，那么在父组件中就可以用该函数接收子组件的数据来写React元素（插槽的内容）。这样就实现了作用域插槽。

例如开发一个 HelloWorld 组件用来展示 “ 用子组件的数据写具名插槽 hello World ” ，用作用域插槽的形式来实现。

类组件的写法：

函数组件的写法

以上从Vue开发一个组件会用到的技术，在React中寻找对应的实现方案的角度来入门React，读完你应该会用React开发一些简单的页面，并能把页面分割成一个个组件，并在组件之间进行数据交互。下一篇文章将介绍开发组件时 在Vue中那些常用的指令在React中是如何实现的 。

拿到数据接口 /brand-business-setting/code

||

api文件夹,给接口定义一个方法

||

讲接口引入到要渲染的页面

||

进入页面之后定义一个加载数据的方法

｜｜

接收数据－－－保存数据

Vuex是vue官方的一款状态管理工具，什么是状态呢？我们在前端开发中有一个概念：数据驱动，页面中任意的显示不同，都应该有一条数据来控制，而这条数据又叫做state，状态。

在vue中。组件间进行数据传递、通信很频繁，而父子组件和非父子组件的通信功能也比较完善，但是，唯一困难的就是多组件间的数据共享，这个问题由vuex来处理

vue提供的一个全局的状态管理工具，主要处理项目中多组件间状态共享

因为在组件中可以通过this storestate来使用state中管理的数据

但是我们发现，这样使用的话，当state的数据更改的时候，vue组件并不会重新渲染

也就是说，如果想要在组件中响应式的使用的时候，我们需要通过计算属性（computed）来使用

这样的写法很无趣，而且如果使用的状态较多会产生冗余的感觉，所以vuex提供了mapState辅助函数，帮助我们在组件中获取并使用vuex的store中保存的状态

所以我们可以这样写：

但是如果组件中已经有了num这个数据了，而state中的数据名字也叫num就会照成冲突，这个时候我们可以在组件使用state的时候，给状态起个别名：

但是，有的时候我们在组件中还有自己的业务逻辑需要用到计算属性：

有的时候，我们需要根据state中的某一个状态派生出一个新的状态，例如，我们state中有一个num，在某些组件中需要用到是num的二倍的一个状态，我们就可以通过getters来创建

创建了之后，在组件中通过this$storegettersdoubleNum来获取里面的数据

当然vuex也提供了mapGetters辅助函数来帮助我们在组件中使用getters里的状态，且，使用的方法和mapState一模一样

我们不能直接在组件中更改state：this$storestatenum=2,而是需要使用mutations来更改，mutations也是一个纯对象，里面包含很多更改state 的方法，这些方法的形参接收到state，在函数体里更改，这时，组件用到的数据也会更改，实现响应式。

但是我们也不能直接调用mutations 的方法，需要使用this$storecommit来调用，第一个参数为调用的方法名，第二げ参数为传递参数

vuex提供了mapMutations方法来帮助我们在组件中调用mutations 的方法,使用方法和mapState、mapGetters一样

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步 *** 作。

也就是说，如果有这样的需求：在一个异步处理之后，更改状态，我们在组件中应该先调用actions，来进行异步动作，然后由actions调用mutation来更改数据

如上，actions的方法中可以进行异步的动作，且形参会接收store，从中取出commit方法用以调用mutations的方法

在组件中通过this$storedispatch方法调用actions的方法

当然也可以使用mapMutations来辅助使用

组件使用数据且通过异步动作更改数据的一系列事情：

1生成store,设置state

2在根实例中注入store

3组件通过计算属性或者mapState来使用状态

4用户产生 *** 作，调用actions的方法，然后进行异步动作

5异步动作之后，通过commit调用mutations的方法

6mutations方法被调用后，更改state

7state中的数据更新之后，计算属性重新执行来更改在页面中使用的状态

8组件状态被更改创建新的虚拟dom

9组件的模板更新之后重新渲染在dom中

vuex的使用：

目前市场上有两种使用vuex的情况，

第一种：将需要共享、需要管理的状态放入vuex中管理，也就是说在必要时使用

第二种：将所有的数据都交由vuex管理，由vuex来承担更多的责任，组件变得更轻量级，视图层更轻

在实现回到顶部功能的时候，我们写了一个backTop组件，接下来需要通过监听windowscroll事件来控制这个组件显示隐藏

写了一个v-back-top指令，就是将回到顶部功能做成一个指令，哪个组件或者dom需要使用到回到顶部，就加上这个指令就可以，设置不同的参数来控制在不同的情况下触发

组件库就是通用组件的集合

pc：element-ui iview

mobile： mint-ui

当我们在使用一些插件的时候，经常需要在dom更新完成后进行必要 *** 作，但是在vue中提供的api只有updated钩子函数，而在这个函数里，任意数据的变化导致的dom更新完成都会触发，所以很可能会造成无关数据的影响，而使用监听的话只能监听到数据的变化，此时dom还没有更新，我们只能强行使用setTimeout来处理

这里推荐大家使用nextTick全局方法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

v-for='n in 10' n会打印1-10

通用：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed

路由守卫：beforeRouteEnter/beforeRouteUpdate (22 新增)/beforeRouteLeave

v-if是真正的条件渲染，会确保在切换中条件块内的事件监听、子组件都会适当的被销毁和重建

v-show总是将节点渲染在dom中，只是基于css：display来控制节点的显示和隐藏

v-if有更高的切换开始，v-show有更高的初始渲染开销

v-if是惰性的，初始条件为假，就不会渲染

axios请求的时候不会带上cookie，不会影响带宽，可以通过withCredentials：true来设置

对axios 的请求头进行设置：

axiosdefaultsheaders = {'Content-Type':''}

vue20不在更新维护vue-resource，官方推荐使用axios

6为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。Vuejs 实现了一个内容分发 API，参照了当前 Web Components 规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。

全局：Vuecomponent(name,Vueextend({}))

局部：{ components:{name:Vueextend({})} }

假设我们有一个数据为num，还希望拥有一个数据为doublenum，而且希望doublenum的值永远都是num的二倍

方法：

prop是单向绑定的，父组件属性变化，传递给子组件，但是，子组件数据变化，不能直接传递给父组件，也就是数据的流行是从父组件流向子组件的，为了防止子组件修改父组件的数据（会让应用的数据流变的更难开发、更新、维护）

使用了vuex工具的时候，store中数据在组件中使用的过程也是单向数据流，state->vue component->actions->mutations->state->vue component

当数据改变之后，vue会创建新的虚拟dom来和原来的虚拟dom做对比，在创建新的虚拟的dom的时候，会根据key来查找在原来的虚拟dom中有没有某个部分，如果原来的有，这次的也需要，就会实现复用，而且在做diff对比的时候，如果有key会加快对比的查找速度，提高性能

尽量循环的时候不要将key设置为数组的索引，因为当删除某一个元素的时候，就会导致删除位置下面的所有元素的key值都与上一次虚拟dom的key值不同，导致复用失败，这个时候我们最好使用关键的唯一的，例如id这样的数据作为key

如果数据变化只是值的变化而不是条数和位置的变化，可以使用索引作为key

Vueuse会查找插件对象里的install方法去执行,并且给install方法里传入Vue对象

很多情况下，一个应用会有PC和移动端两个版本，而这两个版本因为差别大，内容多，所以不能用响应式开发但是单独开发，而域名只有一个，用户进入域后直接返回对应设备的应用，做法主要有两种：

用thissetdata({

shuju1

:

shuju2

})

shuju1：你自己命名的名字，

shuju2：调用接口后返回的数据，

然后你页面就可以用{{shuju1}}，这样来获取了。

1、安装相关依赖

主要是两个依赖

npm

install

--save

xlsx

file-saver

如果想详细看着两个插件使用，请移步github。

>

如果我们的业务逻辑需要请求多个数据，并且后一个请求依赖于前一个请求的结果，这时候我们更不能保证数据获取顺序，因此我们需要将异步请求改成同步，以保证业务逻辑的正确性。

async 与 await

异步的，其放在我们所定义的 function 名前，如：

显然 异步执行的方法，能够通过这个关键字，等待请求结果，实现将异步执行的方法变成同步的。

好了，问题解决，只要在请求时加上await就可以了！

结果输出：

是的，结果确实是正确的，但还有一个规则还没有讲，那就是 async 与 await 必须同时出现 所以我们的代码实际是这样的：

以上就是关于从Vue2.0到React17——React开发入门全部的内容，包括:从Vue2.0到React17——React开发入门、获取数据--保存数据[vue]、vue第八节等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！