创建可重用的组建
为了创建真实可重用的组建，我们需要理解React自定义的组建和最好是选择一个或另一个之间不同的可能性，最近，一种新的组建类型被React提出，即声明一个组建为无状态的函数，掌握它，学会何时使用它和为什么要使用它，也越来越变的重要，
你可能已经使用了组建的内部状态，但是或许你还不能清晰的使用它和它会带来哪些问题，
最好的学习方式是看例子，那么接下来，将会会用写一个组建提供单一的目的并且转化成可重用的一个组建，
首先，让我们退后一步继续讨论基本的概念，然后大步的创建生动的组建样式直到这章的最后，
在这个章节里：
－不同创建React组建的方式和如何选择
－什么是无状态组建，功能和状态之间的不同
－状态是如何运行的，避免使用它
－定义清晰的Prop类型为每个组建为什么很重要，怎样产生动态的文档配合React Docgen
－一个真实的例子转化耦合的组建成一个可重用的组建
－如何创建生动的样式从React storybook
创建类
我们已经在第一章的时候，使用过elements显示过组建，现在我们用另外一种方式定义组建
继承自React.Component
推荐使用
主要的不同点
出去语法的差异，还有重要的不同，在使用的时候应特别的注意，选择最合适的
Props
createClass
const Button = React.createClass({
propTypes: {
text: React.PropTypes.string,
},
getDefaultProps() {
return { text: 'Click me!', }
},
render() {
return{this.props.text}},
})
如你所见，我们使用propTypes 属性列出所有props传递给组建，然后使用getDefaultProps函数定义值，
达到同样目的用classes的写法如下
class Button extends React.Component {
render() {
return{this.props.text}
}
}
Button.propTypes = { text: React.PropTypes.string, }
Button.defaultProps = { text: 'Click me!', }
state
const Button = React.createClass({
getInitialState() {
return { text: 'Click me!', }
},
render() { <button> return{this.state.text}}</button>},
})
class Button extends React.Component {
constructor(props) {
super(props)
this.state = {
text: 'Click me!',
}
}
render() { return{this.state.text}}
})
Autobinding
箭头函数 解决事件绑定的一个方法是使用箭头函数
() => this.setState() 用babel转化成
var _this = this;
(function () { return _this.setState(); });
class Button extends React.Component {
handleClick() { console.log(this) }
render() { return <button onClick={()=>this.handleClick()}></button>}
}
这样做不会有什么问题，唯一的缺点是如果考虑性能的话还要理解代码本身，其实，箭头函数的副作用,每一次render的时候如果遇到这些写法，都会重新用handleClick函数与this去绑定从而重新创建一个新的函数，影响性能,
问题是，如果我们传递一个函数到子组建，子组建接受一个新的prop在每次更新的时候，导致无效的渲染，这就是问题的出现，特别是如果组建是纯的，最好的解决方式是绑定这个函数一次在组建的构造函数里面，
class Button extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() { console.log(this) }
render() { return <button onClick={this.handleClick}></button>} }
无状态的组建
no state/lifecycle/refs/event handlers
网友评论