新手学习新手学习react迷惑的点迷惑的点
为什么要引入 React
你肯定疑惑过,下面的代码都没有用到 React,为什么要引入 React 呢?
如果你把 import React from ‘react’ 删掉,还会报下面这样的错误:
那么究竟是哪里用到了这个 React,导致我们引入 React 会报错呢,不懂这个原因,那么就是 JSX 没有搞得太明白。
你可以讲上面的代码(忽略导入语句)放到在线 babel 里进行转化一下,发现 babel 会把上面的代码转化成:
因为从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖。
为什么要用 className 而不用 class
React 一开始的理念是想与浏览器的 DOM API 保持一直而不是 HTML,因为 JSX 是 JS 的扩展,而不是用来代替 HTML 的,
这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个 API:
浏览器问题,ES5 之前,在对象中不能使用保留字。以下代码在 IE8 中将会抛出错误:
解构问题,当你在解构属性的时候,如果分配一个 class 变量会出问题:
其他讨论可见:有趣的话题,为什么jsx用className而不是class
为什么属性要用小驼峰
因为 JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而
不使用 HTML 属性名称的命名约定。
来自 JSX 简介
为什么 constructor 里要调用 super 和传递 props
这是官网的一段代码,具体见:状态(State) 和 生命周期
而且有这么一段话,不仅让我们调用 super 还要把 props 传递进去,但是没有告诉我们为什么要这么做。
不知道你有没有疑惑过为什么要调用 super 和传递 props,接下来我们来解开谜题吧。
为什么要调用 super
其实这不是 React 的限制,这是 JavaScript 的限制,在构造函数里如果要调用 this,那么提前就要调用 super,在 React 里,
我们常常会在构造函数里初始化 state,this.state = xxx ,所以需要调用 super。
为什么要传递 props