重拾JSX

3

React.createElement语法糖

JSX是一种JavaScript的语法拓展,可以使用它来进行UI的展示:

const element = <h1>Hello, world!</h1>;

我们一般会在组件的render方法里使用JSX进行布局和事件绑定:

class Home extends Component {
  render() {
    return (
      <div onClick={() => console.log('hello')}>
        <h1>Hello, world!</h1>
        <Blog title="deepred" />
      </div>
    );
  }
}

React的核心机制之一就是可以创建虚拟的DOM元素,利用虚拟DOM来减少对实际DOM的操作从而提升性能,JSX正是为了虚拟DOM而存在的语法糖

我们在平时的组件编写中,通常都这么写:

import React, { Component } from 'react';

class Demo extends Component {
  render() {
    return (
      <h1>Hello, world!</h1>
    )
  }
}

然而代码里面并没有用到React,为什么要引入这个变量呢?

因为JSX是React.createElement这个方法的语法糖:

const element = <h1 id="container" className="home">Hello</h1>;

// 等价于
const element = React.createElement("h1", {
  id: "container",
  className: "home"
}, "Hello");

推荐大家在babeljs.io上看下JSX编译后的实际效果
jsx

React.createElement有三个参数:

React.createElement(
  type, // dom类型,比如div,h1
  [props], // dom属性,比如id,class,事件
  [...children] // 子节点,字符串或者React.createElement生成的一个对象
)

JSX用一种类似HTML的语法替代了比较繁琐的React.createElement纯JS方法,而@babel/preset-react插件就起到了最关键的一步:负责在webpack编译时,把所有的JSX都改成React.createElement:

class Home extends Component {
  render() {
    return (
      <div onClick={() => console.log('hello')}>
        <h1>Hello, world!</h1>
        <Blog title="deepred" />
      </div>
    );
  }
}

编译后:

class Home extends Component {
  render() {
    return React.createElement("div", {
      onClick: () => console.log('hello')
    }, React.createElement("h1", null, "Hello, world!"), React.createElement(Blog, {
      title: "deepred"
    }));
  }
}

在开发中,有了JSX后我们基本不怎么需要用到createElement方法,但如果我们需要实现这样一个组件:

// 根据传入的type属性,渲染成相应的html元素
<Tag type="h1" id="hello" onClick={() => console.log('hello')}>this is a h1</Tag>
<Tag type="p">this is a p</Tag>

我们不太可能根据type的属性,一个个if else去判断对应的标签:

function Tag(props) {
  const { type, ...other } = props;

  if (type === 'h1') {
    return <h1 {...other}>{props.children}</h1>
  }

  if (type === 'p') {
    return <p {...other}>{props.children}</p>
  }
}

这时,就需要用到底层的api了:

function Tag(props) {
  const { type, ...other } = props;

  return React.createElement(type, other, props.children);
}

自己实现一个JSX渲染器

虚拟dom本质就是一个js对象:

const vnode = {
  tag: 'div',
  attrs: {
    className: 'container'
  },
  children: [
    {
        tag: 'img',
        attrs: {
          src: '1.png'
        },
        children: []
    },
    {
        tag: 'h3',
        attrs: {},
        children: ['hello']
    }
  ]
}

可以通过在每个文件的上方添加/** @jsx h */来告诉@babel/preset-reacth方法名代替JSX(默认方法是React.createElement)

/** @jsx h */

const element = <h1 id="container" className="home">Hello</h1>;
/** @jsx h */
const element = h("h1", {
  id: "container",
  className: "home"
}, "Hello");

jsx2

现在让我们开始创建自己的h函数吧!

function h(nodeName, attributes, ...args) {
  // 使用concat是为了扁平化args,因为args数组里面的元素可能也是数组
  // h('div', {}, [1, 2, 3])  h('d', {}, 1, 2, 3) 都是合法的调用
  const children = args.length ? [].concat(...args) : null;

  return { nodeName, attributes, children };
}
const vnode = h("div", {
  id: "urusai"
}, "Hello!");

// 返回
// {
//  "nodeName": "div",
//  "attributes": {
//   "id": "urusai"
//  },
//  "children": [
//   "Hello!"
//  ]
// }

h的作用就是返回一个vnode,有了vnode,我们还需要把vnode转成真实的dom:

function render(vnode) {
  if (typeof vnode === 'string') {
    // 生成文本节点
    return document.createTextNode(vnode);
  }

  // 生成元素节点并设置属性
  const node = document.createElement(vnode.nodeName);
  const attributes = vnode.attributes || {};
  Object.keys(attributes).forEach(key => node.setAttribute(key, attributes[key]));

  if (vnode.children) {
    // 递归调用render生成子节点
    vnode.children.forEach(child => node.appendChild(render(child)));
  }

  return node;
}

现在让我们使用这两个方法吧:

/** @jsx h */
const vnode = <div id="urusai">Hello!</div>;
const node = render(vnode);
document.body.appendChild(node);

编译转码后:

/** @jsx h */
const vnode = h("div", {
  id: "urusai"
}, "Hello!");
const node = render(vnode);
document.body.appendChild(node);

我们还可以遍历数组:

/** @jsx h */
const items = ['baga', 'hentai', 'urusai'];
const vnode = <ul>{items.map((item, index) => <li key={index}>{item}</li>)}</ul>;
const list = render(vnode);
document.body.appendChild(list);

编译转码后:

/** @jsx h */
const items = ['baga', 'hentai', 'urusai'];
const vnode = h("ul", null, items.map((item, index) => h("li", {
  key: index
}, item)));
const list = render(vnode);
document.body.appendChild(list);

通过h render两个函数,我们就实现了一个很简单的JSX渲染器!!!

参考

你可能感兴趣的

载入中...