react代码风格的养成日记

这是本人首次写博客，处女秀。。。抱着一颗和大家一起学习沟通的心理写一写自己的心得和体会。目前在前端框架中，我还算熟悉的是react，使用时间稍微的久一点，敲代码敲得多了以后，着实觉得代码规范尤其重要，写这篇文章同时也是警醒自己，要养成一个良好的代码规范，这对于一个码农来说，真的是受益终生。同时也真诚的想提醒大家，如果你是刚刚踏入前端这块领域或者说你已然是个前端大牛，养成良好的代码规范，真的尤其重要，我们一起努力！

废话不多说了，说一说我在使用react编程时候的一些代码规范和心得吧。

react编程主要强调的是组件化，组件可以很好的实现复用，一个页面也是有很多组件构成的，其实如果组件提取的好，每个组件只做一件事，功能明确，对于一个页面来说，不管是后期的修改还是复用都特别的省事。这一点在项目后期开发，尤其是测试阶段，就显得更重要了，真的是谁用谁知道。。。

在编写react组件的时候：

1，先引入，现在使用es6的居多，在使用import引入的时候，为了解析方便和省时，先引入这个页面需要的子组件，然后引入css,最后在引入需要使用的公共方法，以及一些插件等。

2，然后在编程类的过程中，在constructor构造函数中，一定要切记先把super(props)中的props先填好，这个对于使用react的新手来说，特别容易忘记，在此着重提醒一下。

3，其次就是把组件需要使用的基本数据定义在state中，记得写对应的注释，以便后期来查看的时候特别容易理解。

4，定义好数据，就要开始写方法了，首先是react生命周期的那几个最基本的方法，这个最好是放在最前面，其次才是组件内部需要使用的自定义方法。对于自定义方法的命名，可以采用handle+驼峰式命名规则，也可以是直接采取驼峰式命名，但是一定要语义化，这样便于解析和理解。编程的同时打开有道词典，方便快捷，你懂得。还有在写方法的时候一定要做好备注，多写备注，特别便于后期的调试，省时又省事。这点对于爱写注释的我来说，真的是受益颇多。。。

5，在render函数的内部是组件的HTML结构，对html的属性进行对齐和排序，如果属性不是太多就放在同一行，如果属性多，就每个属性单独写一行，保持html结构有共同的换行和缩进。看起来不仅美观，也便于浏览器的解析和编译。

最后，我想说的是一个jsx文件只导出一个react类，尽量做到每个组件的功能单一，多使用props，少使用state，也能减少组件的渲染次数，优化性能。

以上内容只是本人的一些心得，真心的欢迎大家一起讨论和学习，希望以后的每天都能和大家一起学习前端的知识，一起沟通和交流。