〇、看前准备

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 源码瞎几把解读 【前戏】 为啥组件外面非得包个标签?的更多相关文章

  1. React 16 源码瞎几把解读 【二】 react组件的解析过程

    一.一个真正的react组件编译后长啥样? 我们瞎几把解读了react 虚拟dom对象是怎么生成的,生成了一个什么样的解构.一个react组件不光由若干个这些嵌套的虚拟dom对象组成,还包括各种生命周 ...

  2. React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber,fiber不解读这个过程也不知道)

    一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...

  3. React 16 源码瞎几把解读 【一】 从jsx到一个react 虚拟dom对象

    一.jsx变createElement 每一个用jsx语法书写的react组件最后都会变成 react.createElement(...)这一坨东西, // 转变前 export default ( ...

  4. React 16 源码瞎几把解读 【三 点 二】 react中的fiberRoot

    〇.先来看看常用的常量 NoWork = 0 noTimeout = undefined HostRoot = 3 NoContext = 0b000; AsyncMode = 0b001; Stri ...

  5. React Fiber源码分析 (介绍)

    写了分析源码的文章后, 总觉得缺少了什么, 在这里补一个整体的总结,输出个人的理解~ 文章的系列标题为Fiber源码分析, 那么什么是Fiber,官方给出的解释是: React Fiber是对核心算法 ...

  6. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...

  7. React的React.createContext()源码解析(四)

    一.产生context原因 从父组件直接传值到孙子组件,而不必一层一层的通过props进行传值,相比较以前的那种传值更加的方便.简介. 二.context的两种实现方式 1.老版本(React16.x ...

  8. React的React.createElement源码解析(一)

    一.什么是jsx  jsx是语法糖  它是js和html的组合使用  二.为什么用jsx语法 高效定义模版,编译后使用 不会带来性能问题 三.jsx语法转化为js语法  jsx语法通过babel转化为 ...

  9. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

随机推荐

  1. HDU4059_The Boss on Mars

    数论题. 首先我们知道公式:1^4+2^4+3^4+……+n^4=(n)*(n+1)*(2*n+1)*(3*n*n+3*n-1) /30; 然后我们要把多余的减掉.这里用到的是mobius反演. 总之 ...

  2. POJ2374_Fence Obstacle Course

    题意是描述是这样的,给你n个围栏,对于每个围栏你必须走到其边上才可以往下跳,现在问你从初始最高位置的n个围栏,到原点,水平走过的路程最少是多少? 其实我可可以这样来考虑问题.由于每次都是从板子的左右两 ...

  3. 【Java】JAVA开发人员常见环境工具安装

    1.安装配置JDK1.7:jdk-7u45-windows-x64.exe,环境变量配置:JAVA_HOME---[F:\1024\jdk1.7],CLASSPATH---[.;%JAVA_HOME% ...

  4. 【明哥报错簿】之【inside the host appBase has been specified, and will be ignored】和【did not find a matching property.】

    tomcat启动时有时候会报一些警告,项目有时候也是可以正常运行.但是警告出现还是要找到原因消灭掉,两个典型的警告解决办法如下: 1.[inside the host appBase has been ...

  5. Count the string HDU - 3336

    题意: 求一个字符串的每个前缀在这个字符串中出现次数的加和 解析: 默默的骂一句...傻xkmp..博主心里气愤... 拓展kmp就好多了... 因为拓展kmp每匹配一次   就相当于这些前缀出现了一 ...

  6. C++11Mutex(互斥锁)详解

    多个线程访问同一资源时,为了保证数据的一致性,最简单的方式就是使用 mutex(互斥锁). (1).直接操作 mutex,即直接调用 mutex 的 lock / unlock 函数.此例顺带使用了 ...

  7. Web前端之HTML详解20180327

    一.html概述 html就是超文本标记语言的简写,是最基础的网页语言.html通过标签来定义语言,代码都是由标签所组成. 1.html代码从<html>开始</html>结束 ...

  8. oracle的sign()函数

    sign函数 比较大小函数 sign 函数语法:sign(n) 函数说明:取数字n的符号,大于0返回1, 小于0返回-1, 等于0返回0 示例1: ),),) from dual; ) ) ) ——— ...

  9. 《剑指offer》— JavaScript(10)矩形覆盖

    矩形覆盖 题目描述 我们可以用(2*1)的小矩形横着或者竖着去覆盖更大的矩形.请问用n个(2*1)的小矩形无重叠地覆盖一个(2*n)的大矩形,总共有多少种方法? 实现代码 function jumpF ...

  10. 题解【luogu3709 大爷的字符串题】

    Description 个人觉得这是这道题最难的一步...出题人的语文... 每次给出一个区间,求这个区间最少能被多少个单调上升的序列覆盖. Solution 这个东西可以转化为这个区间中出现次数最多 ...