谈一谈我对react中组件的理解

什么是组件？

组件就是页面上的一部分，可以是一个按钮，也可以是一张图片，可以是任意的一个html元素。

有状态和无状态组件

1.有状态组件`stateful`

顾名思义，这种组件存在自己的state，可以控制内部状态变化，也会有props，个人一般用于处理业务型模块。

class StatefulButton extends React.Component {
    state = {
        loading: false
    }

    _onClick = () => {
        this.setState({ loading: true })
        // to do something...
    }

    render() {
        const { title } = this.props
        if (this.state.loading) {
            return <span className="loading"></span>
        }
        return (<button onClick={() => { this._onClick() }}>{title}</button>)
    }
}

2.无状态组件`stateless`

所有状态通过props来控制，只提供元素、结构，常用于公用的模块。

class StatelessButton extends React.Component {
    render() {
        const { loading, title, onClick } = this.props
        if (loading) {
            return (<span className="loading"></span>)
        }
        return (<button onClick={() => { onClick() }}>{title}</button>)
    }
}

组件的封装和继承

先说一下组件的封装，个人理解是独立一个组件出来，单独处理它的元素、结构、逻辑，通过create各种props去完善组件内部的状态变化，以达到通用的效果。
比如，创建一个输入框组件，有默认状态，支持自定义输入框外部样式、placeholder等

class Input extends React.Component {
    static defaultProps = {
        placeholder: '请输入内容',
        type: 'text',
        // ... ...
    }

    _onChange = (e) => {
        // to do something...
    }

    render() {
        return (<input onChange={(e) => { this._onChange(e) }} {...this.props}></input>)
    }
}

当遇到其他场景，比如需要在输入框前面添加修饰内容时，可以进行调整

class Input extends React.Component {
    render() {
        const { sideNode } = this.props

        if (sideNode) {
            return (<span>{sideNode}<input {...this.props}></input></span>)
        }
        return (<input {...this.props}></input>)
    }
}

再来说一下组件的类继承extends，创建一个类，该类是另一个类的子类，子类继承了父类所拥有的状态和函数。

// 基本组件
class ProvideBox extends React.Component {
  state = {
    color: 'red'
  }

  handleClick = () => {
    this.setState({color: 'blue'})
  }
}

// 页面组件
class Box extends ProvideBox {
  render() {
    return (
      <button onClick={this.handleClick}>
        <span style={{color: this.state.color}}></span>
      </button>
    )
  }
}

继承的过程：
1.继承父类的原型，通过Object.create，第一个参数是创建一个对象的原型，定义原型上的属性constructor指向subclass；把父类的原型方法继承给子类原型

function inherits(subClass, superClass) {
   subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
       value: subClass,
       enumerable: false,
       writable: true,
       configurable: true
     }
   });
   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
 }

2.call继承，就是super()的处理过程，super()的实质就是call(this);把父类的对象方法继承给子类对象；这也是为什么在es6的继承时必须要加上super()，因为不加的话无法继承到父类的对象属性。

function _possibleConstructorReturn(self, call) { 
   //call指的是Object.getPrototypeOf(lily)).call(this)，也就是People.call(this)
   return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

3.创建子类自己的方法（参考es6 class原理，这里不过多描述了）

高阶组件的使用

高阶组件HOC：Higher-Order Components就是一个函数，能够接收一个组件并返回一个新的组件

const ProvideBox = (Component) => class extends React.Component {
    render() {
        return (<div>
            <header>标题</header>
            <Component {...this.props} />
            <footer>底部</footer>
        </div>)
    }
}

使用

class Box extends React.Component{
    //...
    render() {
        return (<div>内容</div>)
    }
}
export default ProvideBox(Box)

项目上如何合理的开发组件页面

个人认为写页面其实就是在盖房子，你需要事先准备好：水泥、砖块、钢筋等，在code page时，你也需要准备好组件轮子，为了让每个组件复用性更大，需要将组件封装的更小，小到一个标题、一个表格、一个元素，这样在编写页面的时候你只需要注重布局，剩下的只管填充组件即可。

class Page extends React.Component {
    render() {
        return (<div>
            {/* 左侧导航 */}
            <SideNav />
            {/* 右侧内容 */}
            <div>
                {/* 头部 */}
                <Header />
                {/* 内容 */}
                <div>
                    {/* 标题 */}
                    <Title />
                    {/* 表格 */}
                    <Table / >
                    ... ...
                </div>
                {/* 尾部 */}
                <Footer />
            </div>
        </div>)
    }
}