亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React專題：JSX

YorkChen / 3067人閱讀

摘要：與之相對(duì)，語句的主要作用是邏輯和動(dòng)作，沒有返回值。函數(shù)行不行呢不行，因?yàn)樗鼪]有返回值。也就是說，等有返回值的遍歷函數(shù)都是可以的。

本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出
來我的 GitHub repo 閱讀完整的專題文章
來我的 個(gè)人博客 獲得無與倫比的閱讀體驗(yàn)

話說PHP是世界上最好的語言(笑)。

因?yàn)樗娜腴T門檻極低。

";
foreach ($fruits as $fruit) {
    $str += "
  • " . $fruit . "
    • ";
}
$str += "";
?>

    很多年前，這種字符串拼接開發(fā)網(wǎng)頁的方式非常流行。

    但是這種寫法有兩個(gè)問題：

    容易造成XSS注入，有極大的安全風(fēng)險(xiǎn)。

    拼接的寫法很繁瑣。

    于是facebook的工程師開始動(dòng)歪腦筋了。

    XHP

    他們的解決方案也很新穎，就是在代碼里直接寫標(biāo)簽，而不是將標(biāo)簽視為字符串。

    前面說到，字符串拼接很容易造成XSS注入。那么什么是XSS注入呢？

    比如惡意用戶輸入這么一段內(nèi)容：，就可能被程序識(shí)別為一段腳本，他可以在腳本里面干任何事情。

    于是人們想到的辦法是對(duì)所有輸入轉(zhuǎn)義，轉(zhuǎn)義的作用就是讓所有標(biāo)簽無法被識(shí)別為標(biāo)簽，而只是標(biāo)簽寫法的字符串。用戶的輸入就會(huì)原原本本的展示在頁面上。

    但是輸入轉(zhuǎn)義也有問題，就是容易把字符串拼接的標(biāo)簽也給轉(zhuǎn)義了。大家應(yīng)該看過頁面上大段大段的標(biāo)簽寫法的文本吧。

    我們來看看XHP的寫法。

    
        
    {$post}
    
        
    Hey there.
    
        Like
    ;

    誒，是不是有點(diǎn)眼熟？

    XHP把標(biāo)簽與字符串區(qū)別開來了，變成腳本語法的一部分。

    這正好解決了前面提到的兩個(gè)問題：

    標(biāo)簽就是標(biāo)簽，字符串就是字符串，再也別想渾水摸魚。

    像寫腳本一樣寫標(biāo)簽，是不是爽多了？

    JSX

    其實(shí)facebook一直在前端組件化方面做各種嘗試，但都不是特別成功。

    直到2013年，工程師Jordan Walke提出一個(gè)大膽的想法：把XHP的寫法遷移到JavaScript中來。即便有XHP的案例在前，大家還是覺得這個(gè)想法很瘋狂。

    不過，facebook極為優(yōu)秀的工程師文化最終促成了這種嘗試。這一嘗試不得了，開了天眼。

    自此之后就開啟了React的開掛之路。

    const element = 
    Hello React!
    ;

    這不就是facebook一直在苦苦求索的前端組件化方案嗎？

    刀耕火種時(shí)期的前端，入口是HTML，腳本和樣式被引入到HTML頁面上。這是一種分離化的思想，以語言為最小顆粒。

    然而經(jīng)過大量痛苦的實(shí)踐，人們發(fā)現(xiàn)以內(nèi)容為最小顆粒才是正解。以組件為單位，頁面結(jié)構(gòu)、樣式和功能都被集成在組件內(nèi)部，對(duì)開發(fā)者來說組件就是一個(gè)黑匣子，只能通過暴露出來的接口使用組件。這是一種封裝的思想，目的當(dāng)然是為了復(fù)用。

    當(dāng)然，目前React還無法實(shí)現(xiàn)真正意義上的CSS封裝，不過以當(dāng)下前端的關(guān)注度，CSS被徹底招安也指日可待。

    語法

    標(biāo)簽的寫法和HTML一樣，只不過融入到了JavaScript中。

    組件，其實(shí)就是自定義標(biāo)簽，首字母必須大寫，為了與原生標(biāo)簽區(qū)別開來。

    如果標(biāo)簽或組件沒有包含內(nèi)容，可以采用自閉合標(biāo)簽寫法。

    const element = ;

    JSX會(huì)自動(dòng)忽略false、null和undefined。

    標(biāo)簽的class屬性和for屬性要用className屬性和htmlFor屬性代替。

    組件返回多個(gè)標(biāo)簽或多個(gè)組件必須要用一個(gè)標(biāo)簽或組件包裹，也就是說只能有一個(gè)頂層元素。

    但是，React16以上的版本支持用空標(biāo)簽包裹或者直接返回?cái)?shù)組。這樣的好處就是不必添加很多無用的標(biāo)簽使頁面變得更加臃腫。

    import React, { Fragment } from "react";

