JS问题整理与思考--react JSX本质是什么

JSX解析示例

通过babel编译JSX,结果如下:

JSX模版中,标签变成React.createElement,第一个参数是标签名,第二个是标签属性,第三-N个是子元素列表。子元素依然是React.createElement。

示例中,第三个及后面对参数,是数组list在map之后返回对React.createElement列表

    render () {
        const list = this.props.data
        return (
            <ul>
                {
                    list.map((item,index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        )
    }
    function render() {
        const list = this.props.data
        return React.createElement(
            'ul',
            null,
            list.map((item,index) => {
                return React.createElement(
                    "li",
                    {key:index},
                    item
                )
            })
        )
    }

React.createElement() / snabbdom的 h() // vue的 _c()

这里对React.createElement类比于snabbdom的 h 函数以及 vue的_c 函数

JSX独立的标准

  • JSX是React引入的,但不是React独有的
  • React已经将他作为一个独立标准开放,其他项目也可用
  • React.createElement可以自定义修改的(通过 @jsx 的方式)

JSX本质是什么

  • JSX语法包括标签/JS表达式/判断/循环/事件绑定等
  • JSX其实是语法糖,需被解析成JS才能运行。开发环境会将JSX编译成JS代码,与vue模版解析成JS相似:(React.createElement是核心函数,vue的vDOM)
  • JSX是独立的标准,可被其他项目使用

随机浏览