React学习手记1--基础知识-CSDN博客

前言

最近在公司做的一个中后台运营后台项目，前端选用的框架是React，虽然早已听过react的鼎鼎大名，并且了解学习并写过demo，不过已是快两年前的事了，早已忘记了，现在重新拾起React，重新开启探索之旅。其实项目已经上线了，目前在迭代中，才有时间系统的整理React相关的知识。想起开发过程，真的是相当煎熬啊，边写代码边google，常常熬夜到两三点才下班，才能按时间节点开发出负责的功能。

react特点

react是一个重点在view层的UI框架，可以跟其他框架搭配开发，比如FLux、Redux等数据管理框架；其二，其用到很多ES6的语法，必然要和构建工具（如webpack）配合使用。其三，react使用jsx语法，表面看起来好像在js中夹杂着html，其实非也，jsx只是react提供的语法糖，下面会具体介绍；其四，react重点在组件化思想，任何UI界面，都应看成是组件的组合，从而达到组件复用。

因为我以前用的是Vue，两相对比，react使用拥有更多的灵活度，也没有双向绑定的功能，所以对于可交互元素（表单元素），通常需要绑定事件来达到双向绑定的效果，当然也不是必须，这可以衍生出受控元素和非受控元素两个概念，这个后面也会介绍到。

jsx语法

一个简单的hello world代码如下：

const name = "allen"
ReactDOM.render(<p>hello world {name}</p>, document.getElementById('root'))
复制代码

第一个参数就是jsx语法，jsx基本的语法规则：

1.  以<>包裹，则按类html标记语言（元素）解析
2.  以{}包裹，则按js解析
3.  元素分为 原生html元素 和 自定义组件元素，jsx依靠首字母是否大写识别，大写则为自定义组件元素
4.  元素的属性不同与html，比如绑定事件用onClick，类名用className，style内部属性不能用下滑线，若borderLeft
复制代码

jsx不是模板引擎，是react.createElement()的语法糖，完全可以不用jsx，但是用jsx来描述复杂的UI非常方便和理解。使用jsx，必须要先引入react，否则报错，这是因为jsx最终需要被转译成依赖于React的表达式。

可能会问，这种js中夹杂类html，可能还有css，是否违背了代码分离的原则，这就要降到react的核心思想--编写可维护的组件。

组件

如何编写可维护的组件，相信有过react开发经验的人，都或多或少遇到一个或多个页面上经常会有相同功能的UI，凡是要写两遍的代码都应该抽成一个组件，因为很有可能还会有第三次...，可能刚开始还没问题，当后期迭代或者移交他人维护的时候，会非常的麻烦，我就犯过这样的错误，因为一开始不会用，又被排期压着，先上线再说吧，后来换成另外一个大佬来迭代，怎么一个改动，需分别到到三个地方改，被狠狠地批斗了。

组件可以分为不同的类型，比如按定义方式，分为函数组件和类组件；按是否有自身状态，分为展示组件（stateless）和容器组件；按受控状态，分为受控组件和非受控组件；按使用方式，分为一般组件和高阶组件（HOC）。

当然这些分类可能有重合交叉，比如一个展示组件，很有可能就是一个函数组件。

其实做中后台开发，业界早有广受好评的AntDesign Pro组件库，基本上满足了常用的需求。