从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中是如何实现的 。

比如如下代码：

父组件：

class Father extends Component {

construtor(props){

super(props);

thisstate={

name: 'Peter',

age: '26'

}

}

onChangeState(stateName){

thissetState(stateName)

}

render(){

<p>姓名：{thisstatename}</p>

<p>年龄：{thisstateage}</p>

<Child onClicked={thisonChangeStatebind(this)}/>

}

}

子组件：

class Child extends Component {

render(){

<Button onClicked={()=>thispropsonClicked({name: 'John'})}/>

}

}

以上就是关于从Vue2.0到React17——React开发入门全部的内容，包括:从Vue2.0到React17——React开发入门、react.js 父组件ajax获取数据，通过props传递到子组件，子组件应该怎么获取值、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！