React 16 源码瞎几把解读【前戏】为啥组件外面非得包个标签？

〇、看前准备

1.自行clone react最新代码

2.自行搭建一个能跑react的test项目

一、看表面：那些插件如何解析JSX

有如下一段代码：

// ---- hearder.jsx 组件

import React,{Component} from 'react';

export default (props)=>(

    <h1 ref="h1">我是header.{props.kk}</h1>

);

// ---- Home.jsx 页面级组件

import React,{Component} from 'react';

import Header from '../components/header';

class Home extends Component {

    constructor(props){

        super(props);

    }

    componentWillMount(){

        console.log('willMount');

    }

    render(){

        let {name} = this.props;

        console.log(this);

        return (

            <div ref="home">

                <Header kk="jsx"/>

                <div>主页</div>

                <div>

                    <p>哈哈哈哈</p>

                </div>

            </div>

        )

    }

}

export default Home;

// React入口文件 app.js

import ReactDOM from 'react-dom';

import React from 'react';

import Home from './page/home';

let abc = ReactDOM.render(

    <div>

        <Home name="home"/>

    </div>

    ,

    document.getElementById('app')

);

发现每一个出现jsx语法的地方都要出现import React from 'react';

其实react 的引入就是为了将解析完的jsx 能有createElement方法被执行，在浏览器里打开控制台，我们发现代码被整成了这个样子：

// ----header.jsx

var _default = function _default(props) {

    return _react2.default.createElement(

        "h1",

        { ref: "h1" },

        "\u6211\u662Fheader.",

        props.kk

    );

};

exports.default = _default;

// home.jsx

var Home = function (_Component) {

    _inherits(Home, _Component);

    function Home(props) {

        _classCallCheck(this, Home);

        return _possibleConstructorReturn(this, (Home.__proto__ || Object.getPrototypeOf(Home)).call(this, props));

    }

    _createClass(Home, [{

        key: 'componentWillMount',

        value: function componentWillMount() {

            console.log('willMount');

        }

    }, {

        key: 'render',

        value: function render() {

            var name = this.props.name;

            console.log(this);

            return _react2.default.createElement(

                'div',

                { ref: 'home' },

                _react2.default.createElement(_header2.default, { kk: 'js' }),

                _react2.default.createElement(

                    'div',

                    null,

                    '\u4E3B\u9875'

                ),

                _react2.default.createElement(

                    'div',

                    null,

                    _react2.default.createElement(

                        'p',

                        null,

                        '\u54C8\u54C8\u54C8\u54C8'

                    )

                )

            );

        }

    }, {

        key: '__reactstandin__regenerateByEval',

        // @ts-ignore

        value: function __reactstandin__regenerateByEval(key, code) {

            // @ts-ignore

            this[key] = eval(code);

        }

    }]);

    return Home;

}(_react.Component);

var _default = Home;

exports.default = _default;

// app.js

_reactDom2.default.render(_react2.default.createElement(

    'div',

    null,

    _react2.default.createElement(_home2.default, { name: 'home' })

), document.getElementById('app'));

二、为啥外面非得包一个

我们知道我们在写react的时候，不管你用的是webpack也好还是fis3 、gulp 或者直接撸js+html，都需要引入jsx语法转义插件，这些插件把jsx语法的字符转变成了我们在浏览器看到的样子。

每个组件都有render方法，每个render方法都会return一个React.createElement 执行后的东西

我将header.jsx改为

export default (props)=>(

    <h1 ref="h1">我是header.{props.kk}</h1>

    <p>hahaha</p>

);

当我们在jsx中写若干个标签而外面不包东西的话，以babel-loader为例，丫会提示：

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag

我们通过追溯得到jsx语法的解析其实是在 baabel-core/node_modules/babylon/index.js 中解析的

我们注释掉出现的报错信息，因能力有限水平一般且对babylon有任何了解，所以只通过粗浅的改动以下代码让webpack能够编译通过（当然js语法肯定是不成功的）

Tokenizer.prototype.readRegexp = function readRegexp() {

......

    for (;;) {

      // if (this.state.pos >= this.input.length) this.raise(start, "Unterminated regular expression");

      var ch = this.input.charAt(this.state.pos);

      if (lineBreak.test(ch)) {

          // this.raise(start, "Unterminated regular expression");

          break;  // 增加一个break

      }

      ..............

    return this.finishToken(types.regexp, {

      pattern: content,

      flags: mods

    });

  };

pp$9.jsxParseElementAt = function (startPos, startLoc) {

  ............

  // if (this.match(types.relational) && this.state.value === "<") {

  //   this.raise(this.state.start, "Adjacent JSX elements must be wrapped in an enclosing tag");

  // }

  return this.finishNode(node, "JSXElement");

};

编译出来的代码结构如下：

var _default = function _default(props) {

    return _react2.default.createElement(

        "h1",

        { ref: "h1" },

        "\u6211\u662Fheader.",

        props.kk

    ) < p > hahaha < /p>/;

};

exports.default = _default;

可见babylon在解析jsx的时候会默认将第一个闭合标签 return 出去，就算第二个咱们改babylon改的再成功能正确解析p标签这个jsx，岂不是return 两个东西出去了，函数里怎么可能有两个return呢！

所以react的所有组件必须放在一个闭合标签里（当然了16 版本也可以是一个数组，不用放在闭合标签里，以后再说）。

看到

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag

和

SyntaxError: Unterminated regular expression

的报错

一定要检查自己的jsx是否在一个闭合标签中，同时是否语法正确

巴特西

React 16 源码瞎几把解读【前戏】为啥组件外面非得包个标签？

最新文章

热门文章

巴特西

React 16 源码瞎几把解读 【前戏】 为啥组件外面非得包个标签？

最新文章

热门文章

React 16 源码瞎几把解读【前戏】为啥组件外面非得包个标签？