在刚开始写js的时候，如果某个js函数代码量很大，我们会进行拆分，将其划分成多个细化的功能块。
就像这样
button[0].onclick = function () {
cleanInputValue()
// ...
}
button[1].onclick = function () {
cleanInputValue()
// ...
}
function cleanInputValue() {
//....
}
细分功能块可以避免代码重复，也能够让代码逻辑更加清晰，更加容易扩展，修改错误更容易。
把代码细分之后也可以省去很多注释，将来代码需要更改，也可以减少代码更改量
在react的开发中，我们会引入组件的概念。组件允许我们将用户界面拆分为独立的、可重用的一部分，组件其实有些像js中的function。我们通过对组件进行拆分，实现组件化开发。针对不同的业务场景我们可以引用相应的组件，减少了开发量。
微票电影票房分析
我们把微票电影票房分析的首页进行组件化拆分后如上图所示。其中DateChoose组件和Footer组件在很多页面都会用到，我们可以把这两个组件放到单独的common文件夹中。供其他页面调用
公用组件
而Movie组件在本页面会被用到很多次，我们也会把Movie组件单独拆分出来，作为一个可复用组件。
但是在如何定义一个组件时，我们经常会写出不太好的代码
就像这样
export default class Home extends Page {
// ...
renderMovie(movieName) {
//...
return (
<div>{movieName}</div>
)
}
render() {
let movieName1 = '奇异博士'
let movieName2 = '蜡笔小新'
return(
<div>...</div>
<div>{renderMovie(this, movieName1)}</div>
<div>{renderMovie(this, movieName2)}</div>
<div>...</div>
)
}
}
这样当然也没什么问题，但我们很难把renderMovie称为一个组件，他更像一个复用函数而不是一个复用组件。实际上，这个复用函数只是在jsx语法的帮助下，实现了组件的作用。
这种方法不符合组件化思想，而且renderMovie没办法进行参数校验，我们无法保证传入数据的有效性。
Functional
在react中定义组件最简单的做法是使用Functional。
export default class Home extends Page {
// ...
render() {
return(
<div>...</div>
<Movie name='奇异博士' />
<Movie name='蜡笔小新' />
<div>...</div>
)
}
}
funtion Movie(props) {
//...
return (
<div>{props.name}</div>
)
}
Movie.propTypes = {
name: React.PropTypes.string.isRequired,
}
为了保证组件被正确使用，为此我们引入 propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
另外根据条件渲染组件的时，我们可以把条件值通过props传入组件内部。
export default class Home extends Page {
// ...
render() {
let status = xxx
return(
<div>...</div>
<Movie name='奇异博士' />
<Movie name='蜡笔小新' status={status} />
}
<div>...</div>
)
}
}
funtion Movie(props) {
//...
if (!props.status) {
return null
}
return (
<div>{props.name}</div>
)
}
Movie.propTypes = {
name: React.PropTypes.string.isRequired,
}
使用这种方法代码会更优雅一些。
至于把组件拆分到什么情况下才可以，react的建议是越小越好，每个小组件都保证独立与可重用。就像拼积木一样，在业务变更时，我们可以很快的迭代和开发。
网友评论