資訊專欄INFORMATION COLUMN
摘要：翻譯自這里上一節我們介紹了，使用了一種很麻煩的方法來代表要渲染的。這一節我們將介紹如何使用來創建。上面代碼排除了子元素為，和的情況。代碼頭部的注釋告訴了去使用來轉義。下一節我們將往中加入虛擬和用來支持更新操作的一致性校驗算法。
Didact: Element creation and JSX
翻譯自這里：https://engineering.hexacta.c...
JSX上一節我們介紹了Didact Elements，使用了一種很麻煩的方法來代表要渲染的DOM。這一節我們將介紹如何使用JSX來創建Didact Elements。
下面是一個Didact Elements的原生對象表示：
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這個語法糖之后我們就可以使用下面這個方法來創建和上面一樣的元素：
const element = (bar alert("Hi")}>click me);
如果你對JSX不熟悉你可以能會想上面這段代碼是個無效的JS對象-----沒錯，你想的是對的。為了讓瀏覽器能解析JSX，我們需要使用預處理器（比如babel，想對JSX有更多了解的可以看這里）來將JSX轉換一下。例如babel會將上面的JSX轉成下面這個樣子：
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"
)
);
剩下我們要做的就是添加一個createElement方法來讓Didact支持JSX，其他的工作就可以交給預處理器了。createElement方法的第一個參數是元素的類型type，第二個參數是元素的props對象，剩下的其他參數就是children了。createElement方法會返回帶有type屬性和props屬性的對象，props屬性值也是一個對象，該對象含有第二個參數的所有屬性，第二個參數之后的其他參數會放在一個數組中，并作為該對象的children屬性值。來實現一下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在不碰到文本元素時都能很好的工作。遇到文本元素時，文本內容會以字符串形式在第二個參數之后傳遞給createElement。又因為我們之前定義了文本元素也需要有type和props屬性，所以我們會將剛傳進來的字符串轉成一個文本元素。
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的情況。這些情況都是沒必要渲染的，所以也不需要添加到props.children上。
Summary這一節我們依然沒有添加主功能到Didact上，但現在我們已經開始使用JSX來創建元素了，這大幅提升了開發體驗。我已經將上節和本節的代碼在codepen上更新了。代碼頭部的注釋/** @jsx crerateElement8/告訴了babel去使用createElement來轉義JSX。
你也可以在這里查看代碼。
下一節我們將往Didact中加入虛擬DOM和用來支持更新操作的一致性校驗算法。
下一節
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99668.html
摘要：事件行為在瀏覽器中保持一次，并且符合標準。主要是進行修復。事件已經在移動上支持。阻止已經在上存在的事件錯誤處理。然后對應的將會被打包送往客戶端。在中棄用，現在正式刪除。是運行于一個嚴格的安全策略下成為可能。增加警告提示非生產環境。 ??寫在開頭 閱讀React官網的 RECENT POSTS的個人翻譯/摘要(部分)。 英文片段為官網原文片段。 原文地址 ??為什么要使用React ...
摘要：與大多數全局對象不同，沒有構造函數。為什么要設計更加有用的返回值早期寫法寫法函數式操作早期寫法寫法可變參數形式的構造函數一般寫法寫法當然還有很多，大家可以自行到上查看什么是代理設計模式代理模式，為其他對象提供一種代理以控制對這個對象的訪問。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 19 篇。 如果你錯過了前面的章節，可以在這里找到它們： 想閱讀更多優質文章請...
摘要：概述說起來，我喜歡的還是他的思想，在中，實際上沒有的區別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時候又出來說，我要把寫在中，真是煩透咯不過，這種東西不過是年一輪回，就和時尚一樣。 0x000 概述 說起來react，我喜歡的還是他的思想，在react中，實際上沒有html、css、js的區別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開始，...
閱讀 2409·2021-09-08 09:45
閱讀 3352·2021-09-08 09:45
閱讀 3101·2019-08-30 15:54
閱讀 3354·2019-08-26 13:54
閱讀 1410·2019-08-26 13:26
閱讀 1389·2019-08-26 13:23
閱讀 912·2019-08-23 17:57
閱讀 2181·2019-08-23 17:14
