当我刚开始写反应的时候,我看过很多写组件的方法。一百篇教程就有一百种写法。虽然反应本身已经成熟了,但是如何使用它似乎还没有一个“正”确的方法,所以我(作者)把我们团队这些年来总结的使用反应的经验总结在这里。希望这篇文字对你有用,不管你是初学者还是老手。
开始前:
我们使用ES6, ES7语法如果你不是很清楚展示组件和容器组件的区别,建议您从阅读这篇文章开始如果您有任何的建议,疑问都清在评论里留言基于类的组件
现在开发反应组件一般都用的是基于类的组件。下面我们就来一行一样的编写我们的组件:
进口的反应,从“反应”{组件};
从“mobx-react”进口{观察者};
从“进口ExpandableForm。/ExpandableForm ';
进口的。/风格/ProfileContainer.css;
我很喜欢css在javascript中。但是,这个写样式的方法还是太新了,所以我们在每个组件里引入css文件。而且本地引入的进口和全局的进口会用一个空行来分割。
初始化状态
进口的反应,{组件}从“反应”
从“mobx-react”进口{观察者}
从“进口ExpandableForm。/ExpandableForm '
进口的。/风格/ProfileContainer.css”
出口的默认类ProfileContainer扩展组件{
状态={扩展:假}
您可以使用了老方法在构造函数<代码> 里初始化<代码> 状态。更多相关可以看这里。但是我们选择更加清晰的方法。
同时,我们确保在类前面加上了<代码>出口默认> proptype和defaultProps
进口的反应,{组件}从“反应”
从“mobx-react”进口{观察者}
从“prop-types”进口{字符串、对象}
从“进口ExpandableForm。/ExpandableForm '
进口的。/风格/ProfileContainer.css”
出口的默认类ProfileContainer扩展组件{
状态={扩展:假}
静态proptype={
模型:object.isRequired,
标题:字符串
}
静态defaultProps={
模型:{
id: 0
}，
标题:“你的名字”
}//?
}
<代码> proptype 和<代码> defaultProps>
如果你使用了反应15.3.0或者更高的版本,那么需要另外引入<代码> prop-types> React.PropTypes>
你所有的组件都应该有道具类型。
方法
进口的反应,{组件}从“反应”
从“mobx-react”进口{观察者}
从“prop-types”进口{字符串、对象}
从“进口ExpandableForm。/ExpandableForm '
进口的。/风格/ProfileContainer.css”
出口的默认类ProfileContainer扩展组件{
状态={扩展:假}
静态proptype={
模型:object.isRequired,
标题:字符串
}
静态defaultProps={
模型:{
id: 0
}，
标题:“你的名字”
}
handleSubmit=(e)=比;{
e.preventDefault ()
this.props.model.save ()
}
handleNameChange=(e)=比;{
this.props.model.changeName (e.target.value)
}
handleExpand=(e)=比;{
e.preventDefault ()
这一点。设置状态({扩展:! this.state。扩大})
}//?
}
在类组件里,当你把方法传递给子组件的时候,需要确保他们被调用的时候使用的是正确的。一般都会在传给子组件的时候这么做:<代码> this.handleSubmit.bind(这)。
使用ES6的箭头方法就简单多了。它会自动维护正确的上下文(<代码> )。
给设置状态传入一个方法
在上面的例子里有这么一行:
这一点。设置状态({扩展:! this.state。扩大});
<代码>设置状态代码其实是异步的!为反应了提高性能,会把多次调用的<代码>设置状态代码放在一起调用,所以,调用了<代码>设置状态代码之后状态不一定会立刻就发生改变。
所以,调用<代码>设置状态代码的时候,你不能依赖于当前的状态值。因为我根本不知道它是值会是神马。
