原由:写这篇文章主要是为了增强自己的记忆,同时也是为了分享一下我们常用的创建组建的方法,主要是四种(createClass, component, PureComponet,Stateless Functional Component)
,启发来自于不知的博客呀,有兴趣的人可以去看看他的博客!
叙述: 我们在用react
的时候考虑最多的其实就是如何策划组建的划分,组建的嵌套,能够做到更省时、省力。做过了一个react
的项目,目前依旧在继续,一上来我们就使用了es6
的语法堂,用component
来,仔细看过官方文档后,发现不用es6语法的同时只能使用createClass
。在写组建的同时我们也都会说到这两个词语,状态组建和pure
组建(纯函数)。今天就来大概介绍一下各自的特点:
一、createClass
var React = require("react");
var FirstComponent = React.createClass({
propTypes: {
name: React.PropTypes.string
//属性校验 (string, number, bool, func, array, object...... )
},
getDefaultProps: function() {
return {
name: 'Mary'
};
// 初始化props
},
getInitialState: function() {
return {count: this.props.initialCount};
//初始化props
},
handleClick: function() {
//.....
},
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
module.exports = FirstComponent;
这种方式下,组件的
props、state
等都是以对象object
属性的方式组合在一起,在createClass
中,React
对属性中的所有函数都进行了this
绑定,也就是如上面的hanleClick
其实相当于handleClick.bind(this)
。
二、component es6语法堂
import React from 'react';
class FirstComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
count: props.initialCount
};
}
static propTypes = {
name: React.PropTypes.string
}
statice props = {
name: 'Mary'
}
handleClick() {
//点击事件的处理函数
}
render() {
return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
}
}
export default FirstComponent;
这段代码指定了
FirstComponent
继承extends React.Component
的属性,通过constructor
来构函数,初始化state,this
的绑定也在这里面进行,因为这种方式react
并没有对this
进行绑定,所有需要手动输入绑定。这种方法创建组建因为继承了component
的属性,因此这里面可以写react
的所有生命周期函数,例如componentDidMount
等系列,并在函数内容通过this.state
来改变状态state
,dom
就会随即刷新,也可以手动静止更新,具体的细节是在某个生命周期中进行,具体的可以看看我的这篇文章
三、PureComponet
上面的方法中都不是纯函数的构造,因为state
是可以在内容起到作用的,内容就可以控制是否重新渲染状态。
而这种方法我也很少用过,看过很多文章才明白!其实大多数情况下我们也很难用到这样的方式,在官网的位置都不是很起眼,所以就大概复述一下-不知-博客的内容吧!
class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: 1};
}
render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + 1}))}>
Count: {this.state.count}
</button>
);
}
}
大多数情况下, 我们使用
PureComponent
能够简化我们的代码,并且提高性能,但是PureComponent的自动为我们添加的shouldComponentUpate
函数,只是对props
和state
进行浅比较(shadow comparison)
,当props
或者state
本身是嵌套对象或数组等时,浅比较并不能得到预期的结果,这会导致实际的props
和state
发生了变化,但组件却没有更新的问题。当然还是有解决的方法的,所以建议还是少用。
四、Stateless Functional Component
上面提到的方法都包含了内部有交互和状态的复杂的组建,如果组建本身就是用来展示的,那么就可以用stateless的方法来创建组建。
import React from 'react';
const Button = ({day,increment}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
Button.propTypes = {
day: PropTypes.string.isRequired,
increment: PropTypes.func.isRequired,
}
export default Button;
如果像更改显示的结果只能改变传入的props;
以上就是四种创建组建的方式,来点个人的建议吧!
现在我公司的项目就是采用了第四种方式来进行组建的创建,那么肯定会有人问,那么请求接口,返回数据重新渲染怎么做,肯定还是会有一部分用到es6创建的方法,一部分采用
stateless
的方法,当然这种也是可以的,不过看起来就会稍微的有些乱,用两种方式定义组建也并不是一个好的团队应该看到的。所以给大家推荐一些react+webpack+react-redux
以及vda
这种方式,具体的资料可以参考这个上面说的很详细,这种方式的优点就在于将逻辑和展示完全的分开了。
最后大家可以根据自己的喜欢以及项目的要求选择一种方式来进行组建的创建,方便自己的记忆,也供大家参考使用,同时也来提一下更好的方法。
参考:
http://www.cnblogs.com/Unknw/…
https://segmentfault.com/a/11…