資訊專欄INFORMATION COLUMN
摘要：翻譯自這里上一節(jié)我們介紹了，使用了一種很麻煩的方法來(lái)代表要渲染的。這一節(jié)我們將介紹如何使用來(lái)創(chuàng)建。上面代碼排除了子元素為，和的情況。代碼頭部的注釋告訴了去使用來(lái)轉(zhuǎn)義。下一節(jié)我們將往中加入虛擬和用來(lái)支持更新操作的一致性校驗(yàn)算法。
Didact: Element creation and JSX
翻譯自這里：https://engineering.hexacta.c...
JSX上一節(jié)我們介紹了Didact Elements，使用了一種很麻煩的方法來(lái)代表要渲染的DOM。這一節(jié)我們將介紹如何使用JSX來(lái)創(chuàng)建Didact Elements。
下面是一個(gè)Didact Elements的原生對(duì)象表示：
const element = {
type: "div",
props: {
id: "container",
children: [
{ type: "input", props: { value: "foo", type: "text" } },
{
type: "a",
props: {
href: "/bar",
children: [{ type: "TEXT_ELEMENT", props: { nodeValue: "bar" } }]
}
},
{
type: "span",
props: {
onClick: e => alert("Hi"),
children: [{ type: "TEXT_ELEMENT", props: { nodeValue: "click me" } }]
}
}
]
}
};
有了JSX這個(gè)語(yǔ)法糖之后我們就可以使用下面這個(gè)方法來(lái)創(chuàng)建和上面一樣的元素：
const element = (bar alert("Hi")}>click me);
如果你對(duì)JSX不熟悉你可以能會(huì)想上面這段代碼是個(gè)無(wú)效的JS對(duì)象-----沒(méi)錯(cuò)，你想的是對(duì)的。為了讓瀏覽器能解析JSX，我們需要使用預(yù)處理器（比如babel，想對(duì)JSX有更多了解的可以看這里）來(lái)將JSX轉(zhuǎn)換一下。例如babel會(huì)將上面的JSX轉(zhuǎn)成下面這個(gè)樣子：
const element = createElement(
"div",
{ id: "container" },
createElement("input", { value: "foo", type: "text" }),
createElement(
"a",
{ href: "/bar" },
"bar"
),
createElement(
"span",
{ onClick: e => alert("Hi") },
"click me"
)
);
剩下我們要做的就是添加一個(gè)createElement方法來(lái)讓Didact支持JSX，其他的工作就可以交給預(yù)處理器了。createElement方法的第一個(gè)參數(shù)是元素的類型type，第二個(gè)參數(shù)是元素的props對(duì)象，剩下的其他參數(shù)就是children了。createElement方法會(huì)返回帶有type屬性和props屬性的對(duì)象，props屬性值也是一個(gè)對(duì)象，該對(duì)象含有第二個(gè)參數(shù)的所有屬性，第二個(gè)參數(shù)之后的其他參數(shù)會(huì)放在一個(gè)數(shù)組中，并作為該對(duì)象的children屬性值。來(lái)實(shí)現(xiàn)一下createElement方法：
function createElement(type, config, ...args){
const props = Object.assign({}, config);
const hasChildren = args.length > 0;
props.children = hasChildren ? [].concat(...args) : [];
return {type, props}
}
上面的createElement在不碰到文本元素時(shí)都能很好的工作。遇到文本元素時(shí)，文本內(nèi)容會(huì)以字符串形式在第二個(gè)參數(shù)之后傳遞給createElement。又因?yàn)槲覀冎岸x了文本元素也需要有type和props屬性，所以我們會(huì)將剛傳進(jìn)來(lái)的字符串轉(zhuǎn)成一個(gè)文本元素。
const TEXT_ELEMENT = "TEXT_ELEMENT";
function createElement(type, config, ...args){
const props = Object.assign({}, config);
const hasChildren = args.length > 0;
const rawChildren = hasChildren ? [].concat(...args) : [];
props.children = rawChildren.filter(c => c != null && c !== false)
.map(c => c instanceof Object ? c : createTextElement(c));
return { type, props };
}
function createTextElement(value){
return createElement(TEXT_ELEMENT, { nodeValue: value});
}
上面代碼排除了子元素為null， undefined和false的情況。這些情況都是沒(méi)必要渲染的，所以也不需要添加到props.children上。
Summary這一節(jié)我們依然沒(méi)有添加主功能到Didact上，但現(xiàn)在我們已經(jīng)開(kāi)始使用JSX來(lái)創(chuàng)建元素了，這大幅提升了開(kāi)發(fā)體驗(yàn)。我已經(jīng)將上節(jié)和本節(jié)的代碼在codepen上更新了。代碼頭部的注釋/** @jsx crerateElement8/告訴了babel去使用createElement來(lái)轉(zhuǎn)義JSX。
你也可以在這里查看代碼。
下一節(jié)我們將往Didact中加入虛擬DOM和用來(lái)支持更新操作的一致性校驗(yàn)算法。
下一節(jié)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99668.html
摘要：事件行為在瀏覽器中保持一次，并且符合標(biāo)準(zhǔn)。主要是進(jìn)行修復(fù)。事件已經(jīng)在移動(dòng)上支持。阻止已經(jīng)在上存在的事件錯(cuò)誤處理。然后對(duì)應(yīng)的將會(huì)被打包送往客戶端。在中棄用，現(xiàn)在正式刪除。是運(yùn)行于一個(gè)嚴(yán)格的安全策略下成為可能。增加警告提示非生產(chǎn)環(huán)境。 ??寫(xiě)在開(kāi)頭 閱讀React官網(wǎng)的 RECENT POSTS的個(gè)人翻譯/摘要(部分)。 英文片段為官網(wǎng)原文片段。 原文地址 ??為什么要使用React ...
摘要：與大多數(shù)全局對(duì)象不同，沒(méi)有構(gòu)造函數(shù)。為什么要設(shè)計(jì)更加有用的返回值早期寫(xiě)法寫(xiě)法函數(shù)式操作早期寫(xiě)法寫(xiě)法可變參數(shù)形式的構(gòu)造函數(shù)一般寫(xiě)法寫(xiě)法當(dāng)然還有很多，大家可以自行到上查看什么是代理設(shè)計(jì)模式代理模式，為其他對(duì)象提供一種代理以控制對(duì)這個(gè)對(duì)象的訪問(wèn)。 這是專門(mén)探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 19 篇。 如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它們： 想閱讀更多優(yōu)質(zhì)文章請(qǐng)...
摘要：概述說(shuō)起來(lái)，我喜歡的還是他的思想，在中，實(shí)際上沒(méi)有的區(qū)別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時(shí)候又出來(lái)說(shuō)，我要把寫(xiě)在中，真是煩透咯不過(guò)，這種東西不過(guò)是年一輪回，就和時(shí)尚一樣。 0x000 概述 說(shuō)起來(lái)react，我喜歡的還是他的思想，在react中，實(shí)際上沒(méi)有html、css、js的區(qū)別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開(kāi)始，...
摘要：認(rèn)識(shí)引子最近幾個(gè)月做的一個(gè)項(xiàng)目，使用了技術(shù)體系，自然而然的用到了。下面就總結(jié)一下自己對(duì)的認(rèn)識(shí)。而這無(wú)疑增加了框架的門(mén)檻和復(fù)雜度。在被渲染之前，所有的數(shù)據(jù)都被轉(zhuǎn)義成為了字符串處理。以避免跨站腳本攻擊。表示對(duì)象將編譯成調(diào)用。 JSX認(rèn)識(shí) 引子 最近幾個(gè)月做的一個(gè)項(xiàng)目，使用了react技術(shù)體系，自然而然的用到了JSX。下面就總結(jié)一下自己對(duì)JSX的認(rèn)識(shí)。 什么是JSX 即JavaScript...
閱讀 2415·2021-09-08 09:45
閱讀 3363·2021-09-08 09:45
閱讀 3106·2019-08-30 15:54
閱讀 3361·2019-08-26 13:54
閱讀 1417·2019-08-26 13:26
閱讀 1394·2019-08-26 13:23
閱讀 917·2019-08-23 17:57
閱讀 2187·2019-08-23 17:14
