新手学习 react 迷惑的点(完整版)
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以来讲讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,欢迎提出来
为什么要引入 React
在写 React 的时候,你可能会写类似这样的代码:
import React from 'react'function A() {// ...other codereturn <h1>前端</h1>
}
你肯定疑惑过,下面的代码都没有用到 React,为什么要引入 React 呢?
如果你把 import React from ‘react’ 删掉,还会报下面这样的错误:
那么究竟是哪里用到了这个 React,导致我们引入 React 会报错呢,不懂这个原因,那么就是 JSX 没有搞得太明白。
你可以讲上面的代码(忽略导入语句)放到在线 babel 里进行转化一下,发现 babel 会把上面的代码转化成:
function A() {// ...other codereturn 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 迷惑的点(完整版)相关推荐
- python新手教程全套_Python入门教程完整版(懂中文就能学会)
前几天给大家分享视频<python基础教程>受到了广泛的关注,有人不知道怎么领取,居然称小编为"骗子". 不过小编的内心是强大的,网友虐我千百遍,我待网友如初恋,因为今 ...
- 12家大厂软件测试大牛,联合打造:<如何从零开始学习软件测试>系列视频+完整版文档分享
前言 很多朋友想要入行软件测试,但是都不知道该怎么学.抽个时间简单地给大家说下,对于0基础的朋友,应该怎么去学习软件测试.学习软件测试有2条路可以选. 最省事的当然是找个靠谱的培训机构去培训啦,你就什 ...
- 字节跳动内部 MySQL 学习笔记火了,完整版开放下载!
最近很多小伙伴找我要一些 MySQL 基础资料,于是我翻箱倒柜,把这份阿里大牛总结的 MySQL 归纳笔记找出来,免费共享给大家! 据说有小伙伴靠这份笔记顺利进入 BAT 哦,所以一定要好好学习这份资 ...
- 我们究竟还要学习哪些Android知识?完整版开放下载
前言 移动研发火热不停,越来越多人开始学习 android 开发.但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容.市面上也多是谈论知识图谱,缺少体 ...
- 字节跳动 MySQL 学习笔记火了,完整版开放下载!
最近很多小伙伴找我要一些 MySQL 基础资料,于是我翻箱倒柜,把这份阿里大牛总结的 MySQL 归纳笔记找出来,免费共享给大家! 据说有小伙伴靠这份笔记顺利进入 BAT 哦,所以一定要好好学习这份资 ...
- 基于深度学习的股票预测(完整版,有代码)
基于深度学习的股票预测 数据获取 数据转换 LSTM模型搭建 训练模型 预测结果 数据获取 采用tushare的数据接口(不知道tushare的筒子们自行百度一下,简而言之其免费提供各类金融数据 , ...
- 【深度学习与图神经网络核心技术实践应用高级研修班-Day1】深度学习的发展历史(完整版)
深度学习的常用模型及方法-深度学习发展历史 1. 深度学习发展历史 2. 深度学习的发展趋势 3. 人工神经网络 4. 模型与算法 4.1 前馈神经网络 4.2 前馈神经网络特点 4.3 前馈神经网络 ...
- React 路由 V5(完整版)
一.什么是路由? 指路径url与不同的页面和内容进行相应匹配,可以友好的解决Component到url之间的同步映射关系 二.路由的使用 (1).下载react-router 指令(指定v5版本):n ...
- PyTorch核心贡献者开源书:《使用PyTorch进行深度学习》完整版现已发布!
来源|新智元 [导读]<使用PyTorch进行深度学习>一书的完整版现已发布!教你如何使用PyTorch创建神经网络和深度学习系统,内含图解与代码,操作易上手. 由Luca Antiga. ...
最新文章
- html网页特殊符号代码
- 三行代码让你的博客访问量上百万
- mysql5.6.22.0安装_皮带机滚筒用圆锥孔调心滚子轴承锁紧安装工艺
- linux启动系统不显示进度条设置方法
- 二、MySQL连接查询学习笔记(多表连接查询:内连接,外连接,交叉连接详解)
- c++ inline 以及构造函数
- opencv1-安装及资料
- 无线扩展器怎么连接好友服务器失败怎么办,tplink无线扩展器怎么设置 tplink无线扩展器设置方法...
- 从M个数中随机等可能的取出N个的问题
- linux中dir命令,详解Linux系统中ls和dir命令的组合使用
- 大学计算机操作Windows7实验报告,实验报告 计算机操作系统-Windows 7
- 计算机二级c语言编程题库100题下载,计算机二级c语言编程题库(100题).pdf
- 离散数学编程实现真值表输出
- 介绍理想工作计算机 英语作文,我的理想工作(My Ideal Job)
- 你真的了解switch吗?
- ui设计师需要学哪些软件
- iOS—— 调用高德地图SDK
- esp32的python教程步数采集_ESP32CAM micropython的操作指南
- 通用嵌入式系统测试平台 ETest简介
- 王者荣耀小游戏(发给你的好兄弟(大怨种)^-^)
热门文章
- Spring学习总结(5)——IOC注入方式总结
- 乌班图mysql8.0安装第一次手工启动_Ubuntu Server 16.04下mysql8.0安装配置图文教程
- 如何利用phpize在生产环境中为php添加新的扩展php-bcmath
- Swift学习笔记_数据类型_整数类型
- Pythonipython安装注意事项
- [转]Ionic系列——CodePen上的优秀Ionic_Demo
- tomcat 内存调整
- 如何删除在Github中创建的项目
- poco c++ library 特性
- 我如何进行简历的筛选与人员的选择