网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言。

为什么要引入 React

在写 React 的时候,你可能会写类似这样的代码:

import React from 'react'

function A() {
// ...other code
return <h1>前端桃园</h1>
}

你肯定疑惑过,下面的代码都没有用到 React,为什么要引入 React 呢?

如果你把 import React from ‘react’ 删掉,还会报下面这样的错误:

那么究竟是哪里用到了这个 React,导致我们引入 React 会报错呢,不懂这个原因,那么就是 JSX 没有搞得太明白。

你可以讲上面的代码(忽略导入语句)放到在线 babel 里进行转化一下,发现 babel 会把上面的代码转化成:

function A() {
// ...other code
return React.createElement("h1", null, "前端桃园");
}

因为从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖。

为什么要用 className 而不用 class

  1. React 一开始的理念是想与浏览器的 DOM API 保持一直而不是 HTML,因为 JSX 是 JS 的扩展,而不是用来代替 HTML 的,这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个 API:

    const element = document.createElement("div")
    element.className = "hello"
  2. 浏览器问题,ES5 之前,在对象中不能使用保留字。以下代码在 IE8 中将会抛出错误:

    const element = {
    attributes: {
    class: "hello"
    }
    }
  3. 解构问题,当你在解构属性的时候,如果分配一个 class 变量会出问题:

    const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
    const { className } = { className: 'foo' }
    const { class: className } = { class: 'foo' }

其他讨论可见:有趣的话题,为什么jsx用className而不是class

为什么属性要用小驼峰

因为 JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。

来自 JSX 简介

为什么 constructor 里要调用 super 和传递 props

这是官网的一段代码,具体见:状态(State) 和 生命周期

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

而且有这么一段话,不仅让我们调用 super 还要把 props 传递进去,但是没有告诉我们为什么要这么做。

不知道你有没有疑惑过为什么要调用 super 和传递 props,接下来我们来解开谜题吧。

为什么要调用 super

其实这不是 React 的限制,这是 JavaScript 的限制,在构造函数里如果要调用 this,那么提前就要调用 super,在 React 里,我们常常会在构造函数里初始化 state,this.state = xxx ,所以需要调用 super。

为什么要传递 props

你可能以为必须给 super 传入 props,否则 React.Component 就没法初始化 this.props

class Component {
constructor(props) {
this.props = props;
// ...
}
}

不过,如果你不小心漏传了 props,直接调用了 super(),你仍然可以在 render 和其他方法中访问 this.props(不信的话可以试试嘛)。

为啥这样也行?因为React 会在构造函数被调用之后,会把 props 赋值给刚刚创建的实例对象:

const instance = new YourComponent(props);
instance.props = props;

props 不传也能用,是有原因的。

但这意味着你在使用 React 时,可以用 super() 代替 super(props) 了么?

那还是不行的,不然官网也不会建议你调用 props 了,虽然 React 会在构造函数运行之后,为 this.props 赋值,但在 super() 调用之后与构造函数结束之前, this.props 仍然是没法用的。

// Inside React
class Component {
constructor(props) {
this.props = props;
// ...
}
} // Inside your code
class Button extends React.Component {
constructor(props) {
super(); //

新手学习 React 迷惑的点的更多相关文章

  1. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  2. ReactNative新手学习之路07ListView_ renderHeader使用StaticContainer

    react native新手学习之路07ListView_ renderHeader使用StaticContainer 1.某些特殊场景需要用ScrollView滚动和ListView配合但是不幸运的 ...

  3. ReactNative新手学习之路01-创建项目开始

    新手学习之路01-创建项目开始 小菜鸟准备学习RN开发,决定写下自己的学习历程,方便其他也想要学习RN的人,后期会持续更新写下自己所有学习经历,一步步从菜鸟成长成业内高手.开发环境准备,本文默认环境已 ...

  4. 正式学习React(一) 开始学习之前必读

    为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...

  5. React学习-React初识

    一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...

  6. 学习React之前你需要知道的的JavaScript基础知识

    在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...

  7. 新手学习web遇到的一些乱码问题

    在新手学习web网站学习的时候经常会遇到?????这种乱码,对于刚起步的菜鸟来说真的很头痛,很容易打击继续学的信心当然了对于菜鸟的我最近也遇到过乱码问题,沉浸其中不能自拔,爱的深啊!!!!!我所遇到的 ...

  8. 从0开始学习react(一)

    本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...

  9. Python新手学习基础之初识python——与众不同2

    看完了Python的缩进,现在来看看Python的标识符.引号和注释. 标识符 关于Python的标识符,其实不是与众不同,只是有一定的规则. 标识符是编程时使用的名字.在Python中,标识符有几点 ...

随机推荐

  1. YARN的job提交流程

    1.客户端向ResourceManagement 提交 运行的请求 (hadoop jar xxxx.jar) 2.ResourceManager进行检查,没有问题的时候,向客户端返回一个共享资源的路 ...

  2. Oracle 反键索引/反向索引

    反键索引又叫反向索引,不是用来加速数据访问的,而是为了均衡IO,解决热块而设计的比如数据这样: 1000001 1000002 1000005 1000006 在普通索引中会出现在一个叶子上,如果部门 ...

  3. 创建 OpenStack云主机

    创建过程 创建虚拟网络 创建m1.nano规格的主机(相等于定义虚拟机的硬件配置) 生成一个密钥对(openstack的原理是不使用密码连接,而是使用密钥对进行连接) 增加安全组规则(用iptable ...

  4. Python3.5-20190529-自动登录百度

  5. [BZOJ4826] [HNOI2017] 影魔 单调栈 主席树

    题面 因为是一个排列,所以不会有重复的.如果有重复就没法做了.一开始没有仔细看题目想了半天. 发现,如果是第一种情况,那么边界\(l\)和\(r\)就应该分别是整个区间的最大值和次大值. 然后,对于那 ...

  6. java 比较两个日期大小(2) 用before(), after()

    调试代码,我就不整理了,记下after()  before() 觉得这张图好美,从人家的博客上截的,找不到链接了

  7. springboot 操作redis

    redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...

  8. Linux中Hard link和Symbol link的区别

    Hard link Hard link不能指向不在同一磁盘的文件 Hard link不能指向目录 Hard link与源文件几乎没有区别.只能通过ls -li看出link关系.另外,删除源文件后,Ha ...

  9. 【leetcode】1018. Binary Prefix Divisible By 5

    题目如下: Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted a ...

  10. iview input实现默认获取焦点并选中文字

    1. 业务背景 配置页面,可新建和复制任务:当复制任务的时候,要把名字的input框默认获取焦点,并全选任务名.效果如下: 2. 代码实现 <template> <Form :mod ...