React入门与基础知识

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来获取组件实例。

Component API