react项目学习心得--后台管理模块前端实践总结（antd）

最近在用react做一个项目中的一个小模块，差不多半个月第一个版本上线虽然还是存在不少问题，后面再慢慢优化。先写篇文章总结一下近期自己的心得。

刚开始接触react时觉得它和传统的bootstrap jquery这些框架实现方式很不一样，react中页面代码几乎都是js文件，而不是传统的html文件，所以刚开始入门那几天觉得还是比较头大的，但是入门之后基本的语法实现方式懂了以后还是收获颇多，有种恍然大悟的感觉。

因为我是做的后台管理模块，所以用了蚂蚁的antd的一些组件（http://ant.design/docs/react/introduce-cn），antd这套组件对于后台管理来说真的是可以提高不少开发效率，因为他内部一些封装好的组件可以直接使用，比如我在项目中用到的form，table,modal这些，其中他的一些组件的实现思路也是可以借鉴用到其他地方的。如果是做的后台开发可以去其官网上学习一下。

下面谈下我在实际项目中遇到的一些问题以及如何解决

一：代码的可读性

这里的这个截图是我这半个月来实现这个小模块的主要代码，可以看到代码行数达到了1800多行，过于臃肿，对于后期维护阅读很不方便，因为我也是刚开始做项目，所以目前写的都是一些基本的代码，后期我会慢慢将它优化拆分成可读性高的若干个组件。

二：代码的规范性

建议大家一定要在一开始就做好格式缩进，命名规范这些。这也是我自己一开始没有做好的问题。命令上如果存在并列的一些属性需要命名的话，大家最好能够根据其意义做出规范的命名，比如你有两个table需要区分，一个代表了老师信息，一个代表了学生信息，那么最好一开始就命名成类似tableTeacher，tableStudent这样而不是table1，table2这种。对于不懂你命名方法的人猜不到你的table1代表的是什么。另一方面格式缩进也有注意，因为当你代码量大起来的时候缩进不对的话你会发现没办法把你不需要展示的代码折叠起来，这样对于你自己的编写也是很不方便的。

三：代码注释

可能我们很多新手都会觉得我们代码自己能看懂就行了没必要注释去花那打字的时间什么的，但其实如果能够花一点时间对一块代码写上必要的注释的话，在后期维护修改的时候还是很方便的。对于我自己来说我比如我在命名函数方法的时候已经尽可能去使用望文生义的名称了，但是在函数名多起来了之后我会感觉有些力不从心，这时我的注释就帮助到了我，让我瞬间知道我当初写的这个函数实现的是什么功能。（ps:也许是我的英语太差了，还是看中文亲切哈哈哈哈）

四：三目运算符的使用

在react中如果只涉及两种选择的话，一般使用最多的是三目运算符，不仅看起来清晰，写起来也方便。

这里我写的是更新和添加的两个button，根据条件的不同展示不同的button，进而实现不同的操作。

五：getFieldDecorator实现表单数据双向绑定

getFieldDecorator绑定一个字段以后可以通过values访问到其值

这里我框的是比较常用的几个属性

ID就是绑定的字段名称

initialValue用于显示默认传来的值，一般在编辑下使用，在输入框中显示默认值

rules是需要设置的规则，比如rules:[{required:true,message:'不能为空'}]

六：其他一些总结

1.state用于保存变量，setstate用于更新变量的值，但是要注意变量的冗余度，如果是一组数据同时变化需要修改的话可以在state中放置一个类似于modal的变量集
2.使用最频繁的几个生命周期
componentDidMount中可以渲染你想要一打开页面就看到的图表之类的东西
componentWillMount和ComponentWillUnmount一般在设置埋点的时候最常用
3.map一般用于数组遍历取出json对象中的某一个值然后放在checkbox的option中这种
4.在react中箭头函数使用的是相当频繁，他自己没有this,可以继承上下文的this来使用
5.一般会使用formitem来添加一些属性值