const App = () => {
    return (
        
            
    React
    
            
    Vue
    
            
    Angular
    
            
    );
}

export default App;
    import React from "react";

const App = () => {
    return (
        <>
            
    React
    
            
    Vue
    
            
    Angular
    
        
    );
}

export default App;
    import React from "react";

const App = () => {
    return [
        
    React
    ,
        
    Vue
    ,
        
    Angular
    ,
    ];
}

export default App;
    表達(dá)式

    標(biāo)簽里肯定要寫一些變量，要不然頁面就是死的。

    怎么寫變量呢？用花括號(hào)包圍。

    const name = "React";
const element = 
    Hello {name}!
    ;

    如果我想插入一個(gè)對(duì)象字面量怎么辦？

    很簡(jiǎn)單，再包裹一層花括號(hào)。

    const obj = { name: "React" };
const element = 
    Hello {name}!
    ;

    實(shí)際上花括號(hào)語法支持所有的表達(dá)式。

    那么問題來了，什么是表達(dá)式？

    簡(jiǎn)單來講，表達(dá)式的主要作用是計(jì)算和聲明，總是有返回值。與之相對(duì)，語句的主要作用是邏輯和動(dòng)作，沒有返回值。

    以下表達(dá)式JSX都支持。

    const a = ;

const b = ;

const c = 
    {popular ? "react" : "vue"}
    ;

const d = 
    {popular && "react"}
    ;

const e = 
    {renderSomething()}
    ;

    像賦值語句、判斷語句和循環(huán)語句JSX都不支持。

    那開發(fā)者要渲染一個(gè)列表怎么辦？

    for循環(huán)語句肯定是不行的，好在我們有map函數(shù)。因?yàn)閺纳侠覀冎溃琂SX是支持函數(shù)執(zhí)行表達(dá)式的。

    forEach函數(shù)行不行呢？不行，因?yàn)樗鼪]有返回值。也就是說，filter、find、reduce等有返回值的遍歷函數(shù)都是可以的。

    import React, { Component } from "react";

const list = ["react", "vue", "angular"];

class App extends Component {
    render() {
        return (
            
    {list.map(value => 
    {value}
    )}
    
        );
    }
}

