Vue基操会了，还有必要学React么？

React前言

很高兴你能来到这里学习React.js技术，这是本专栏的第一节，主要介绍一下小伙伴们常问的一些问题，虽然废话很多，但是还是建议你可以花几分钟看一下。

React简介

首先不能否认React.js是全球最火的前端框架(Facebook推出的前端框架)，国内的一二线互联网公司大部分都在使用React进行开发，比如阿里、美团、百度、去哪儿、网易 、知乎这样的一线互联网公司都把React作为前端主要技术栈。
React的社区也是非常强大的,随着React的普及也衍生出了更多有用的框架，比如ReactNative和React VR。React从13年开始推广，现在已经推出18.x.x版本，性能和易用度上，都有很大的提升。

React优点总结

• 
  
• 
  

  生态强大：现在没有哪个框架比React的生态体系好的，几乎所有开发需求都有成熟的解决方案。

  
  
  
• 
  

  上手简单: 你甚至可以在几个小时内就可以上手React技术，但是他的知识很广，你可能需要更多的时间来完全驾驭它。

  
  
  
• 
  

  社区强大：你可以很容易的找到志同道合的人一起学习，因为使用它的人真的是太多了。

  
  
  

React和Vue的对比

这是前端最火的两个框架，虽然说React是世界使用人数最多的框架，但是就在国内而言Vue的使用者很有可能超过React。两个框架都是非常优秀的，所以他们在技术和先进性上不相上下。

那个人而言在接到一个项目时，我是如何选择的那？React.js相对于Vue.js它的灵活性和协作性更好一点，所以我在处理复杂项目或公司核心项目时，React都是我的第一选择。而Vue.js有着丰富的API，实现起来更简单快速，所以当团队不大，沟通紧密时，我会选择Vue，因为它更快速更易用。（需要说明的是，其实Vue也完全胜任于大型项目，这要根据自己对框架的掌握程度来决定，以上只是站在我的知识程度基础上的个人总结）

我们将学到什么？

我们将学习所有 React 的基础概念，其中又分为三个部分：

• 
  
• 编写组件相关：包括 JSX 语法、Component、Props
  
• 组件的交互：包括 State 和生命周期
  
• 组件的渲染：包括列表和 Key、条件渲染
  
• 和 DOM & HTML 相关：包括事件处理、表单。
  

前提条件

我们假设你熟系 HTML 和 JavaScript，但即使你是从其他编程语言转过来的，你也能看懂这篇教程。我们还假设你对一些编程语言的概念比较熟悉，比如函数、对象、数组，如果对类了解就更好了。

环境准备

首先准备 Node 开发环境，访问 Node 官方网站下载并安装。打开终端输入如下命令检测 Node 是否安装成功：

node -v # v10.16.0

npm -v # 6.9.0

注意

Windows 用户需要打开 cmd 工具，Mac 和 Linux 是终端。

如果上面的命令有输出且无报错，那么代表 Node 环境安装成功。接下来我们将使用 React 脚手架 -- Create React App（简称 CRA）来初始化项目，同时这也是官方推荐初始化 React 项目的最佳方式。

在终端中输入如下命令：

npx create-react-app my-todolist

等待命令运行完成，接着输入如下命令开启项目：

cd my-todolist && npm start

CRA 会自动开启项目并打开浏览器

🎉🎉🎉 恭喜你！成功创建了第一个 React 应用！

现在 CRA 初始化的项目里有很多无关的内容，为了开始接下来的学习，我们还需要做一点清理工作。首先在终端中按 ctrl + c 关闭刚刚运行的开发环境，然后在终端中依次输入如下的命令：

进入 src 目录

cd src

如果你在使用 Mac 或者 Linux：

rm -f *

或者，你在使用 Windows：

del *

然后，创建我们将学习用的 JS 文件

如果你在使用 Mac 或者 Linux：

touch index.js

或者，你在使用 Windows

type nul > index.js

最后，切回到项目目录文件夹下

cd ..
此时如果在终端项目目录下运行 npm start 会报错，因为我们的 index.js 还没有内容，我们在终端中使用 ctrl +c 关闭开发服务器，然后使用编辑器打开项目，在刚刚创建的 index.js 文件中加入如下代码：

import React from "react";

import ReactDOM from "react-dom";


class App extends React.Component {

  render() {

    return <div>Hello, World</div>;

  }

}


ReactDOM.render(<App />, document.getElementById("root"));

复制代码

我们看到 index.js 里面的代码分为三个部分。

首先是一系列导包，我们导入了 react 包，并命名为 React，导入了 react-dom 包并命名为 ReactDOM。对于包含 React 组件（我们将在之后讲解）的文件都必须在文件开头导入 React。

然后我们定义了一个 React 组件，命名为 App，继承自 React.Component，组件的内容我们将会在后面进行讲解。

