React基础介绍

React介绍

  React是Facebook开源的一套框架,自己模拟了dom，每次不需要直接操作dom而是直接操作虚拟dom,操作完成后映射给真实dom,提高了性能.

  React 16 版本之后  只支持 ES6 语法来开发

  三大特点:

     1.虚拟dom :   提高页面性能

     2.组件开发： 提高开发效率

     3.多端适配 ： 统一互联网

 两个库：

    1.核心库react.js   提供了全局对象React

    2.渲染库(不同的终端使用不同的渲染库)  react-dom.js(浏览器端)   提供了全局对象ReactDOM

 

虚拟DOM

   创建虚拟DOM

   核心库 React.createElement(par1,par2,par3....)  

    par1 表示虚拟DOM的名称  or  (组件名称)

    par2 表示该虚拟DOM的属性对象

    从par3开始表示虚拟DOM的子虚拟DOM，子虚拟DOM也需要用createElement创建,如果是文本节点,可以直接写.  

   虚拟DOM

    props属性对象，包含虚拟dom的一些必须属性

    ref 用来引用该虚拟dom对应的真实DOM

 

   渲染虚拟DOM

    渲染库 ReactDOM.render(par1,par2,par3)

     par1   表示虚拟DOM

     par2   表示真实的DOM容器元素

     par3   表示渲染成功时候的回掉函数

 

组件

    为了复用虚拟DOM

    核心库 React.createClass  创建组件，参数是组件的配置对象

     render  渲染组件的虚拟DOM，必须有返回值，返回值就是组件树的虚拟DOM树. 只能有一个根节点.

     把组件转换成虚拟DOM   React.createElement(组件名)

 

JSX语法

  解决创建虚拟DOM开发成本过高的问题.

  编译方法

    1.浏览器端编译    

        引入browser.js库，将script的type类型设置成text/babel     在标签内部就可以使用jsx语法了

        由于这种方式是在浏览器端编译的。因此，加载browser.js需要时间，解析jsx语法需要时间 导致的结果就是渲染页面变慢

     2.webpack等工程化编译

  特殊元素属性

     1.class   命中了js中的保留字，所以要写成className

     2.for       命中了js中的关键字，所以要写成htmlFor

插值语法

   react支持插值，语法{}  在插值符号中 我们可以使用js表达式（插值语法提供了js环境）

   jsx语法中，我们不能直接写注释，想使用注释，就要创建一个js环境，而插值为我们提供了js环境，所以我们可以在插值中使用注释

 

属性

   在html中，对同一类元素来说，之所以渲染的结果不一样，是因为具有不同的属性，所以说属性让html元素展示出多样性

   在react中，同一个组件创建出的结果是一样的，为了让组件创建出来的结果具有多样式，react为组件提供了属性

   所以通过为组件添加属性，可以让组件创建出多种结果。

   html中元素的属性通常是有意义的，title添加标题，src引入文件，href指向地址

   react中，虚拟DOM是与dom相对应的，因此react中虚拟DOM的属性也是有意义的

    属性分为四类：

        1.元素属性                      id,   title

        2.特殊元素属性              className, htmlFor

        3.非元素属性                  key   (dom本身不具备该属性,但是在react中具有一定的功能)

        4.自定义数据属性           data-id  data-type

 

事件

       1 事件名称首字母大写

       2 事件回调函数定义在组件中，通过this访问使用

       3 事件回调函数不能执行

 

        真实DOM中：<div onclick="console.log('success')"></div>

        虚拟DOM中：<div onClick={this.clickBtn}></div>

 

    事件回调函数

      作用域是组件实例化对象

       默认有三个参数

              第一个参数是react封装的事件对象

             第二个参数是ReactID（在14版本之后，不包括14，该参数已经移除了）

             第三个参数是源生的事件对象

        React事件是通过事件委托实现。所以工作中，使用第一个事件对象参数，获取的准确

       事件回调函数

            我们不能更改作用域，使用bind方法的时候，也要传递this   可以通过bind方法传递自定义数据

状态

      状态跟属性一样，都是为组件存储并管理数据的

      属性：属性数据是从组件外部传递给组件的

      状态：状态数据是组件内部维护的数据

      react根据组件是否有状态数据，将组件分成两类，一类是无状态组件，一类是有状态组件

     无状态组件

         如果组件创建完成内部不会产生数据的改变,例如:不会发送请求,不会产生事件交互等等,他们是一成不变的,我们称之为无状态组件

     有状态组件

        如果组件创建完成,会请求数据,可能与用户产生交互,组件内部的数据(状态数据)往往会发生改变,这类组件我们称之为有状态组件。

        状态数据的使用跟属性数据一样

    每次更新状态数据，都会导致组件执行render方法