1-5、React初探组件化开发，高内聚低耦合

文章系列

1-1、React环境搭建，以及初识jsx语法。
1-2、React熟悉，jsx语法以及变量绑定和三种渲染语句
1-3、React绑定属性和事件，以及事件的响应。
1-4、React中form表单下的input框初使用以及列表渲染

大家好，我是Counterrr
不忘初心，砥砺前行

本文目录

一、组件化开发

1、组件化开发:

这节内容只讲组件化开发，就是采用组件化开发的思想，好处组件可以去复用，将前面我们只用jsx版本做的小项目给重构下，当然组件之间的传值，我们放在下一节来介绍，先不急，先把组件化开发的思想给了解下，这是很关键的，实际的项目都是采用组件化开发的。
在上节我们最后写了一个随机选择语言学习的小项目，不过都是将所有的东西写在了一个jsx语法里，这就必然导致了，每块代码与代码之间关联性比较强，即耦合性比较强，我们开发讲究高内聚、低耦合，那这样开发有什么好处呢，模块与模块之间代码关联性降低，利于维护。在上节我们做的小项目如下所示：

我们看这个网页可以将各个功能当做一个个的模块来进行引入，可以大致画为如下所示结构图：

接下来我们就要去先定义一个头部组件，那么在react怎么去定义一个组件呢？代码如下：

let obj = {
    "title": "今天学习什么语言？",
    "des": "大家好，我是Counterrr",
    "tips": "不忘初心，砥砺前行",
    "languages": []
}

class Header extends React.Component {
	render () {
		return <header>
            <div>{obj.title}</div>
            <div>{obj.des}</div>
            <div>{obj.tips}</div>
        </header>
	}
}

class作为es6的类的关键词，可以去创建一个类，那这个类只是一个普通的类，我们可以使用extends关键词去继承React.Component这个父类，那么它就会去创建我们这样的一个React组件，那么在我们的Header组件中必须要有一个render函数return一个jsx语法去生成我们需要渲染的模板。那么这个组件就已经创建完了，是不是很简单。还有一个需要注意的点是，组件的命名，我们组件的命名最好首字母大写，为了防止与原生的html标签冲突。
那么现在我们来看看我们创建的React这个组件要怎么去使用，使用组件的话很简单，我们将src文件夹下的app.js写成如下：

let obj = {
    "title": "今天学习什么语言？",
    "des": "大家好，我是Counterrr",
    "tips": "不忘初心，砥砺前行",
    "languages": []
}
class Header extends React.Component {
	render () {
		return <header>
                <div>{obj.title}</div>
                <div>{obj.des}</div>
                <div>{obj.tips}</div>
            </header>
	}
}
const template = (
    <div>
        <Header/>
    </div>
)

ReactDOM.render(template, document.getElementById('app'))

可以看到我们也是定义了一个常量，在里面写了jsx语法，并且将我们定义的Header组件采用标签闭合的形式写入，然后再采用ReactDOM.render( )的方法将模板渲染上id为app的元素上，此时我们可以看到页面如下：

跟我们之前写的头部一样。
好的将我们之前的小项目进行重构代码如下：

let obj = {
    "title": "今天学习什么语言？",
    "des": "大家好，我是Counterrr",
    "tips": "不忘初心，砥砺前行",
    "languages": []
}
class MySelectLanApp extends React.Component {
    render () {
        return <div>
            <Header></Header>
            <main>
                <ButtonActive></ButtonActive>
                <AddLang></AddLang>
                <Options></Options>
            </main>
        </div>
    }
}
class Header extends React.Component {
	render () {
		return <header>
                <div>{obj.title}</div>
                <div>{obj.des}</div>
                <div>{obj.tips}</div>
            </header>
	}
}
class ButtonActive extends React.Component {
    render () {
        return <div>
                <button>清除</button>
                <button>选择学习的语言</button>
            </div>
    }
}
class AddLang extends React.Component {
    render () {
        return  <form>
                    <div>
                        <input type="text" name="languages"></input>
                        <button>添加语言</button>
                    </div>
                </form>
    }
}
class Options extends React.Component {
    render () {
        return <ul>
                <Option/>
            </ul>
    }
}
class Option extends React.Component {
    render () {
        return <li>react</li>
    }
}

ReactDOM.render(<MySelectLanApp/>, document.getElementById('app'))

我们发现我们一共定义了6个组件，MySelectLanApp 为最外层我的随机学习语言组件，它里面有4个组件：头部组件Header、按钮组件ButtonActive、语言添加组件AddLang、选项组件父组件Options。其中选项组件父组件Options中还有一个子组件各个选择组件Option。

我们可以看到在一个组件中嵌套一个子组件写法为直接将定义好的类当成标签写入进去，我们在ReactDOM.render( )渲染的时候直接去渲染最外层的我的随机学习组件，那么它就会去找里面嵌套的各个子组件去渲染，最后我们看到的页面如下：

此时我们已经完成了网页组件化重构，下节我们讲讲组件之间的传值。