react是什么
react是一个用来做UI的组件,他专注于做MVC中的V(视图)
为什么要选择react
使用其他的技术如Jquery,需要记很多api,学习起来比较复杂麻烦。
而react具有以下优点:
- API比较少,类库学习起来简单
- 组件内聚,易于组合
- 原生组件和自定义组件融合渲染(互相嵌套一起渲染)
- 状态/属性驱动全局更新,不用关注细节更新
- commonjs生态圈/工具链完善
react的基础知识
JSX
类似XML语法,用来描述组件树。
将上面的组件,经过类似编译器翻译为下面的语言。
所采用的命名规则为驼峰命名,并且所采用的类名不能与js关键字冲突。
JSX嵌入变量,如下用{变量名}来表示变量的属性值
JSX SPREAD
可以通过{...obj}来设置一个对象的键值对到组件的属性值,要注意使用的顺序。
EVENT事件
做客户端编程,不可避免需要触发事件。
在react事件,可以通过设置原生dom组件的onEventType属性来监听dom事件,如onClick,onMouseDown(他们的绑定都在一个对象里面,避免了命名空间污染的问题),在加强了组件内聚性的同时,避免了传统html的全局变量污染。
组合
组合可以像使用原生dom组件一样使用自定义组件。在react里面只能组合不能继承。
如上面,在定义了组件类A后,B使用A并不能继承自A,只能在标签里将A加在i标签内(斜体渲染)进行组合。
组合CHILDREN
可以通过this.props.children来访问自定义组件中的子节点(
标签内的空白处内容)。如下图:属性与状态
PROPS属性
可以使用this.props来获取传递给组件的属性值,也可以通过getDefaultProps来指定默认属性值。
属性验证prop validation
通过指定propTypes,可以校验属性值的类型。如下图,我们制定了属性值为string类型,当给属性值为2时,仍能运行(进行了类型转换),但是会给出一个warning警告。
状态state
状态就相当于局部变量,对于组件的内部的状态,可以使用state
Mixin和表单
Mixin
使用mixin可以多个类中实现一些共享的方法,与java中的接口有点类似。mixin是一个普通对象,可以使得不同组件之间共享代码。
表单 Form
与html的区别是:
- value/checked属性设置后,用户输入无效
- textarea的值要设置在value属性
- select的value可以使数组,不建议使用option的selected属性
- input/textarea的onChange用户每次输入都会触发(即使不失去焦点)
- radio/checkbox点击后会触发onChange
REF和API
Ref
该功能是为了结合现有的非react类库,通过ref/refs来获取组件实例。