React实战-为什么需要组件化（1）

头像
彬哥头发多
    阅读 9 分钟
    4

    为什么需要组件化？

    1.web的发展因为HTML CSS Javascript分工造成了协作，所以需要标准和接口，所以需要组件化。

    2.追求效率，重复使用。

    怎么实现复用？

    我们总不能把同事的代码拷贝过来，拷贝css，拷贝js，最后改里面文字。这样也忒费劲了，而且不可持续化。接下来我们就说下怎么组件化。我们先不用react。先说原生。

    为什么说原生。

    1.简单。

    2.我们能够从原生js中真的会用react组件化，不懂原理只会react组件化语法，遇到实际项目也棘手。

    1.我们遇到这么一个实际问题。

    你同事写了一个星星评分，你想复用，原始代码如下，怎么办？我们这里简化一下，说五个星星部分。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星星评分</title>
    <style type="text/css">
        .starbox span {
            width: 27px;
            height: 28px;
            display: inline-block;
            background: url(images/star.gif) no-repeat 0px 0px;
            cursor: pointer;
            float: left;
        }

        .starbox strong {
            float: left;
            padding-top: 6px;
            padding-left: 10px;
        }
        .starbox .on {
            background-position: 0px -29px;
        }
    </style>
    <script>
        window.onload = function(){
            var aStar = document.querySelectorAll('.starbox span');
            var oS = document.querySelector('.starbox .score');
            for(let i =0;i<aStar.length;i++){
                aStar[i].onclick = function(){
                    for(let j =0;j<aStar.length;j++){
                        aStar[j].className = '';
                    }
                    for(let j =0;j<=i;j++){
                        aStar[j].className = 'on'; 
                    }
                    oS.innerHTML = (i+1)+'分';
                };
            }
        };
    </script>
</head>
<body>
    <div class='starbox'>
        <span data-index="0"></span>
        <span data-index="1"></span>
        <span data-index="2"></span>
        <span data-index="3"></span>
        <span data-index="4"></span>
        <strong class='score'>0分</strong>
    </div>
</body>
</html>

    2.组件化结构

    我们先让这个组件能够显示我们的html结构跟样式。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .starbox span {
            width: 27px;
            height: 28px;
            display: inline-block;
            background: url(images/star.gif) no-repeat 0px 0px;
            cursor: pointer;
            float: left;
        }

        .starbox strong {
            float: left;
            padding-top: 6px;
            padding-left: 10px;
        }

        .starbox .on {
            background-position: 0px -29px;
        }
    </style>
    <script>
        window.onload = function () {
            //2.但是没有，所以我们搞一个 Class
            class RatingStar {
                //  render专门用来决定显示什么东西的
                render() {
                    return `
                        <div class='starbox'>
                            <span data-index="0"></span>
                            <span data-index="1"></span>
                            <span data-index="2"></span>
                            <span data-index="3"></span>
                            <span data-index="4"></span>
                            <strong class='score'>0分</strong>
                        </div>
                    `;
                }
            }
            var oBox = document.getElementById('box');
            //1.假设有一个Class RatingStar  它就是一个组件，包含所有组件信息
            var oStar = new RatingStar();
            oBox.innerHTML = oStar.render();

        };
    </script>
</head>

<body>
    <div id="box">
    </div>
</body>

</html>

    我们先按照注释思路走，但是有个问题：事件不好用。

    return `
    <div class='starbox'>
        <span data-index="0"></span>
        <span data-index="1"></span>
        <span data-index="2"></span>
        <span data-index="3"></span>
        <span data-index="4"></span>
        <strong class='score'>0分</strong>
    </div>
`;

    因为上面是return的字符串不好加事件，我们直接在外面包一层div，再添加事件。

    3.添加事件

    外面包一个div。

    //创建一个元素
