可复用组件而不是可复用函数

在刚开始写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的建议是越小越好，每个小组件都保证独立与可重用。就像拼积木一样，在业务变更时，我们可以很快的迭代和开发。

可复用组件而不是可复用函数

Functional

推荐阅读更多精彩内容