React入门知识点清单

做前端的一定都知道现在是三大框架——Vue、React、Angular三足鼎立的时代。Vue是公认的最容易入门的，因为它文件结构上有传统的HTML的影子，让刚接触它的前端人员刚到很“亲切”。Angular虽然也有保留HTML，但它却是最难入门的，究其原因可能和他是由Google的后端程序员开发的，又是用的纯Typescript，异步使用Rxjs，对于前端新人来说门槛太高。React入门难度适中，网上各种言论说React上手比Vue难，可能难就难在不能深刻理解JSX，或者对ES6的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说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 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

参考：JSX 简介

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

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?
其实这不是 React 的限制，这是 JavaScript 的限制，在构造函数里如果要调用 this，那么提前就要调用 super。在 React 里，我们常常会在构造函数里初始化 state，this.state = xxx ，所以需要调用 super。详情见：Class 的继承 - ECMAScript 6入门

为什么要传递 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;

但这意味着你在使用 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); // ✅ {}
  }
  // ...
}

如果你想避免以上的问题，你可以通过 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>
    );
  }
}

为什么组件用大写开头

JSX 是 React.createElement(component, props, …children) 提供的语法糖，component 的类型是：string/ReactClass type。我们具体看一下在什么情况下会用到 string 类型，什么情况下用到 ReactClass type 类型。

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

对于小写字符串，就会直接创建 dom 元素，如果 html 并没有这个元素，是创建不出来的。而大字符串传进去的不是一个字符串，是一个组件(其实就是一个对象)，那么就不会直接去创建 dom 元素，还会做其他的处理。

为什么要 setState，而不是直接 this.state.xx = oo

注意：使用setState()方法修改状态，状态改变后，React会重新渲染组件
注意：不要直接修改state属性的值，像这样this.state.test = '这样方式，不会重新渲染组件';，这样不会重新渲染组件

setState 是同步还是异步

这也是react在github的issue中的问题，并且得到 react 创始人Dan的回答。

下面是Dan给出的两个理由，我这个简单总结一下，感兴趣的可以深入研究。

保证内部（数据）统一
setState异步更新状态使得并发更新组件成为可能

参考：React 中 setState() 为什么是异步的？

setState 更新 state 何时同步何时异步

setState可能是同步的，也可能是异步的。执行过程代码同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，所以表现出来有时是同步，有时是“异步”。

只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout/setInterval等原生 API 中都是同步的。简单的可以理解为被 React 控制的函数里面就会表现出“异步”，反之表现为同步。

为了做性能优化，将 state 的更新延缓到最后批量合并再去渲染对于应用的性能优化是有极大好处的，如果每次的状态改变都去重新渲染真实 dom，那么它将带来巨大的性能消耗。

参考：React 中setState更新state何时同步何时异步？

组件的生命周期

组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

react16在生命周期这块有了很大的改动，详情见：16.3 新版react生命周期图示

参考：
新手学习 react 迷惑的点

Chen