从Vue2.0到React17——React开发入门
前言
找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue2.0开发项目已经四年了，故用Vue2.0开发项目的思路来学习React。
前端项目是由一个个页面组成的，对于Vue来说，一个页面是由多个组件构成的，页面本身也是一个路由组件。对于React来说也是如此。Vue会提供一系列技术支持来完成一个组件的开发，可以从这一系列技术支持出发，去React中寻找对应的技术支持来入门React，比如React中如何开发组件的UI，React中如何使用组件，React中如何定义组件数据等等。
本专栏将按照这个思路带领你从Vue2.0入门React17。
1、脚手架
首先得选择一个脚手架搭建一个React工程，React有很多脚手架，为什么选择UmiJS这个脚手架，不为什么，这个脚手架和Vue Cli比较类似，至少路由配置和Vue Router很类似。
在学习前，先用UmiJS搭建一个React工程，步骤很简单：
- 先找个地方建个空目录，打开命令行工具，执行命令
mkdir myapp && cd myapp； - 执行命令
npm create @umijs/umi-app创建一个React工程； - 执行命令
npm install安装依赖； - 依赖安装成功后，执行命令
npm run start启动项目，在浏览器上打开 http://localhost:8000 访问项目。
可以看见myapp这个React工程的目录结构如下所示：
.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
├── .umi
├── layouts/index.tsx
├── pages
├── index.less
└── index.tsx
└── app.ts
复制代码
打开 .umirc.ts 文件，其内容如下所示
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
fastRefresh: {},
});
复制代码
其路由是在routes选项中配置，配置和Vue Router非常相似，具体如何配置放在后面介绍路由跳转和传参中一并介绍。
接下来在src/pages/index.tsx文件中书写demo来学习React。
2、React中如何开发组件的UI
Vue和React中所开发的都是组件，其页面也是一个路由组件。在Vue中组件是定义在后缀为.vue的文件中，在React中组件是定义在后缀为.js的文件中，若使用TypeScript来开发React，则其组件是定义在后缀为.tsx的文件中。
那如何开发一个组件的UI部分，例如开发一个 HelloWorld 组件在浏览器页面上展示hello world，一个组件的UI包括HTML部分和CSS部分。
2.1 HTML部分
组件的HTML部分，Vue推荐使用template模板，React推荐使用JSX语法。
在工程的src/pages文件夹中创建一个HelloWorld.js文件，在其中开发HelloWorld组件。
此外React组件有两种定义方法，一种是函数形式，一种是ES6的class形式。
函数形式，称为函数组件：
export default function HelloWorld() {
return (
hello world
);
}
复制代码
ES6的class形式，称为类组件：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
hello world
);
}
}
复制代码
这里要注意函数名的首字母要大写。在函数中的return后面用JSX语法来开发组件的UI部分。
另外还要注意在return后面的内容最外面要用()括起来，否则在return同一行后面最少跟一个<才可以，如下所示：
export default function HelloWorld() {
return <
div>hello world这样看起来是不是怪怪的，所以最好加个()。
2.2 绑定 Class 和 Style
关于组件的CSS部分，其最重要的是绑定 Class 和 Style，才能给组件的HTML添加样式。
先来看一下 Class 与 Style 是固定不变，React 中是怎么绑定的。
export default function HelloWorld() {
return (
hello world
);
}
复制代码
React中是用className来绑定 Class，用style来绑定 Style。其中style接受的值是一个对象，且用{}中括号传入，而且对象的属性名只能用驼峰式 (camelCase) 来命名。
在来看一下 Class 与 Style 是变量，在React中是怎么绑定的。
- 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
styleData: { color: 'red', 'fontSize': "16px" },
isHead: true,
className: 'title'
};
}
render() {
return (
hello world
);
}
}
复制代码
- 函数组件的写法：
import { useState } from 'react';
export default function HelloWorld() {
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
return (
hello world
);
}
复制代码
在React中是使用{}给属性赋值变量，且className只接受字符串，不接受数组或者对象，可以用ES6的模板字符串功能来拼接变量生成字符串。
在函数组件的写法中用useState这个React Hook定义了一些变量，useState的作用放在后面介绍。
3、React中如何使用组件
HelloWorld 组件写好了，要如何使用呢？先回顾一下在Vue中是如何使用组件的，在使用组件前要先注册，可以注册为全局组件或局部组件。
在React中是没有注册组件的概念，因为组件相当一个函数，只有引入组件的概念，也没有全局组件的概念。使用组件前必须用import先把组件引入并命名。
import HelloWorld from './HelloWorld.js'
export default function Index(){
return (
在React中组件的命名必须以大写字母开头，因为 React 会将以小写字母开头的组件视为原生 DOM 标签。
4、React中如何定义组件数据
从开发Vue组件的经验来说，一个组件的数据，可以分为内部数据和参数数据两种。对于React也是如此，在React中把内部数据称为state，把参数数据称为props。
4.1 定义内部数据state
在上面介绍React中如何绑定变量形式的 Class 和 Style 的过程已经定义了styleData、isHead、className这些内部数据。
- 在类组件中是在
this.state这个对象中定义数据：
this.state = {
styleData: { color: 'red', 'fontSize': "16px" },
isHead: true,
className: 'title'
};
复制代码
- 在函数组件的写法中使用
useState这个React Hook定义了数据：
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
复制代码
个人推荐使用函数形式来开发React组件，可以使用React Hook，来避免去学习 ES6 中 的 class 语法，还有烦人的this指向问题，从而来降低入门难度。
关于的React Hook 可以看这里 。
4.2 定义参数数据props
props用来接收外部传递给组件的数据。例如在 HelloWorld 组件中定义title一个参数数据。
- 类组件的写法：
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
{this.props.title}
);
}
}
HelloWorld.defaultProps = {
title: 'hello world'
};
export default HelloWorld;
复制代码
在类组件中的构造函数constructor接受props作为传入组件的参数数据集合，并调用super(props)把props传给React.Component构造函数，这样类组件才能接受参数数据集合props，再用this.props.title来读取title参数数据的值，另外可以用defaultProps来定义title参数数据的默认值。
- 函数组件的写法：
import { useState } from 'react';
export default function HelloWorld(props) {
const {title = 'hello world'} = props;
return (
{title}
);
}
复制代码
函数组件接收一个props作为传入组件参数数据的集合，利用 ES6 解构赋值的功能，来获取组件的参数数据，并可以给参数数据设置默认值。
这里要注意了，在Vue的template模板中是用{{}}（双大括号）来使用数据的，而在React中是统一用{}（单大括号）来使用数据的。
参数数据Props是用接收外部传递给组件的数据，那React中如何向组件传递数据呢？
5、React中如何向组件传递数据
在Vue中规定了动态数据和字符串、数字、布尔值、数组、对象类型的静态数据如何传递给组件，我们一一对应去寻找React中如何传递。
- 传递动态数据
import { useState } from 'react';
import HelloWorld from './HelloWorld.js';
export default function Index(){
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
return (
- 传递字符串类型的静态数据
- 传递数字类型的静态数据
- 传递布尔值类型的静态数据
- 传递数组类型的静态数据
- 传递对象类型的静态数据
可见在React中，除了传递字符串类型的静态数据，都要用{}包裹数据再赋值给组件标签上的属性来传递数据给组件。
6、React中如何监听DOM事件
6.1 监听DOM元素的DOM事件
- 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('点击事件');
}
render() {
return (
hello world
);
}
}
复制代码
- 函数组件的写法：
export default function HelloWorld() {
const handleClick = ()=>{
console.log('点击事件');
}
return (
hello world
);
}
复制代码
React中用onClick来监听点击事件，用{}包裹点击事件触发时执行的函数，再赋值给onClick。
其中onClick是一个合成事件，在Vue中@后面跟着是DOM的原生事件，而React中on后面跟着并不是DOM的原生事件。例如Vue中监听双击事件 @dblclick，而React中监听双击事件 onDoubleClick。
React中的合成事件具体可以看这里。
6.2 监听React组件的DOM事件
在Vue中用.native修饰符来监听组件上的DOM事件，而在React中监听组件上的DOM事件要这样实现。
例如在组件上监听click事件，先要把click事件触发时要执行的函数当作Props给组件传递进去，在组件的根元素上监听click事件，click事件触发时执行该Props，这样来间接监听组件上的click事件。具体实现如下所示：
- 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props:any) {
super(props);
console.log(this.props)
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.onClick();
}
render() {
return (
hello world
);
}
}
复制代码
import React from 'react';
import HelloWorld from './HelloWorld';
export default class Grandfather extends React.Component {
handleClick() {
console.log('点击事件');
}
render() {
return (
{ this.handleClick() }}>
)
}
}
复制代码
- 函数组件的写法：
export default function HelloWorld(props) {
const { onClick } = props
const handleClick = () => {
onClick();
}
return (
hello world
);
}
复制代码
import HelloWorld from './HelloWorld';
export default function Index(){
const handleClick = ()=>{
console.log('点击事件');
}
return (
{ handleClick() }}>
)
}
复制代码
7、React中组件如何改变数据
上面介绍了，React组件的数据分为内部数据state和参数数据props，对应的改变方法也不一样。
7.1 改变内部数据state
比如要改变组件中定义的内部数据title。
- 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'hello world',
className: 'title'
};
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
title: 'hello react',
className: 'title active'
}));
}
render() {
return (
{title}
);
}
}
复制代码
在this.setState()中可以传递一个函数或一个对象，建议传递一个函数(state,props) =>{}，函数可以接受内部数据state和参数数据props作为参数，而且state和props只读无法修改，每次调用this.setState时读取到的state和Props都是最新，特别适用多次调用this.setState修改同一个state的场景。最后函数放回一个对象，对象的内容为要修改的state。
- 函数组件的写法：
import { useState } from 'react';
export default function HelloWorld() {
const [title,setTitle] = useState('hello world');
const [className,setClassName] = useState('title');
const handleClick = () =>{
setTitle('hello react');
setClassName('title active')
}
return (
{title}
);
}
复制代码
在React中称内部数据为state，使用useState(param)定义一个state时，可以通过参数param设置state的默认值，其返回一个数组，数组的第一个值是state，数组的第二个值是改变state的函数，可以调用该函数来改变state。
另外用useState定义的数据是响应式的，若页面有使用该数据，该数据改变后页面会重新渲染。
7.2 改变参数数据props
跟Vue一样，在组件中是不能直接改变props，假如要改变props，只能通过在父组件中改变传递给子组件的数据来间接改变props，那在子组件中怎么让父组件改变传递给子组件的数据呢，将在React中父子组件如何通讯介绍。
8、React中父子组件如何通讯
用一个例子来介绍，假如 HelloWorld 组件的 “hello world” 是用参数数据props中的title展示，点击组件中的改变标题按钮时变成 “hello React” 。
- 类组件的写法：
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.handleChangeTitle=this.handleChangeTitle.bind(this);
}
handleChangeTitle(){
this.props.changeTitle('hello React');
}
render() {
return (
{this.props.title}
);
}
}
HelloWorld.defaultProps = {
title: 'hello world'
};
export default HelloWorld;
复制代码
import HelloWorld from './HelloWorld.js'
import React from 'react'
class Index extends React.Component {
constructor(props) {
super(props);
this.state={
info:'hello world'
};
this.handleChangeTitle=this.handleChangeTitle.bind(this);
}
handleChangeTitle(data){
this.setState(state =>{
return {
info:data
}
})
}
render() {
return (
);
}
}
export default Index;
复制代码
- 函数组件的写法：
export default function HelloWorld(props: any) {
const { title = 'hello world', changeTitle } = props;
const handleChangeTitle = () => {
changeTitle('hello React')
}
return (
{title}
);
}
复制代码
import { useState } from 'react'
import HelloWorld from './HelloWorld.js'
export default function Index(){
const [info,setInfo] = useState('hello world');
const handleChangeTitle = (data)=>{
setInfo(data);
}
return (
)
}
复制代码
在父组件中定义一个info数据传递给子组件的title参数数据，同时也定义了一个回调函数handleChangeTitle来改变info数据，并把回调函数也传递给子组件的changeTitle参数数据。
这样子组件的changeTitle参数数据可以作为一个函数来调用，调用changeTitle时相当调用handleChangeTitle回调函数，可以把要改变的值通过data函数参数传递出来，再执行setInfo(data)改变info数据，再传递给子组件的title参数数据，间接改变了title参数数据，实现了React中组件如何改变参数数据。
在父组件中也可以调用setInfo改变传递给子组件的title参数数据的info数据，以上就是React中父子组件通讯的一个方法。
9、React中如何监听组件数据的变化
在Vue中可以用简单地用watch来监听数据的变化，而在React中比较复杂，子组件的类型不同实现方法也不同。
- 类组件的写法：
在类组件中用componentDidUpdate这个生命周期方法来实现，该方法首次渲染时componentDidUpdate不会执行，在后续props和state改变时会触发componentDidUpdate，其接受的第一个参数prevProps代表改变前的props，第二参数prevState代表改变前的state。
componentDidUpdate(prevProps, prevState){
if(prevProps.title !== this.props.title){
console.log('props中的title数据改变了');
}
if(prevState.info !== this.state.info){
console.log('state中的info数据改变了');
}
}
复制代码
- 函数组件的写法
在函数组件中，可以useEffect这个React Hook监听数据的变化，但是无法像Vue的watch能够获取改变前的旧数据。所以要自定义一个Hook来实现类似Vue的watch的功能。自定义Hook是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。故把这个自定义Hook称为useWatch。
如何获取改变前的旧数据，可以在第一次数据改变时触发useWatch时用一个容器把旧数据存储起来，下次再触发useWatch时通过读取容器中的值就可以获取改变前的旧数据。容器可以用useRef这个 Hook 来创建。
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
const oldValue = useRef();
useEffect(() =>{
callback(value,oldValue.current);
oldValue.current=value;
},[value])
}
复制代码
但是useEffect会在组件初次渲染后就会调用一次，导致callback回调函数会被执行一次，另外在Vue的watch是用immediate配置来控制在组件初次渲染后马上执行callback回调函数，且默认不会在组件初次渲染后执行callback回调函数，接着在hook.js中定义一个useWatch。
首先实现一下组件初次渲染不执行callback回调函数。
import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
const oldValue = useRef();
const isInit = useRef(false);
useEffect(() =>{
if(!isInit.current){
isInit.current = true;
}else{
callback(value,oldValue.current);
}
oldValue.current=value;
},[value])
}
复制代码
再添加immediate配置来控制在组件初次渲染后是否马上执行callback回调函数。
import {useEffect,useRef} from 'react';
export function useWatch(value,callback,config={immediate: false}){
const oldValue = useRef();
const isInit = useRef(false);
useEffect(() =>{
if(!isInit.current){
isInit.current = true;
if(config.immediate){
callback(value,oldValue.current);
}
}else{
callback(value,oldValue.current);
}
oldValue.current=value;
},[value])
}
复制代码
另外Vue的watch还返回一个unwatch函数，调用unwatch函数可以停止监听该数据。
import { useEffect, useRef } from 'react';
export function useWatch(value, callback, config = { immediate: false }) {
const oldValue = useRef();
const isInit = useRef(false);
const isWatch = useRef(true);
useEffect(() => {
if (isWatch.current) {
if (!isInit.current) {
isInit.current = true;
if (config.immediate) {
callback(value, oldValue.current);
}
} else {
callback(value, oldValue.current);
}
oldValue.current = value;
}
}, [value])
const unwatch = () => {
isWatch.current = false;
};
return unwatch;
}
复制代码
useWatch 这个Hook 定义好后，这么使用。
export {useState} from 'react';
export {useWatch} from './hook.js';
export default function HelloWorld() {
const [title,setTitle] = useState('hello world')
useWatch(title, (value, oldValue) => {
console.log(value);
console.log(oldValue)
})
const handleChangeTitle = () => {
setTitle('hello React')
}
return (
{title}
);
}
复制代码
10、React中父组件如何调用子组件的方法
在Vue中是使用ref给子组件赋予一个标识 ID ，再使用this.$refs[ID]访问到这个子组件的实例对象，然后通过实例对象去调用子组件的方法。而在React中比较复杂，子组件的类型不同实现方法也不同。
- 类子组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
title:'hello World'
};
}
handleChangeTitle(){
this.setState({
title:'hello React'
});
}
render() {
return (
{this.state.title}
);
}
}
复制代码
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component {
constructor(props) {
super(props)
this.myCom = React.createRef();
this.changeTitle = this.changeTitle.bind(this);
}
changeTitle() {
this.myCom.current.handleChangeTitle();
}
render() {
return (
- 函数组件的写法：
useRef()无法使用在函数组件上使用，在函数组件中要先使用 useImperativeHandle 定义要暴露给父组件的实例值，另外要把函数组件传入forwardRef处理后再导出。
import { useState, forwardRef, useImperativeHandle } from 'react';
const HelloWorld = (props, ref) => {
const [title, setTitle] = useState('hello World');
useImperativeHandle(ref, () => ({
handleChangeTitle: () => {
setTitle('hello React')
},
}));
return (
{title}
);
}
export default forwardRef(HelloWorld)
复制代码
import { useRef } from 'react'
import HelloWorld from './HelloWorld.js'
export default function Index() {
const myCom = useRef();
const changeTitle = () => {
myCom.current.handleChangeTitle();
}
return (
11、React中组件插槽怎么实现
11.1 普通插槽
其实React中是没有插槽的概念，不过可以用props.children来实现插槽的功能。
每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。
例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，也可以用插槽的形式来实现，通过props.children把 “ hello World ” 从父组件传递进去。
类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
{this.props.children}
);
}
}
复制代码
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
hello World
)
}
}
export default Index;
复制代码
函数组件的写法：
export default function HelloWorld(props){
const {children}=props;
return (
{children}
);
}
复制代码
import HelloWorld from './HelloWorld.js';
export default function Index(){
return (
hello World
)
}
复制代码
11.2 具名插槽
可以通过props给子组件传递一个函数，如果这个函数最后返回React元素，其React元素是用JSX语法编写的，这样就间接实现具名插槽的功能。
例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，用具名插槽的形式来实现。
类组件的写法：
import React from 'react';
class HelloWorld extends React.Component{
constructor(props){
super(props)
this.elementSlot = "";
if (this.props.element) {
this.elementSlot = this.props.element();
}
}
render(){
return (
{this.elementSlot}
);
}
}
export default HelloWorld;
复制代码
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
info(){
return(
hello World
)
}
render() {
return (
函数组件的写法：
export default function HelloWorld(props) {
const { children, element } = props;
let elementSlot = "";
if (element) {
elementSlot = element();
}
return (
{elementSlot}
);
}
复制代码
import HelloWorld from './HelloWorld.js';
export default function Index(){
const info = () =>{
return (
hello World
)
}
return (
11.3 作用域插槽
Vue的作用域插槽的作用是用子组件中的数据在父组件中写插槽内容。
回顾上面具名插槽的实现过程，先在父组件中定义一个函数，该函数能返回一个React元素，再通过props把该函数传递给子组件，在子组件中执行该函数，把执行结果添加到子组件的React元素中。
如果在子组件中执行该函数时，把子组件的数据当作参数传递进去，那么在父组件中就可以用该函数接收子组件的数据来写React元素（插槽的内容）。这样就实现了作用域插槽。
例如开发一个 HelloWorld 组件用来展示 “ 用子组件的数据写具名插槽 hello World ” ，用作用域插槽的形式来实现。
类组件的写法：
import React from 'react';
class HelloWorld extends React.Component{
constructor(props){
super(props)
this.state = {
info:'用子组件的数据写具名插槽 hello World'
}
this.elementSlot = "";
if (this.props.element) {
this.elementSlot = this.props.element(this.state.info);
}
}
render(){
return (
{this.elementSlot}
);
}
}
export default HelloWorld;
复制代码
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
info(data){
return(
{data}
)
}
render() {
return (
)
}
}
export default Index;
复制代码
函数组件的写法
import { useState } from "react";
export default function HelloWorld(props) {
const { children, element } = props;
const [info] = useState('用子组件的数据写具名插槽 hello World')
let elementSlot = "";
if (element) {
elementSlot = element(info);
}
return (
{elementSlot}
{children}
);
}
复制代码
import HelloWorld from './HelloWorld.js';
export default function Index(){
const info = (data) =>{
return (
{data}
)
}
return (
小结
以上从Vue开发一个组件会用到的技术，在React中寻找对应的实现方案的角度来入门React，读完你应该会用React开发一些简单的页面，并能把页面分割成一个个组件，并在组件之间进行数据交互。下一篇文章将介绍开发组件时在Vue中那些常用的指令在React中是如何实现的。
作者：红尘炼心
链接：https://juejin.cn/post/6975864046058733576