阅读 4508

Vue基操会了,还有必要学React么?

这是我参与更文挑战的第12天,活动详情查看: 更文挑战

前言

公众号给npy的前端秘籍

加vx👉16639199716,拉你进群嗷~❤️

本专栏会梳理一个Vue coder 对React 尝鲜的经历与过程的知识👍👍👍

如果你也是和我一样,有着相同的技术追求,有着进大厂的梦想,那么选择给npy的前端秘籍将是你不错的选择、那么我也愿意同你一起共同进步、共同学习。废话不多说,让我们马上开始吧👇

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基本知识、后续还会有更精彩的哇、一起加油哇~

❤️ 感谢大家

如果你觉得这篇内容对你挺有有帮助的话: 点赞支持下吧,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)关注公众号给npy的前端秘籍,我们一起学习一起进步。 觉得不错的话,也可以阅读其他文章(感谢朋友的鼓励与支持🌹🌹🌹)

开启LeetCode之旅

LeetCode之双指针

Leet27、移除元素

前端工程师必学的经典排序算法

LeetCode20、括号匹配

LeetCode7、整数反转

文章分类
前端
文章标签