export default App;
    編譯

    不知道你們有沒有這樣的疑問：

    為什么返回多個(gè)標(biāo)簽或組件必須要用一個(gè)標(biāo)簽或組件包裹？

    為什么在根本沒有使用React這個(gè)變量的情況下還要import React？

    這里就要講到JSX的編譯。

    因?yàn)镴SX不是正確的JavaScript語法，它要經(jīng)過編譯才能被瀏覽器識(shí)別。

    目前JSX的編譯工作是由babel來完成的。

    我們來看看編譯都做了哪些工作。

    下面的例子，后者是前者編譯后的結(jié)果。

    const app = (
    
    
        
        
    
    
);
    const app = React.createElement(
    "div",
    { className: "form" },
    React.createElement("input", { type: "text" }),
    React.createElement(
        "button",
        null,
        "click",
    ),
);

    可以看到，標(biāo)簽最后變成了一個(gè)函數(shù)執(zhí)行表達(dá)式，第一個(gè)參數(shù)是標(biāo)簽名，第二個(gè)參數(shù)是屬性集合，之后的參數(shù)都是子標(biāo)簽。

    看到這里，相信也不用我解釋了，前面提出的兩個(gè)問題恍然大悟。

    整個(gè)UI實(shí)際上是通過層層嵌套的React.createElement方法返回的，所以我們要在文件開頭import React，否則編譯后就會(huì)發(fā)現(xiàn)createElement沒有定義。

    React.createElement執(zhí)行的結(jié)果是一個(gè)對(duì)象，對(duì)象的屬性描述了標(biāo)簽或組件的性狀，對(duì)象再嵌套子對(duì)象。如果頂層返回多個(gè)標(biāo)簽，就無法表達(dá)為一個(gè)對(duì)象了。

    由于React16引入了Fiber機(jī)制，使得返回多標(biāo)簽成為可能(并不清楚原因)。

    同時(shí)也回答了為什么標(biāo)簽的class屬性和for屬性要用className屬性和htmlFor屬性代替。在標(biāo)簽里屬性怎么寫都無所謂，但是class和for是JavaScript中的關(guān)鍵字，所以要換一種寫法。

    React里面?zhèn)鬟fprops有一種寫法，如果傳遞的是一個(gè)對(duì)象，可以用擴(kuò)展運(yùn)算符很方便的傳遞。

    下面的例子，value先是被擴(kuò)展運(yùn)算符將屬性分解，然后又被一個(gè)對(duì)象包裹。這里只是做了一個(gè)淺拷貝，并沒有其他的含義。所以最終傳遞給組件的仍然是一個(gè)對(duì)象。

    所以疑問就來了，通常給組件傳遞屬性都是鍵值對(duì)的形式，直接傳遞一個(gè)對(duì)象也可以嗎？

    其實(shí)所有的屬性最后都會(huì)放到一個(gè)對(duì)象里面，所以兩種寫法殊途同歸。React只不過給了一種快捷方式。

    了解編譯的過程，很多寫法都很好理解了。

    const value = { a: 1, b: 2 };
const element = ;
    const value = { a: 1, b: 2 };
const element = ;
    React專題一覽

    什么是UI
    JSX
    可變狀態(tài)
    不可變屬性
    生命周期
    組件
    事件
    操作DOM
    抽象UI

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108351.html

    相關(guān)文章

    • React專題：什么是UI

      摘要：現(xiàn)代前端框架的使命就是開發(fā)者管理狀態(tài)，框架根據(jù)狀態(tài)自動(dòng)生成。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個(gè)人博客 獲得無與倫比的閱讀體驗(yàn) 什么是UI？ 如果你指的是布局和色彩，那更偏向于設(shè)計(jì)師的工作。 在現(xiàn)代web領(lǐng)域，大家已經(jīng)有一個(gè)共識(shí)...

      silvertheo 評(píng)論0 收藏0

    • React專題：可變狀態(tài)

      摘要：的參數(shù)既可以是一個(gè)對(duì)象，也可以是一個(gè)回調(diào)函數(shù)?；卣{(diào)函數(shù)提供了兩個(gè)參數(shù)，第一個(gè)參數(shù)就是計(jì)算過的對(duì)象，即便這時(shí)還沒有渲染，得到的依然是符合直覺的計(jì)算過的值。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個(gè)人博客 獲得無與倫比的閱讀體驗(yàn) Reac...

      hosition 評(píng)論0 收藏0

    • React專題：react，redux以及react-redux常見一些面試題

      摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。使用最常見的用法就是傳入一個(gè)對(duì)象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。 面試中問框架，經(jīng)常會(huì)問到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時(shí)卻答不上來，也是挺尷尬的，就干脆把react相關(guān)的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

      darcrand 評(píng)論0 收藏0

    • 實(shí)例講解react+react-router+redux

      摘要：而函數(shù)式編程就不一樣了，這是模仿我們?nèi)祟惖乃季S方式發(fā)明出來的。數(shù)據(jù)流在中，數(shù)據(jù)的流動(dòng)是單向的，即從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)。數(shù)據(jù)流嚴(yán)格的單向數(shù)據(jù)流是架構(gòu)的設(shè)計(jì)核心。 前言 總括： 本文采用react+redux+react-router+less+es6+webpack,以實(shí)現(xiàn)一個(gè)簡(jiǎn)易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實(shí)現(xiàn)一個(gè)完整應(yīng)用的過程。 代碼地址：Re...

      RiverLi 評(píng)論0 收藏0

    • React 328道最全面試題(持續(xù)更新)

      摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識(shí)點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請(qǐng)，我又找了20多個(gè)React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時(shí)發(fā)布在了前端面試每日3+1的React專題，希望對(duì)大家有所幫助，同時(shí)大...

      kumfo 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <