React入門0x003：jsx 和自由的組件

eechen 發布于2019-08-23 11:25 / 1396人閱讀

摘要：概述說起來，我喜歡的還是他的思想，在中，實際上沒有的區別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時候又出來說，我要把寫在中，真是煩透咯不過，這種東西不過是年一輪回，就和時尚一樣。

0x000 概述

說起來react，我喜歡的還是他的思想，在react中，實際上沒有html、css、js的區別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開始，就讓很多人感覺很難受，畢竟在這之前，我們看過的大部分關于web的書、文章，提出的最佳實踐就是html、js、css分開來，因為前端受夠了在js中拼接模板，php、java之類的后端也受夠了代碼中拼接html，所以就有了模板引擎之類的存在。但是react這時候又出來說，我要把html寫在js中，真是煩透咯！

不過，這種東西不過是50年一輪回，就和時尚一樣。當時不容許這么做是受限于技術、時代之類的，而如今可以這么做是因為時機到了！

0x001 項目初始化

$ cp 0x001-helloworld 0x003-jsx-and-component

當前項目情況

+ 0x001-helloworld
+ 0x002-jsx
+ 0x003-jsx-and-component
    + src
        - index.html
        - index.js
    - .babelrc
    - package.json
    - webpack.config.js

0x002 自由的組件

使用變量

import React from "react"
import ReactDom from "react-dom"

const p = 這是`p`

ReactDom.render(
    p,
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

說明：在這個案例中，使用了ReactDom.render方法，我們查看一下關于這個方法的文檔：

ReactDOM.render(element, container[, callback])

參數：

 `element`: `React element`，可以使用`React.createElement`創建
 `container`: 容器
 `callback`: 回調，可選

由參數1可知，我們只要提供一個React element便可，而由上一章可以知道， React.createElement可以返回一個React element，所以我們可以這么調用：

ReactDom.render(
    React.createElement(
        "h1",
        null,
        "Hello, world!"
    ),
    document.getElementById("app")
);

而jsx經過babel翻譯之后，又可以轉化成React.createElement，所以，我們可以想這樣調用：

ReactDom.render(
    Hello, world!,
    document.getElementById("app")
);

自然，將它保存成一個變量，也是可以的了，

使用方法

const div = () => 這是`div`

ReactDom.render(
    div(),
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

當然在js中的所有操作可以做到呢：

import React from "react"
import ReactDom from "react-dom"

const aP = 這是`p`

const aDiv = () => 這是`div`

const divWithChildren = (...children) => {
    const len = children.length
    return 
        一共有{len}個子組件
        {
            children.map((child, index) => {
                return 
                    這是第{index + 1}個子組件:
                    {child}
                
            })
        }
    
}

ReactDom.render(
    divWithChildren(
        aP,
        aDiv(),
        h1
    ),
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

使用組件

class AComponent extends React.Component {
    render() {
        return 
            classComponent
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

說明：這種方式和上面兩種有些不一樣，之后會詳細說來。

0x003 總結

案例一非常簡單

案例二顯得略復雜且雜亂，但是卻能夠很好的說明一點，那就是在react中，可以盡情的使用js的思想去構建一個簡單組件，而簡單組件又可以組合成復雜組件。相比于angular、vue等模板化的框架，react在構建UI方面讓我們有更多的選擇，同時也可以產生出許多非常具有突破性的思想！

案例三使用類來表示一個組件，非常符合面相對象的思想

當然，自由也帶來混亂，需要將這種自由化為思想的自由，而不是工程的自由、代碼的自由，否則將會帶來噩夢。

0x004 資源

react

transform-react-jsx

源碼

GPU云服務器云服務器組件和組件通信自由落體的小球 c 組件和服務器 jsx

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

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

React入門0x004：jsx 和數據渲染

摘要：概述在中，渲染數據的形式有多種多樣，但是萬變不離其中，都是用。當然，自由也帶來混亂，需要將這種自由化為思想的自由，而不是工程的自由代碼的自由，否則將會帶來噩夢。 0x000 概述在React中，渲染數據的形式有多種多樣，但是萬變不離其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 這是一個文本, document.getEle...

xingpingz 2019-08-23 11:27 評論0 收藏0
React入門0x005: React Component和props

摘要：概述這一章講組件，組件才是的核心，也是構建的項目中最小的單元。莫買沃洲山，時人已知處。是使用類的語法來寫，所以很多的思想可以套用到，但是一定要記得，這是，而不是資源源碼 0x000 概述這一章講組件，組件才是React的核心，也是React構建的項目中最小的單元。 0x001 組件上面的章節有一個類似下面的栗子： const App = () => { return hel...

genefy 2019-08-23 11:28 評論0 收藏0
React入門0x002: jsx

摘要：概述也是，如是說。屬性集合，比如等屬性對應，是關鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。 0x000 概述 jsx也是js，如是說。 0x001 語法在上文React入門0x001-環境配置和 helloworld中，出現了一句奇怪的代碼： Hello, world! 這在html中沒有任何問題，但問題是他出現在...

hedzr 2019-08-26 12:17 評論0 收藏0
01.react入門必備，知識點梳理，生命周期全講解

摘要：生命周期在版本中引入了機制。以后生命周期圖解不包含官方不建議使用的事件處理事件的命名采用小駝峰式，而不是純小寫。只是在兄弟節點之間必須唯一受控組件使的成為唯一數據源。 react 基礎 JSX JSX是一個 JavaScript 的語法擴展,可以很好地描述 UI 應該呈現出它應有交互的本質形式。 React DOM 在渲染所有輸入內容之前，默認會進行轉義。它可以確保在你的應用中，永遠...

Jiavan 2019-08-26 10:36 評論0 收藏0
React入門0x006: State

摘要：概述這一章講，是的核心，也算是的核心思想都很核心啊。但是接著我們又搞了一個定時器，每秒執行一直函數，將修改為最新的時間。就完成了視圖的更新。參數一是要更新的數據，我們只需要傳輸我們要更新的數據即可，對于不需要更新的數據，則不需要理睬。 0x000 概述這一章講state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 問題在上一章節的栗子...

TNFE 2019-08-23 11:29 評論0 收藏0