React组件化开发初试
按照官方文档和例程博客,实现了一个简单的输入框组件。
如果想了解官方案例,请参考深入理解 React
总结一下,一个简单的React.js应用应按照以下步骤构建:
- 设计组件原型和JSON API;
- 拆分用户界面为一个组件树;
- 利用React, 创建应用的一个静态版本;
- 识别出最小的(但是完整的)代表UI的state;
- 确认state的生命周期;
- 添加反向数据流。
个人认为这里的难点在于如何拆分用户界面,粒度过大不利于组件化的重用,粒度过小的话,显得冗余过多,并且复杂度陡升。本人最开始尝试细化的拆分,尽量让一个组件只完成一个很小的功能需求,但最后反而不知道如何给每个组件分配其任务。
另一个难点来源于对state的判断,其实如果能够识别出最小的state,读者会发现一个复杂的组件所需的state数量其实很少。
在React.js中,有两种数据模型,state代表的是会动态变化的状态,props代表的是父级传递而来的属性,state会反过来更新UI,而props只是一次性设置填充。
第一步:构建原型
我们的组件要完成以下功能:
- 可以定制label和输入框的placeholder的内容
- 可以有个属性设置个正则,输入的文字不符合正则的时候输入框就标红
- 右侧的大叉icon点击后,消失并清楚输入框内容
- 组件需要开放3个对外方法,获取(获取值时trim),设置(设置值时trim),删除,输入框的内容。
原型比较简单,样式如下:
JSON接口数据如下:
{
labelText: "酒店地址",
hinderText: "请填写酒店地址",
buttonImgSrc:
regExp: /^\w{
5,8}$/
}
我们通过JSON数据设置输入框组件的label标签、Input的placeholder属性和对用户输入的正则验证。
第二步:拆分用户界面为一个组件树
在完成用户界面切分的过程中,最开始,如图原型图所示,做了非常细粒度的拆分,拆分结构如下:
- LimitedInputBox
- Title
- InputBox
- ClearButton
这里,将LimitedInputBox
作为最外面的容器,包裹整个组件,子组件分为三部分,Title
即是一个label
标签,用来显示该输入框组件的名称(或者说标题),InputBox
即是一个input
标签,用来接收用户输入,ClearButton
可以用一个img
标签,用来清除input
输入框内容。刚开始准备用另外一个容器包裹InputBox
和ClearButton
,发现这样过于冗余于是两者还是和Title
作为同一级组件比较好。
后来思来,觉得过于拆分了,最小单位与HTML原生标签同一级别,没有意义,因此,最后只保留了一个组件,就称之为LimitedInputBox
。即:
- LimitedInputBox
第三步:利用React, 创建应用的一个静态版本
首先,不需要考虑用户交互,直接将数据模型渲染到UI上。即将数据渲染和用户交互两个过程拆分开来。
这样做比较简单,因为构建静态版本的页面只需要大量的输入,而不需要思考;但是添加交互功能却需要大量的思考和少量的输入。
为了创建一个渲染数据模型的应用的静态版本,你将会构造一些组件,这些组件重用其它组件,并且通过 props 传递数据。 props 是一种从父级向子级传递数据的方式。
本例中,的props
就是第一步构建的JSON数据。
考虑到第二步中我采取了两种拆分方式,这里给出相应的代码:
/** author : River He**/
//细分结构
var data = {
labelText: "酒店地址",
hinderText: "请填写酒店地址",
buttonImgSrc: "eliminate.png",
regExp: /^\w{
5,8}$/
};
var Title = React.creatClass({
render: function() {
return (
<label>{
this.props.labelText}</label>
);
}
});
var InputBox = React.createClass({
render: function() {
return (
<input
placeholder={
this.props.hinderText}
regExp={
this.props.regExp}>
</input>
);
}
});
var ClearButton = React.createClass({
render: function() {
return (
<img src={
this.props.buttonImgSrc}></>
);
}
});
var LimitedInputBox = React.createClass({
render: function() {
return (
<Title labelText={
this.props.data.labelText} />
<InputBox
hinderText={
this.props.data.hinderText}
regExp={
this.props.data.regExp}
/>
<ClearButton buttonImgSrc={
this.props.data.buttonImgSrc} />
);
}
});
ReactDOM.render(
<LimitedInputBox data={data} />,
document.getElementById('example')
);