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

为什么需要组件化？

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实战-为什么需要组件化（1）

彬哥头发多

引用和评论

vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

一些react使用小技巧（上）

一些react使用小技巧（中）

Vue.js-方法与事件

深入浅出React中的refs

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

web每日一题（不断更新中）