const createDOMFromString = (domString) => {
  const div = document.createElement('div')
  div.innerHTML = domString
  return div
}

    我们现在到原来的例子里面加事件。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .starbox span {
            width: 27px;
            height: 28px;
            display: inline-block;
            background: url(images/star.gif) no-repeat 0px 0px;
            cursor: pointer;
            float: left;
        }
        .starbox strong {
            float: left;
            padding-top: 6px;
            padding-left: 10px;
        }
        .starbox .on {
            background-position: 0px -29px;
        }
    </style>
    <script>
        window.onload = function () {
            const createDOMFromString = (domString) => {
                const div = document.createElement('div')
                div.innerHTML = domString
                return div;
            }
            class RatingStar {
                //  render专门用来决定显示什么东西的
                render() {
                    this.el = createDOMFromString(`
                        <div class='starbox'>
                            <span data-index="0"></span>
                            <span data-index="1"></span>
                            <span data-index="2"></span>
                            <span data-index="3"></span>
                            <span data-index="4"></span>
                            <strong class='score'>0分</strong>
                        </div>
                    `);
                    this.el.addEventListener('click', ()=>{
                        console.log(this);
                    }, false);
                    return this.el;
                }
            }
            var oBox = document.getElementById('box');
            var oStar = new RatingStar();
            oBox.appendChild(oStar.render());
        };
    </script>
</head>
<body>
    <div id="box">
    </div>
</body>

</html>

    重点是加事件

    this.el.addEventListener('click', ()=>{
     console.log(this);
}, false)

    4.添加数据与逻辑

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .starbox span {
            float: left;
            width: 27px;
            height: 28px;
            display: inline-block;
            background: url(images/star.gif) no-repeat 0px 0px;
            cursor: pointer;
        }
        .starbox strong {
            float: left;
            padding-top: 6px;
            padding-left: 10px;
        }
        .starbox .on {
            background-position: 0px -29px;
        }
    </style>
    <script>
        window.onload = function () {
            const createDOMFromString = (domString) => {
                const div = document.createElement('div')
                div.innerHTML = domString
                return div;
            }
            class RatingStar {
                constructor() {
                    this.state = { score: 0 }
                }
                changeScore(ev) {
                    const aStar = document.querySelectorAll('.starbox span');
                    const oS = document.querySelector('.starbox .score');

                    this.state.score = Number(ev.target.dataset.index) + 1;
                    for (let i = 0; i < aStar.length; i++) {
                        aStar[i].className = '';
                    }
                    for (let i = 0; i <= Number(ev.target.dataset.index); i++) {
                        aStar[i].className = 'on';
                    }
                    oS.innerHTML = this.state.score + '分';
                }
                //  render专门用来决定显示什么东西的
                render() {
                    this.el = createDOMFromString(`
                        <div class='starbox'>
                            <span data-index="0"></span>
                            <span data-index="1"></span>
                            <span data-index="2"></span>
                            <span data-index="3"></span>
                            <span data-index="4"></span>
                            <strong class='score'>0分</strong>
                        </div>
                    `);
                    this.el.addEventListener('click', this.changeScore.bind(this), false);
                    return this.el;
                }
            }
            var oBox = document.getElementById('box');
            var oStar = new RatingStar();
            oBox.appendChild(oStar.render());
        };
    </script>
</head>

<body>
    <div id="box">

    </div>
</body>

</html>

    注意，请不要陷入细节：

    this.el.addEventListener('click', this.changeScore.bind(this), false);

    先注意明白这里调用了changeScore就行了，先别考虑什么矫正this，或者事件对象什么的，我们先了解react原理。

    这里修改DOM方法很暴力，react是用virtualDOM 和diff算法优化了这块， 现在我们实现了组件化。

    总结：

    1.我们从实际问题出发，用class封装了一个初始的类。

    2.添加事件；

    3.我们在事件里面加了具体逻辑，虽然数据和DOM操作一起写，但是完成了组件化。

    下一篇我们就组件化与复用进行优化。

    react组件化前端框架
    彬哥头发多
    4.3k 声望1.4k 粉丝

    一个会写代码的职业规划师，2本职业规划书作者。争取未来1年帮100个朋友薪资上涨50%。

    « 上一篇
    React实战—为什么会出现React（0）
    下一篇 »
    React实战—学习必经之路-JSX语法（2）

    引用和评论

    推荐阅读
    头像
    vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

    彬哥头发多赞 2阅读 3.4k评论 1

    头像
    一些react使用小技巧（上）

    夕水赞 10阅读 1.4k

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 1.5k评论 5

    头像
    一些react使用小技巧（下）

    夕水赞 5阅读 1.6k评论 6

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.3k

    头像
    深入浅出React中的refs

    夕水赞 3阅读 1.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 570评论 1

    0 条评论
    得票最新