React 中 JSX 的本质
JSX 本质
- JSX 等同于 Vue 模板
- Vue 模板不是 html
- JSX 也不是 JS
Vue 模板编译
js
// 插值
const template = `<p>{{message}}</p>`;
// with(this){return createElement('p',[createTextVNode(toString(message))])}
JSX 编译
可以在 https://babeljs.io/repl 测试,记得勾选
PRESETS->react
jsx 代码
js
// JSX 基本用法
const imgElem = (
<div id="div1">
<p>some text</p>
<img src={imgUrl} />
</div>
);
// JSX style
const styleData = { fontSize: '30px', color: 'blue' };
const styleElem = <p style={styleData}>设置 style</p>;
// JSX 加载组件
const app = (
<div>
<Input submitTitle={onSubmitTitle} />
<List list={list} />
</div>
);
// JSX 事件
const eventList = <p onClick={this.clickHandler}>some text</p>;
// JSX list
const listElem = (
<ul>
{this.state.list.map((item, index) => {
return (
<li key={item.id}>
index {index}; title {item.title}
</li>
);
})}
</ul>
);
编译后
js
// JSX 基本用法
const imgElem = /*#__PURE__*/ React.createElement(
'div',
{
id: 'div1',
},
/*#__PURE__*/ React.createElement('p', null, 'some text'),
/*#__PURE__*/ React.createElement('img', {
src: imgUrl,
}),
); // JSX style
const styleData = {
fontSize: '30px',
color: 'blue',
};
const styleElem = /*#__PURE__*/ React.createElement(
'p',
{
style: styleData,
},
'\u8BBE\u7F6E style',
); // JSX 加载组件
const app = /*#__PURE__*/ React.createElement(
'div',
null,
/*#__PURE__*/ React.createElement(Input, {
submitTitle: onSubmitTitle,
}),
/*#__PURE__*/ React.createElement(List, {
list: list,
}),
); // JSX 事件
const eventList = /*#__PURE__*/ React.createElement(
'p',
{
onClick: (void 0).clickHandler,
},
'some text',
); // JSX list
const listElem = /*#__PURE__*/ React.createElement(
'ul',
null,
(void 0).state.list.map((item, index) => {
return /*#__PURE__*/ React.createElement(
'li',
{
key: item.id,
},
'index ',
index,
'; title ',
item.title,
);
}),
);
总结
- React.createElement 即 h 函数,返回 vnode
- 第一个参数,可能是组件,也可能是 html tag
- 组件名,首字母必须大写(React 规定)
js
// 总结
React.createElement('div', null, [child1, child2, child3])
React.createElement('div', {...}, child1, child2, child3)
React.createElement(List, null, child1, child2, '文本节点')
// h 函数
// 返回 vnode
// patch