接着我们使用 ReactDOM 的 render 方法来渲染刚刚定义的 App 组件，render方法接收两个参数，第一个参数为我们的 React 根级组件，第二个参数接收一个 DOM 节点，代表我们将把和 React 应用挂载到这个 DOM 节点下，进而渲染到浏览器中。

注意

上面代码的三个部分中，第一部分和第三部分在整篇教程中是不会修改的，同时在编写任意 React 应用，这两个部分都是必须的。后面所有涉及到的代码修改都是关于第二部分代码的修改，或者是在第一部分到第三部分之间插入或删除代码。

JSX 语法

首先我们来看一下 React 引以为傲的特性之一 -- JSX。它允许我们在 JS 代码中使用 XML 语法来编写用户界面，使得我们可以充分的利用 JS 的强大特性来操作用户界面。

一个 React 组件的 render 方法中 return 的内容就为这个组件所将渲染的内容。比如我们现在的代码：

render() {

    return <div>Hello, World</div>;

}

这里的 <div>Hello, World</div> 是一段 JSX 代码，它最终会被 Babel转译成下面这段 JS 代码:

React.createElement(

  'div',

  null,

  'Hello, World'

)

React.createElement() 接收三个参数：

• 
  
• 第一个参数代表 JSX 元素标签。
  
• 第二个参数代表这个 JSX 元素接收的属性，它是一个对象，这里因为我们的 div 没有接收任何属性，所以它是 null。
  
• 第三个参数代表 JSX 元素包裹的内容。
  

React.createElement() 会对参数做一些检查确保你写的代码不会产生 BUG，它最终会创建一个类似下面的对象：

{

  type: 'div',

  props: {

    children: 'Hello, World'

  }

};

这些对象被称之为 “React Element”。你可以认为它们描述了你想要在屏幕上看到的内容。React 将会接收这些对象，使用它们来构建 DOM，并且对它们进行更新。

App 组件最终返回这段 JSX 代码，所以我们使用 ReactDOM 的 render 方法渲染 App 组件，最终显示在屏幕上的就是 Hello, World" 内容。

JSX 作为变量使用

因为 JSX 最终会被编译成一个 JS 对象，所以我们可以把它当做一个 JS 对象使用，它享有和一个 JS 对象同等的地位，比如可以将其赋值给一个变量，我们修改上面代码中的 render 方法如下：

render() {

  const element = <div>Hello, World</div>;

  return element;

}

保存代码，我们发现浏览器中渲染的内容和我们之前类似。

在 JSX 中使用变量

我们可以使用大括号 {} 在 JSX 中动态的插入变量值，比如我们修改 render 方法如下：

render() {

  const content = "World";

  const element = <div>Hello, {content}</div>;

  return element;

}

JSX 中使用 JSX

我们可以在 JSX 中再包含 JSX，这样我们编写任意层次的 HTML 结构：

render() {

    const element = <li>Hello, World</li>

    return (

      <div>

        <ul>

          {element}

        </ul>

      </div>

    )

  }

JSX 中添加节点属性
我们可以像在 HTML 中一样，给元素标签加上属性，只不过我们需要遵守驼峰式命名法则，比如在 HTML 上的属性 data-index 在 JSX 节点上要写成 dataIndex。

const element = <div dataIndex="0">Hello, World</div>;

注意

在 JSX 中所有的属性都要更换成驼峰式命名，比如 onclick 要改成 onClick，唯一比较特殊的就是 class，因为在 JS 中 class 是保留字，我们要把 class 改成 className 。

const element = <div className="app">Hello, World</div>;

实战

在编辑器中打开 src/index.js ，对 App 组件做如下改变：

class App extends React.Component {

  render() {

    const todoList = ["给npy的前端秘籍", "fyj", "天天的小迷弟", "仰望毛毛大佬"];

    return (

      <ul>

        <li>Hello, {todoList[0]}</li>

        <li>Hello, {todoList[1]}</li>

        <li>Hello, {todoList[2]}</li>

        <li>Hello, {todoList[3]}</li>

      </ul>

    );

  }

}

可以看到，我们使用 const 定义了一个 todoList 数组常量，并且在 JSX 中使用 {} 进行动态插值，插入了数组的四个元素。

提示

无需关闭刚才使用 npm start 开启的开发服务器，修改代码后，浏览器中的内容将会自动刷新！

你可能注意到了我们手动获取了数组的四个值，然后逐一的用 {} 语法插入到 JSX 中并最终渲染，这样做还比较原始，我们将在后面列表和 Key小节中简化这种写法。

在这一小节中，我们了解了 JSX 的概念，并且实践了相关的知识。我们还提出了组件的概念，但是并没有深入讲解它，在下一小节中我们将详细地讲解组件的知识。

总结

专栏第一篇与大家一起学习了React基本知识、后续还会有更精彩的哇、一起加油哇~