新手学习 react 迷惑的点(一)

网上各类言论说 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(); // 😬 忘了传入 props
    console.log(props); // ✅ {}
    console.log(this.props); // 😬 undefined
  }
  // ...
}

要是构造函数中调用了某个访问 props 的方法，那这个 bug 就更难定位了。所以我强烈建议始终使用super(props)，即便这不是必须的：

class Button extends React.Component {
  constructor(props) {
    super(props); // ✅ We passed props
    console.log(props); // ✅ {}
    console.log(this.props); // ✅ {}
  }
  // ...
}

上面的代码确保 this.props 始终是有值的。

若是你想避免以上的问题，你能够经过class 属性提案 来简化代码：

class Clock extends React.Component {
  state = {date: new Date()};

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

更详细的内容可见Dan 的博客

为何组件用大写开头

前面以及说过了，JSX 是 React.createElement(component, props, …children) 提供的语法糖，component 的类型是：string/ReactClass type，咱们具体看一下在什么状况下会用到 string 类型，什么状况下用到 ReactClass type 类型

• string 类型react会以为他是一个原生dom节点
• ReactClass type 类型 自定义组件

例如（string）：在 jsx 中咱们写一个

<div></div>

转换为js的时候就变成了

React.createElement("div", null)

例如（ReactClass type）：在jsx中咱们写一个

function MyDiv() {
    return (<div><div>)
}
<MyDiv></MyDiv>

转换为js的时候就变成了

function MyDiv() {
  return React.createElement("div", null);
}

React.createElement(MyDiv, null);

上边的例子中若是将MyDiv中的首字母小写，以下

function myDiv() {
    return (<div><div>)
}
<myDiv></myDiv>

转换为 js 的时候就变成了

function myDiv() {
  return React.createElement("div", null);
}

React.createElement("myDiv", null);

因为找不到 myDiv 这个 dom，因此就会报错。

后记

这是这个系列的第一篇，这些问题也是在个人一个「React交流群」里你们提出来的一些他们刚学 react 的时候容易迷惑的点，下一篇不出意外就是解答如下迷惑的点，若是有其余的问题想知道的，欢迎在评论区留言。

• 为何调用方法要 bind this
• 为何要 setState，而不是直接 this.state.xx = oo
• 为何setState不是同步
• 为何render里面要用一个父级标签包裹(没有 Fragment 之前)

---

我是桃翁，一个爱思考的前端er，想了解关于更多的前端相关的，请关注个人公号：「前端桃园」，若是想加入交流群关注公众号后回复「微信」拉你进群