React: React組件創建的三種方式

一、簡介

在前面介紹的React組件知識中，對於組件的創建我只是用了其中某一種方式。其實，在2013年React誕生之初，對於React組件的創建，僅僅只有一種方式，也即createClass函數，在目前項目中使用率還是很高的。但隨着后來技術更新，React組件創建的方式也在不斷的變化和過時。到目前為止，大概有3種方式。分別是createClass、ES6的類組件、無狀態函數式組件。

 

二、詳解

方式一：React.CreateClass

1、復用性差：

<div id="container"></div>
<script type="text/babel">

    //創建菜單組件
    const menuList = React.createClass({
        render() {
            return React.createElement("ol", {"className": "menus"},
                React.createElement("li", null, "beef"),
                React.createElement("li", null, "pork"),
                React.createElement("li", null, "Lamb"),
                React.createElement("li", null, "fish"),
                React.createElement("li", null, "chicken")
            )
        }
    });

    //創建組件節點
    const list = React.createElement(menuList, null, null)

    //渲染掛載組件
    ReactDOM.render(
        list,
        document.getElementById("container")
    )

</script>

2、復用性強：

<div id="container"></div>
<script type="text/babel">

    //創建菜單組件
    const menuList = React.createClass({
        render() {
            return React.createElement("ol", {"className": "menus"},
                this.props.items.map(
                    (item, i) => React.createElement("li", {key:i}, item) //給每一項屬性添加key，保證數據的唯一性
                )
            )
        }
    });
//創建菜單元素
    const items = [
        "beef",
        "pork",
        "Lamb",
        "fish",
        "chicken"
    ]

    //創建組件節點
    const list = React.createElement(menuList, {items}, null)

    //渲染組件
    ReactDOM.render(
        list,
        document.getElementById("container")
    )

</script>  

方式二：ES6的類組件(一般寫js中，作為導出組件使用)

<div id="container"></div>
<script type="text/babel">

    //創建菜單組件類
    class MenuList extends React.Component {

         render() {

             //對items進行解構賦值，作用域本地化
             let {items} = this.props
                
             return React.createElement("ol",{"className": "menus"},
                 items.map((item, i) =>
                     React.createElement("li", {key:i}, item)
                 )
             )
         }
     }

     //定義數組
     const menuItems = ["pork", "fish", "chicken", "Lamb", "beef"]

     //渲染組件
     ReactDOM.render(
         React.createElement(MenuList,{items: menuItems},null),
         document.getElementById("container")
     )

</script>

 

方式三：無狀態函數式組件

它是純函數而不是組件，因此，它沒有this作用域。無狀態函數式組件可以接收屬性然后返回一個DOM元素，它是實踐函數式編程范式的好方法。

<div id="container"></div>
<script type="text/babel">

    //創建菜單組件(通過函數)
    
    //未優化：該函數通過參數props收集數據，然后根據獲得的數據為每一個元素返回一個有序列表
    /*
　　 const menuList = props => {
    　  return React.createElement('ol', {"className": "nemus"},
        　　props.items.map( (item, i) => React.createElement("li", {key:i}, item))
        ) 
    }　　
    */
    
    //優化后：這里使用了屬性參數解構，將列表屬性作用域直接限制在函數內部，減少了點標記符號的使用
    const menuList = ({items}) => {
        return  React.createElement("ol",{"className": "menus"},
            items.map( (item,i) => React.createElement("li", {key:i}, item))
        )
    }

    //創建菜單元素
    const items = ["pork","fish","chicken","Lamb","beef"]

    //創建組件節點
    const list = menuList({items})

    //渲染組件
    ReactDOM.render(
        list,
        document.getElementById("container")
    )

</script>    

 

 

四、組件工廠類

在組件中元素的創建方式基本上都是通過React.createElement。 其實，還有另外一種創建方式就是工廠類（Factory）。工廠類是一種特殊的對象，可以將實例化對象的細節封裝起來，React內置的工廠類可以為所有的HTML元素提供支持。用戶可以使用React.createFactory為組件創建自定義工廠類，從而達到簡化代碼的目的。

使用系統工廠類創建元素節點：

//React.DOM.li(null, "pork") ： 第一個參數為元素屬性、第二個參數為子節點
<li>pork</li>  <=>  React.DOM.li(null, "pork") 

使用自定義組件工廠類創建組件：

<div id="container"></div>
<script type="text/babel">

    //解構
    const {render} = ReactDOM

    const MenuList = ({items}) =>
        React.DOM.ol({"className": "menus"},
                items.map( (item, i) =>
                React.DOM.li({key:i}, item)
            )
        )

    //創建工廠類
    const MenuListFactory = React.createFactory(MenuList)

    //創建菜單元素
    const items = ["p_pork","f_fish","c_chicken","l_lamb","b_beef"]

    //渲染組件
    render(
        MenuListFactory({items}),
        document.getElementById("container")
    )

</script>

 

五、簡化

在上面介紹的React組件創建過程中，不論是使用React.createElement創建元素，還是使用系統工廠類Factory創建元素，都顯得不夠直接。Facebook團隊在React中引入了JSX語法糖來聲明元素標簽，可以創建復雜的DOM樹過程簡單化，而且開發者可以很直觀的梳理DOM樹結構。具體實現，在之前的幾篇文章都有講解，此處就不介紹了。請看這里：https://www.cnblogs.com/XYQ-208910/p/11913238.html。