从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 (
    <div>hello world</div>
  );
}
复制代码

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

import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>hello world</div>
    );
  }
}
复制代码

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

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

export default function HelloWorld() {
  return <
    div>hello world</div>
}
复制代码

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

2.2 绑定 Class 和 Style

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

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

export default function HelloWorld() {
  return (
    <div 
      className="title head"
      style={
  {color:'red',fontSize:'16px'}}
    >
      hello world
    </div>
  );
}
复制代码

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 (
      <div
        className={`${this.state.className} ${this.state.isHead ? 'head' : ''}`}
        style={this.state.styleData}
      >
        hello world
      </div>
    );
  }
}
复制代码

• 函数组件的写法：

import { useState } from 'react';
export default function HelloWorld() {
  const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
  const [isHead] = useState(true);
  const [className] = useState('title');
  return (
    <div
      className={`${className} ${isHead ? 'head' : ''}`}
      style={styleData}
    >
      hello world
    </div>
  );
}
复制代码

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

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

3、React中如何使用组件

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

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

import HelloWorld from './HelloWorld.js'

export default function Index(){
  return (
    <HelloWorld/>
  )
}
复制代码

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

4、React中如何定义组件数据

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