React.js基础一招教你学会

1. 了解React

React是用于构建用户界面的Javascript库，起源Faceboox的内部项目。

1.1配置环境

1.1.1写出第一个Hello，Word

①引入react核心库

核心库：react.development.js

操作DOM：dom.development.js

jsx转化js：babel.min.js

注意:

数据的限制库：prop-types.js，例如：数据类型，数据不能为空等

②创建容器

创建的root容易，react渲染的Dom渲染在root容器

③创建虚拟DOM和渲染虚拟DOM到页面

创建的虚拟Dom，有ReactDom.render(组件，容器id)

1.2虚拟DOM

react虚拟Dom的实现原理：虚拟的element节点，虚拟dom树渲染到界面，新的dom树可以和旧的dom树进行比对，生成新的dom渲染到页面。

1.3了解jsx语法

jsx语法也就是JavaScript XML：在react组件内部构件标签XML语法，属于为react。js开发的一套语法糖，同样是react.js的使用基础，这里学习react.js必须了解和掌握的技巧。

优点：可读性高，易于编码等

1.4定义组件

1.4.1函式组件

1.4.2类式组件

老react版本：使用类式组件用到的最多。

新react版本：函式组件成为官网推荐使用，react-router路由组件中出现函式路由的方法。

2. 三大属性

2.1state属性

2.2props属性

注意：props属性，通过组件传过来的，可以勇this.props接收

2.3refs属性

refs属性：用在表单上，主要获取输入框双的值，主要有三种方式获取

3. 事件、表单

3.1React中的事件

注意：通过onXxx属性指定事件处理函数(注意大小写)

通过event.target得到发生事件的DOM元素对象 ，不要过度使用ref

3.2非受控表单和受控表单

非受控组件：主要是表单提交时，所有input的输入的数据不能够一起提交

受控组件：主要是表单提交时，所有input的输入的数据一起提交，可以先把密码用户名先统一保存，可以加入条件，不能为空或者附加条件。

4. 柯里化

通过函数的嵌套，多个参数整合在一个参数。