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。