React入门笔记

最近开始学 React，发现与 Vue 和 Angular 相比，React 非常容易上手且实现原理简单。在此记录一下学习 React 的心路历程：

JSX 语法

这是一种非常棒的语法，可以用 JS 来表达 HTML，虽说是一种语法糖，但是甜得大家不要不要的，其实只要知道 jsx 最终会被 babel 转义成标准 JS 语法即可，例如：

const title = <h1 className="title">Hello, world!</h1>;

打开 Babel REPL 输入上面代码，发现最终被转换成下面这个样子：

const title = React.createElement(
    'h1', // 标签名
    {
    className: 'title' }, // 属性对象
    'Hello, world!' // 子元素
);

到这里，大家应该大概知道其结构了，为了加深理解，我们再来一个复杂点的案例：

const element = (
  <div className="title" width="200" height="100">
    hello<span className="content">world!</span>
  </div>
)

被转换为：

const element = React.createElement(
  "div", // 标签名
  {
    // 属性对象
    className: "title",
    width: "200",
    height: "100",
  }, 
  "hello", // 第一个子元素
  React.createElement( // 第二个子元素
    "span",
    {
    className: "content" },
    "world!"
  )
);

可以看出来，jsx 的表现力是非常强的，语法简洁，是前端界的一大杀器。

虚拟 DOM

我们已经知道，jsx 片段会被转译成用 React.createElement 方法包裹的代码，那 React.createElement 方法究竟是什么呢？其实很简单，就是把参数转换为一个对象而已：

function createElement(type, attrs, ...children) {
   
  return {
    type,