react入门——实现一个输入框组件

React组件化开发初试

按照官方文档和例程博客，实现了一个简单的输入框组件。

如果想了解官方案例，请参考深入理解 React

总结一下，一个简单的React.js应用应按照以下步骤构建：

1. 设计组件原型和JSON API；
2. 拆分用户界面为一个组件树；
3. 利用React， 创建应用的一个静态版本；
4. 识别出最小的（但是完整的）代表UI的state；
5. 确认state的生命周期；
6. 添加反向数据流。

个人认为这里的难点在于如何拆分用户界面，粒度过大不利于组件化的重用，粒度过小的话，显得冗余过多，并且复杂度陡升。本人最开始尝试细化的拆分，尽量让一个组件只完成一个很小的功能需求，但最后反而不知道如何给每个组件分配其任务。

另一个难点来源于对state的判断，其实如果能够识别出最小的state，读者会发现一个复杂的组件所需的state数量其实很少。

在React.js中，有两种数据模型，state代表的是会动态变化的状态，props代表的是父级传递而来的属性，state会反过来更新UI，而props只是一次性设置填充。

第一步：构建原型

我们的组件要完成以下功能：

1. 可以定制label和输入框的placeholder的内容
2. 可以有个属性设置个正则，输入的文字不符合正则的时候输入框就标红
3. 右侧的大叉icon点击后，消失并清楚输入框内容
4. 组件需要开放3个对外方法，获取（获取值时trim），设置（设置值时trim），删除，输入框的内容。

原型比较简单，样式如下：

JSON接口数据如下：

{ 
labelText: "酒店地址",
hinderText: "请填写酒店地址",
buttonImgSrc:
regExp: /^\w{
  5,8}$/
}

我们通过JSON数据设置输入框组件的label标签、Input的placeholder属性和对用户输入的正则验证。

第二步：拆分用户界面为一个组件树

在完成用户界面切分的过程中，最开始，如图原型图所示，做了非常细粒度的拆分，拆分结构如下：

• LimitedInputBox
  
  • Title
  • InputBox
  • ClearButton

这里，将LimitedInputBox作为最外面的容器，包裹整个组件，子组件分为三部分，Title即是一个label标签，用来显示该输入框组件的名称（或者说标题），InputBox即是一个input标签，用来接收用户输入，ClearButton可以用一个img标签，用来清除input输入框内容。刚开始准备用另外一个容器包裹InputBox和ClearButton，发现这样过于冗余于是两者还是和Title作为同一级组件比较好。

后来思来，觉得过于拆分了，最小单位与HTML原生标签同一级别，没有意义，因此，最后只保留了一个组件，就称之为LimitedInputBox。即：

• LimitedInputBox

第三步：利用React， 创建应用的一个静态版本

首先，不需要考虑用户交互，直接将数据模型渲染到UI上。即将数据渲染和用户交互两个过程拆分开来。

这样做比较简单，因为构建静态版本的页面只需要大量的输入，而不需要思考；但是添加交互功能却需要大量的思考和少量的输入。

为了创建一个渲染数据模型的应用的静态版本，你将会构造一些组件，这些组件重用其它组件，并且通过 props 传递数据。 props 是一种从父级向子级传递数据的方式。

本例中，的props就是第一步构建的JSON数据。

考虑到第二步中我采取了两种拆分方式，这里给出相应的代码：

/** author : River He**/

//细分结构
var data = {
    labelText: "酒店地址",
    hinderText: "请填写酒店地址",
    buttonImgSrc: "eliminate.png",
    regExp: /^\w{
  5,8}$/
};

var Title = React.creatClass({
    render: function() {
   
    return (
        <label>{
  this.props.labelText}</label>
    );
  }
});

var InputBox = React.createClass({
    render: function() {
   
  return (
    <input 
        placeholder={
  this.props.hinderText} 
        regExp={
  this.props.regExp}>
    </input>
  );
  }
});

var ClearButton = React.createClass({
    render: function() {
   
    return (
        <img src={
  this.props.buttonImgSrc}></>
    );
  }
});

var LimitedInputBox = React.createClass({
    render: function() {
   
    return (
        <Title labelText={
  this.props.data.labelText} />
      <InputBox 
        hinderText={
  this.props.data.hinderText}
        regExp={
  this.props.data.regExp}
      />
      <ClearButton buttonImgSrc={
  this.props.data.buttonImgSrc} />
    );
  }
});

ReactDOM.render(
    <LimitedInputBox data={data} />,
  document.getElementById('example')
);