資訊專欄INFORMATION COLUMN
摘要：屬性我們還可以使用來(lái)書(shū)寫(xiě)樣式，它會(huì)自動(dòng)幫我們編譯為格式內(nèi)容語(yǔ)法高亮建議使用配合該擴(kuò)展支持語(yǔ)法高亮擴(kuò)展開(kāi)發(fā)項(xiàng)目，當(dāng)然你可以把文件當(dāng)作對(duì)待。
Omil 是什么？
Omil是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫(xiě) Omi 組件：
${this.data.title}
Omil 還提供了很多酷炫的特性：
允許為 Omi 組件的每個(gè)部分使用其它的 webpack loader，例如在
以下代碼就是經(jīng)過(guò) Omi Snippets 生成的 .js 后綴文件，可以用于在你沒(méi)有 omil 模塊下，主邏輯文件或者其他組件引入調(diào)用。
import { WeElement, define, h } from "omi";
class MyTest extends WeElement {
render() {
return h(
"div",
{
class: "example"
},
this.data.msg
);
}
install() {
this.data = {
msg: "Hello world!"
};
}
}
MyTest.css = `
.example {
color: red;
}
`;
define("my-test", MyTest);
配合 React 開(kāi)發(fā)
安裝 React 腳手架和一些必要模塊。
npm install create-react-app # 初始化項(xiàng)目 create-react-app my-project # 進(jìn)入項(xiàng)目文件夾目錄 cd my-project # 安裝項(xiàng)目依賴 npm install # 安裝 styled-components 這個(gè)務(wù)必得安裝 用于處理 React 單文件組件局部樣式 npm install styled-components --save # 安裝 omil 處理React單文件組件，把 .omi 或者 .eno 后綴文件處理為 JS npm install omil --save-dev
在配置完 Omil 之后，我們可以在 VS Code 上同時(shí)安裝好 Omi Snippets 擴(kuò)展，這個(gè)插件可以方便的讓你把 .omi 和 .eno 后綴文件在未經(jīng)過(guò) webpack 處理前轉(zhuǎn)化為 .js 文件，讓你可以直觀了解到單文件組件經(jīng)過(guò) omil 轉(zhuǎn)化后的 JS 文件內(nèi)容，這相當(dāng)于局部編譯減輕 webpack 處理單文件時(shí)候的不必要消耗。
編寫(xiě)第一個(gè)組件現(xiàn)在你可以使用單文件組件來(lái)編寫(xiě) React 組件，默認(rèn)生成類組件。
name屬性值是組件名要滿足 React 框架的組件名字定義規(guī)范，首字母必須大寫(xiě)字母;
模板中不能有
以上文件經(jīng)過(guò) Omil 處理后將會(huì)轉(zhuǎn)化為以下代碼：
import { Component as WeElement, createElement as h } from "react";
import styled from "styled-components";
const StyledComponents = styled.div`
/* CSS */
p {
color: #58bc58;
}
`;
class ComponentName extends WeElement {
render() {
return h(
StyledComponents,
null,
h("div", null, h("p", null, this.state.title))
);
}
constructor(props) {
super(props);
this.state = {
title: "react"
};
}
componentDidMount() {
console.log("生命周期");
}
}
ComponentName.css = `
/* CSS */
p {color: #58bc58};
`;
export default ComponentName;
語(yǔ)言塊規(guī)范
簡(jiǎn)介
.omi 文件是一個(gè)自定義的文件類型，用類 HTML 語(yǔ)法描述一個(gè) Omi 組件。每個(gè) .omi 文件包含三種類型的頂級(jí)語(yǔ)言塊 、
Omil 會(huì)解析文件，提取每個(gè)語(yǔ)言塊，如有必要會(huì)通過(guò)其它 loader 處理，最后將他們組裝成一個(gè) ES Module，它的默認(rèn)導(dǎo)出是一個(gè) Omi.js 組件定義好的自定義標(biāo)簽對(duì)象。
Omil 支持使用非默認(rèn)語(yǔ)言，比如 CSS 預(yù)處理器，預(yù)編譯的 HTML 模版語(yǔ)言，通過(guò)設(shè)置語(yǔ)言塊的 lang 屬性。例如，你可以像下面這樣使用 Sass 語(yǔ)法編寫(xiě)樣式：
語(yǔ)言塊 模板每個(gè) .omi 文件最多包含一個(gè) 塊。
內(nèi)容將被提取，如果是 JSX 會(huì)編譯為函數(shù)片段，如果為 html 會(huì)編譯為字符串，并最終注入到從 高階組件(僅支持React)
有時(shí)候我們可以使用高階組件拓展組件本身的一些功能，高階組件跟類組件一樣，只支持下面規(guī)定的寫(xiě)法。
| export default HOC(class { // 你的代碼 }) | 可以 | 建議使用 |
|---|---|---|
| module.exports = HOC(class { // 你的代碼 }) | 可以 | 支持 |
|
class MyText { // 你的代碼 } export default HOC(MyText) |
不可以 | 不支持 |
|
class MyText { // 你的代碼 } module.export = HOC(MyText) |
不可以 | 不支持 |
下面是一個(gè)高階組件的詳細(xì)參考例子
{this.state.title}
或者你可以這樣寫(xiě)
{HOC({this.state.title}
)}
屬性type="text/babel"
通常情況下，你可以在代碼中使用ES6的語(yǔ)法，甚至一些新特性，例如：static，某些情況下我們需要轉(zhuǎn)化為ES5做兼容，我們可以添加屬性type="text/babel"
屬性lang = "scss"我們還可以使用lang = "scss"來(lái)書(shū)寫(xiě) scss 樣式，它會(huì)自動(dòng)幫我們編譯為 css 格式內(nèi)容
語(yǔ)法高亮建議使用 VS Code 配合 Omi Snippets （該擴(kuò)展支持語(yǔ)法高亮）擴(kuò)展開(kāi)發(fā) Omi 項(xiàng)目，當(dāng)然你可以把 .omi 文件當(dāng)作 HTML 對(duì)待。
注釋在語(yǔ)言塊中使用該語(yǔ)言塊對(duì)應(yīng)的注釋語(yǔ)法 (HTML、CSS、JavaScript 等)。
| JSX 注釋語(yǔ)法 | {/* comment contents here */} |
|---|---|
| HTML 注釋語(yǔ)法 |
觀察下面這段代碼模板：
{this.data.title}
這個(gè)有趣的標(biāo)簽語(yǔ)法既不是字符串也不是 HTML。
它被稱為 JSX，是一個(gè) JavaScript 的語(yǔ)法擴(kuò)展。我們建議在 Omi 中配合使用 JSX，JSX 可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。JSX 可能會(huì)使人聯(lián)想到模版語(yǔ)言，但它具有 JavaScript 的全部功能。
上面的代碼事實(shí)上會(huì)自動(dòng)編譯為下面這份 js 代碼
import { WeElement, define, h } from "omi";
class ComponentName extends WeElement {
render() {
return h(
"div",
{
onClick: this.testClick
},
this.data.title
);
}
}
define("component-name", ComponentName);
為什么使用 JSX？
Omi 和 React 不強(qiáng)制要求使用 JSX，但是大多數(shù)人發(fā)現(xiàn)，在 JavaScript 代碼中將 JSX 和 UI 放在一起時(shí)，會(huì)在視覺(jué)上有輔助作用。
Omi 和 React 在使用 Omil 和 Omi Snippets 的區(qū)別Omil和Omi Snippets都支持編譯Omi和React，編譯的區(qū)別取決于的name屬性值，React的組件名必須首字母大寫(xiě)，Omi的組件首字母不能大寫(xiě)，并且名字中間必須有-符號(hào)連接。
| React | Omi |
|---|---|
| 組件名必須首字母大寫(xiě) | 組件首字母不能大寫(xiě)，并且名字中間必須有-符號(hào)連接 |
在下面的例子中，我們聲明了一個(gè)名為 title 的變量，然后在 JSX 中使用它，并將它包裹在大括號(hào)中：
{this.data.title}
在 JSX 語(yǔ)法中，你可以在大括號(hào)內(nèi)放置任何有效的 JavaScript 表達(dá)式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表達(dá)式。
Name: {this.formatName(user)}
Age: {9+9}
二元和三元表達(dá)式
{ !0 ? "真" : 假
}
{ user.age > 18 && 成年 }
數(shù)組渲染成列表
{
["a","b","c"].map((item,index) => {
return - {item}
})
}
JSX 也是一個(gè)表達(dá)式
在編譯之后，JSX 表達(dá)式會(huì)被轉(zhuǎn)為普通 JavaScript 函數(shù)調(diào)用，并且對(duì)其取值后得到 JavaScript 對(duì)象。
也就是說(shuō)，你可以在 if 語(yǔ)句和 for 循環(huán)的代碼塊中使用 JSX，將 JSX 賦值給變量，把 JSX 當(dāng)作參數(shù)傳入，以及從函數(shù)中返回 JSX：
{this.getGreeting(user)}
{this.getGreeting()}
JSX 特定屬性
你可以通過(guò)使用引號(hào)，來(lái)將屬性值指定為字符串字面量
也可以使用大括號(hào)，來(lái)在屬性值中插入一個(gè) JavaScript 表達(dá)式：
HTML 和 JSX 的一些區(qū)別
| HTML | JSX |
|---|---|
在屬性中嵌入 JavaScript 表達(dá)式時(shí)，不要在大括號(hào)外面加上引號(hào)。你應(yīng)該僅使用引號(hào)（對(duì)于字符串值）或大括號(hào)（對(duì)于表達(dá)式）中的一個(gè)，對(duì)于同一屬性不能同時(shí)使用這兩種符號(hào)。
警告：使用 JSX 指定子元素因?yàn)?JSX 語(yǔ)法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小駝峰命名）來(lái)定義屬性的名稱，而不使用 HTML 屬性名稱的命名約定。
例如，JSX 里的 class 變成了 className，而 tabindex 則變?yōu)?tabIndex。
假如一個(gè)標(biāo)簽里面沒(méi)有內(nèi)容，你可以使用 /> 來(lái)閉合標(biāo)簽，就像 XML 語(yǔ)法一樣：
JSX 標(biāo)簽里能夠包含很多子元素:
{this.data.element}
JSX 表示對(duì)象
Babel 會(huì)把 JSX 轉(zhuǎn)譯成一個(gè)名為 h() 函數(shù)調(diào)用。
以下兩種示例代碼完全等效：
const element =Hello, world!
const element = h(
"div",
null,
h(
"h1",
{
className: "greeting"
},
"Hello, world!"
)
);
h() 會(huì)預(yù)先執(zhí)行一些檢查，以幫助你編寫(xiě)無(wú)錯(cuò)代碼，但實(shí)際上它創(chuàng)建了一個(gè)這樣的對(duì)象：
// 注意：這是簡(jiǎn)化過(guò)的結(jié)構(gòu)
const element = {
children: [{
attributes: {className: "greeting"},
children: ["Hello, world!"],
nodeName: "h1",
}],
nodeName: "div"
}
這些對(duì)象它們描述了你希望在屏幕上看到的內(nèi)容。Omi 通過(guò)讀取這些對(duì)象，然后使用它們來(lái)構(gòu)建 DOM 以及保持隨時(shí)更新。
Props我們可以在組件的屬性上傳入屬性值，通過(guò)傳入屬性值讓組件接受外部的數(shù)據(jù)而更改自身的狀態(tài)。
組件內(nèi)部通過(guò)props接受即可：
{props.myObj.name}
我們還可以通過(guò)static defaultProps設(shè)置默認(rèn)的props值和通過(guò)static propTypes設(shè)置默認(rèn)的props類型。
{props.name}
{props.age}
事件處理
Omi 元素的事件處理和 React 一樣和 DOM 元素的很相似，但是有一點(diǎn)語(yǔ)法上的不同:
Omi 事件的命名采用小駝峰式（camelCase），而不是純小寫(xiě)。
使用 JSX 語(yǔ)法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。
事件中的this
你必須謹(jǐn)慎對(duì)待 JSX 回調(diào)函數(shù)中的 this，在 JavaScript 中，class 的方法默認(rèn)不會(huì)綁定 this。如果你忘記綁定 this.handleClick 并把它傳入了 onClick，當(dāng)你調(diào)用這個(gè)函數(shù)的時(shí)候 this 的值為 undefined。
這并不是 React 特有的行為；這其實(shí)與 JavaScript 函數(shù)工作原理有關(guān)。通常情況下，如果你沒(méi)有在方法后面添加 ()，例如 onClick={this.handleClick}，你應(yīng)該為這個(gè)方法綁定 this。
向事件處理程序傳遞參數(shù)
在循環(huán)中，通常我們會(huì)為事件處理函數(shù)傳遞額外的參數(shù)。例如，若 id 是你要?jiǎng)h除那一行的 ID，以下兩種方式都可以向事件處理函數(shù)傳遞參數(shù)：
上述兩種方式是等價(jià)的，分別通過(guò)箭頭函數(shù)和 Function.prototype.bind 來(lái)實(shí)現(xiàn)。
在這兩種情況下，React 的事件對(duì)象 e 會(huì)被作為第二個(gè)參數(shù)傳遞。如果通過(guò)箭頭函數(shù)的方式，事件對(duì)象必須顯式的進(jìn)行傳遞，而通過(guò) bind 的方式，事件對(duì)象以及更多的參數(shù)將會(huì)被隱式的進(jìn)行傳遞。
生命周期以下表格是 Omi 的生命周期：
| 生命周期鉤子 | 描述 |
|---|---|
| install | 組件掛載到 DOM 前 |
| installed | 組件掛載到 DOM 后 |
| uninstall | 組件從 DOM 中移除前 |
| beforeUpdate | update 更新前 |
| updated | update 更新后 |
| beforeRender | render() 之前 |
| receiveProps | 父元素重新渲染觸發(fā) |
舉個(gè)例子：
Seconds: {this.data.seconds}
Update
update 方法是內(nèi)置的重要核心方法，用于更新組件自身。比如:
this.update()
也可以傳遞參數(shù)，決定是否在 html 模式下忽略 attributes，強(qiáng)行更新:
this.update(true)
當(dāng)我們組件的 data 值發(fā)生變化，我們可以使用this.update()更新視圖
顯示或者隱藏
Ref
{ this.h1 = e }} onClick={this.onClick}>Hello, world!
在元素上添加 ref={e => { this.anyNameYouWant = e }} ，然后你就可以 JS 代碼里使用 this.anyNameYouWant 訪問(wèn)該元素。你可以使用兩種方式來(lái)提高 update 的性能：
提前賦值
createRef
提前賦值
{ this.myRef = e }} onClick={this.onClick}>Hello, world!
createRef
你也可以使用 createRef 來(lái)得到更高的性能，使用前需要引用 import { createRef } from "omi":
Hello, world!
Store 是什么？
Store 是 Omi 內(nèi)置的中心化數(shù)據(jù)倉(cāng)庫(kù)，他解決和提供了下面問(wèn)題和能力：
組件樹(shù)數(shù)據(jù)共享
數(shù)據(jù)變更按需更新依賴的組件
path/elements/app/index.omi下的根組件
Clicked: {this.use.count} times
{" "}
{" "}
{" "}
{" "}
path/src/index.js全局的入口文件代碼
import { render } from "omi"
import "./elements/app"
render(
通過(guò) static use 聲明依賴的 path
store 通過(guò) render 的第三個(gè)參數(shù)從根節(jié)點(diǎn)注入到所有組件。
Store 里的 data:
{
count: 0,
arr: ["china", "tencent"],
motto: "I love omi.",
userInfo: {
firstName: "dnt",
lastName: "zhang",
age: 18
}
}
下面舉一個(gè)復(fù)雜的 use 例子：
static use = [
"count", //直接字符串，JSX 里可通過(guò) this.use[0] 訪問(wèn)
"arr[0]", //也支持 path，JSX 里可通過(guò) this.use[1] 訪問(wèn)
//支持 json
{
//alias，JSX 里可通過(guò) this.use.reverseMotto 訪問(wèn)
reverseMotto: [
"motto", //path
target => target.split("").reverse().join("") //computed
]
},
{ name: "arr[1]" }, //{ alias: path }，JSX 里可通過(guò) this.use.name 訪問(wèn)
{
//alias，JSX 里可通過(guò) this.use.fullName 訪問(wèn)
fullName: [
["userInfo.firstName", "userInfo.lastName"], //path array
(firstName, lastName) => firstName + lastName //computed
]
},
]
下面看看 JSX 中使用:
...
...
{this.use[0]}
{this.use[1]}
{this.use.reverseMotto}
{this.use.name}
{this.use[3]}
{this.use.fullName}
...
...
如果不帶有 alias ，你也可以直接通過(guò) this.store.data.xxx 訪問(wèn)。
當(dāng) store.data 發(fā)生變化，依賴變更數(shù)據(jù)的組件會(huì)進(jìn)行更新，舉例說(shuō)明 Path 命中規(guī)則:
| Proxy Path(由數(shù)據(jù)更改產(chǎn)生) | static use 中的 path | 是否更新 |
|---|---|---|
| abc | abc | 更新 |
| abc[1] | abc | 更新 |
| abc.a | abc | 更新 |
| abc | abc.a | 不更新 |
| abc | abc[1] | 不更新 |
| abc | abc[1].c | 不更新 |
| abc.b | abc.b | 更新 |
以上只要命中一個(gè)條件就可以進(jìn)行更新！
總結(jié)： 只要注入組件的 path 等于 use 里聲明 或者在 use 里聲明的其中 path 子節(jié)點(diǎn)下就會(huì)進(jìn)行更新！
CSS這里說(shuō)的是 props 的 css，而不是 static css，它提供了修改 shadow dom 內(nèi)部 scoped style 的能力。
Look at my color!
上面的 my-element 的 h1 標(biāo)簽顏色是紅色。有什么辦法修改嗎？
而且還可以通過(guò)下面的方式保證一定能夠修改：
color: blue!important;高階組件
如果您用過(guò) React，相信對(duì)高階組件肯定不陌生，高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計(jì)模式。
具體而言，高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
組件是將 props 轉(zhuǎn)換為 UI，而高階組件是將組件轉(zhuǎn)換為另一個(gè)組件。
HOC 在 React 的第三方庫(kù)中很常見(jiàn)，例如 Redux 的 connect。
下面這個(gè)例子是是在組件中使用 Redux 高階組件
{this.state.title}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105703.html
摘要：用過(guò)的同學(xué)都知道，性能優(yōu)化的關(guān)鍵就是，最被詬病的也是這個(gè)，很多開(kāi)發(fā)者也吐槽這個(gè)鉤子函數(shù)，也可以配合不可變數(shù)據(jù)類型，直接進(jìn)行引用地址比較，來(lái)決定組件是否需要更新。 大家好，這次給大家講下 Omi 框架 以及即將發(fā)布的 Omim 大家有沒(méi)有數(shù)左邊的圖片里有多少個(gè) Omi？Omi 團(tuán)隊(duì)很在意這里，特意數(shù)了下，有三個(gè)。Omi 團(tuán)隊(duì)希望 Omi 以后在各大會(huì)議里能夠印刷得更加大一些。今天給大家?guī)?lái)的主...
摘要：經(jīng)過(guò)周末的連續(xù)通宵加班加點(diǎn)，版本終于問(wèn)世。雖然組件通訊非常方便，但是各種數(shù)據(jù)傳遞組件實(shí)例互操作或者循環(huán)依賴，讓代碼非常難看且難以維護(hù)。所以是為了讓組件通訊幾乎絕跡。所以的插件不會(huì)有太多。完善的腳手架你可以安裝，用來(lái)初始化項(xiàng)目腳手架。 原文鏈接--https://github.com/AlloyTeam/omi 寫(xiě)在前面 Omi框架經(jīng)過(guò)幾十個(gè)版本的迭代，越來(lái)越簡(jiǎn)便易用和強(qiáng)大。經(jīng)過(guò)周末的連...
摘要：插件開(kāi)發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開(kāi)發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....
閱讀 3179·2021-11-22 09:34
閱讀 2596·2021-09-30 09:47
閱讀 1505·2021-09-03 10:32
閱讀 3825·2021-08-16 10:49
閱讀 1852·2019-08-30 15:55
閱讀 2537·2019-08-30 15:52
閱讀 3381·2019-08-30 15:44
閱讀 1427·2019-08-30 15:44
