目录
1.什么是组件？
2.有状态和无状态组件
3.组件的封装和继承
4.高阶组件的使用
5.项目上如何合理的开发组件页面
什么是组件？
组件就是页面上的一部分，可以是一个按钮，也可以是一张图片，可以是任意的一个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>)
}
}
网友评论