React專題：JSX

YorkChen 發布于2019-08-26 12:15 / 3011人閱讀

摘要：與之相對，語句的主要作用是邏輯和動作，沒有返回值。函數行不行呢不行，因為它沒有返回值。也就是說，等有返回值的遍歷函數都是可以的。

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

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

因為它的入門門檻極低。

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

很多年前，這種字符串拼接開發網頁的方式非常流行。

但是這種寫法有兩個問題：

容易造成XSS注入，有極大的安全風險。

拼接的寫法很繁瑣。

于是facebook的工程師開始動歪腦筋了。

XHP

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

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

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

于是人們想到的辦法是對所有輸入轉義，轉義的作用就是讓所有標簽無法被識別為標簽，而只是標簽寫法的字符串。用戶的輸入就會原原本本的展示在頁面上。

但是輸入轉義也有問題，就是容易把字符串拼接的標簽也給轉義了。大家應該看過頁面上大段大段的標簽寫法的文本吧。

我們來看看XHP的寫法。


        {$post}
        Hey there.
        Like

;

誒，是不是有點眼熟？

XHP把標簽與字符串區別開來了，變成腳本語法的一部分。

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

標簽就是標簽，字符串就是字符串，再也別想渾水摸魚。

像寫腳本一樣寫標簽，是不是爽多了？

JSX

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

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

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

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

const element = Hello React!
;

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

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

然而經過大量痛苦的實踐，人們發現以內容為最小顆粒才是正解。以組件為單位，頁面結構、樣式和功能都被集成在組件內部，對開發者來說組件就是一個黑匣子，只能通過暴露出來的接口使用組件。這是一種封裝的思想，目的當然是為了復用。

當然，目前React還無法實現真正意義上的CSS封裝，不過以當下前端的關注度，CSS被徹底招安也指日可待。

語法

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

組件，其實就是自定義標簽，首字母必須大寫，為了與原生標簽區別開來。

如果標簽或組件沒有包含內容，可以采用自閉合標簽寫法。

const element = ;

JSX會自動忽略false、null和undefined。

標簽的class屬性和for屬性要用className屬性和htmlFor屬性代替。

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

但是，React16以上的版本支持用空標簽包裹或者直接返回數組。這樣的好處就是不必添加很多無用的標簽使頁面變得更加臃腫。

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;

表達式

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

怎么寫變量呢？用花括號包圍。

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

如果我想插入一個對象字面量怎么辦？

很簡單，再包裹一層花括號。

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

實際上花括號語法支持所有的表達式。

那么問題來了，什么是表達式？

簡單來講，表達式的主要作用是計算和聲明，總是有返回值。與之相對，語句的主要作用是邏輯和動作，沒有返回值。

以下表達式JSX都支持。

const a = ;

const b = ;

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

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

const e = {renderSomething()}
;

像賦值語句、判斷語句和循環語句JSX都不支持。

那開發者要渲染一個列表怎么辦？

for循環語句肯定是不行的，好在我們有map函數。因為從上例我們知道，JSX是支持函數執行表達式的。

forEach函數行不行呢？不行，因為它沒有返回值。也就是說，filter、find、reduce等有返回值的遍歷函數都是可以的。

import React, { Component } from "react";

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

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

export default App;

編譯

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

為什么返回多個標簽或組件必須要用一個標簽或組件包裹？

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

這里就要講到JSX的編譯。

因為JSX不是正確的JavaScript語法，它要經過編譯才能被瀏覽器識別。

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

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

下面的例子，后者是前者編譯后的結果。

const app = (
    
        
        
    
);

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

可以看到，標簽最后變成了一個函數執行表達式，第一個參數是標簽名，第二個參數是屬性集合，之后的參數都是子標簽。

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

整個UI實際上是通過層層嵌套的React.createElement方法返回的，所以我們要在文件開頭import React，否則編譯后就會發現createElement沒有定義。

React.createElement執行的結果是一個對象，對象的屬性描述了標簽或組件的性狀，對象再嵌套子對象。如果頂層返回多個標簽，就無法表達為一個對象了。

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

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

React里面傳遞props有一種寫法，如果傳遞的是一個對象，可以用擴展運算符很方便的傳遞。

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

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

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

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

const value = { a: 1, b: 2 };
const element = ;

const value = { a: 1, b: 2 };
const element = ;

React專題一覽

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108351.html

React專題：什么是UI

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

silvertheo 2019-08-26 12:14 評論0 收藏0
React專題：可變狀態

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

hosition 2019-08-26 12:17 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

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

darcrand 2019-08-23 13:41 評論0 收藏0
實例講解react+react-router+redux

摘要：而函數式編程就不一樣了，這是模仿我們人類的思維方式發明出來的。數據流在中，數據的流動是單向的，即從父節點傳遞到子節點。數據流嚴格的單向數據流是架構的設計核心。前言總括：本文采用react+redux+react-router+less+es6+webpack,以實現一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現一個完整應用的過程。代碼地址：Re...

RiverLi 2019-08-21 11:20 評論0 收藏0
React 328道最全面試題(持續更新)

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

kumfo 2019-08-26 10:13 評論0 收藏0