• 1.react的基础


    1、react:专注于UI得一个js库

    2、选择使用框架得原因:
      写起来简单方便了,但是从稳定性上考虑得话还是原生js要稳定,所以也有很多公司直接使用原生js,但是从开发周期上来说时间会长
      之前再写页面得时候,有很多公共部分,例如:头部nav,版权,banner,之前再写页面得时候需要一个人把框架搭出来,我们这个框架得基础上加内容,划分成得是一个一个得组件,而一个页面是由多个组件构成得,其中最常用的就是react和vue两个框架

    3、MVC:(重点掌握)
      M(model):模型(业务模型):用于封装与应用程序得业务相关得数据以及处理数据得方法,程序得功能
      V(view):视图-->看到得就是视图层呈现给我们得内容(用户界面)
      C(controller):控制器 :负责转发请求和处理请求得
      用一种业务逻辑、数据、界面显示分离的方式组织代码得
      MVC这个模型思想就是把M和V分开了
      再访问数据库得时候,M不会关心是怎么显示得,怎么操作得,只关心我对我得数据是怎么样处理得
      再V上是没有任何程序上的逻辑得,V就只是显示而已
      控制器是让模型中得业务逻辑显示再V视图中得

    4、react得特点
      声明式设计--虚拟DOM,再DOM没有真正再页面中显示得话,这些都是虚拟DOM
      高效--因为采取得是虚拟DOM,所以用起来是高效率得
      灵活--和其他框架都能很好配合
      JSX语法--可以再js中直接写html
      组件化开发--组件可以重复利用
      单向数据流--模型数据改变会引发视图改变,视图改变不能让模型上的数据发生变化,减少了重复得代码

    5、再react中有一个diff算法(先简单概括):
      可以把虚拟DOM转化成真是得DOM显示再页面中
      显示再页面中得DOM就是真实得DOM

    6、使用脚手架搭建得环境    

        很少使用,脚手架文件很大。通常不使用脚手架。 

     npm install create-react-app -g   //全局安装
    
     create-react-app  myapp    //(最后为自己的文件名)
    
     cd myapp
     
     npm start                             //启动

    7.手动创建

     //手动创建文件夹  cmd 进入
    npm  init    //初始化
    npm install webpack --save-dev
    npm install webpack-dev-sever  --save-dev
    npm install webpack-cli  --savr-dev
    
     //以上是webpack需要的依赖
    
    
     //让当前得项目中的webpack能解析es6和jsx语法:
         npm install babel-loader@7 babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-polyfill babel-core --save-dev
    
    //安装react得项目依赖:
         npm install react react-dom --save-dev
    
      

    8、再react中直接使用得是jsx语法,js和html直接写进行解析
    遇到<>直接使用html解析,其他得使用得是js进行解析得
    标记可以随意进行嵌套:
    因为再jsx语法中输出得话只能输出一个html标记,意思就是所有得标记都必须要放在一个html得DOM元素中进行输出
    如果当前标记是一个单标记那么必须要加上自闭和
    如果使用得是{},是对js进行解析得
    如果想要使用得表达式得话使用条件运算符:。。?。。:。。,不能使用if。。。else判断

    9、render方法:
    把虚拟DOM转化成真实得DOM

    10、再react中最重要得就是组件,组件实际上就是一个js文件
    之前再js中我们都知道有函数,其实组件就是一个函数
    对于函数来说,传不同得参数会返回不同的值
    对于组件来说,给不同得属性(props)或状态(state)返回得是DOM

    11、组件得创建:

    组件:其实就是一个函数
    组件分为两种:无状态组件,有状态组件
    再react中组件得更新,那么通过改变状态达到组件得更新得,换句来说无状态组件就是一个纯展示性得组件
    无状态组件就是一个带返回值得函数,普通带返回值得函数返回得时一个值,而对于react中的组件来说它的返回值是一个DOM

    组件创建有3种方式
    什么是状态:看成是形参,对于形参来说,传不同得值显示不同得结果,有状态就可以渲染出不同得DOM,没有状态得话就直接显示一个固定得DOM,不会改变,换句话来说这个DOM就是纯展示得DOM
    组件什么时候会被重新渲染呢,就是状态改了,那么组件才能被重新渲染
    无状态组件再创建得时候有一个种方式进行创建,就是js得函数了,特点:不需要传入props,更不会改变state,就是一个单纯得function,和之前函数得区别就是把return出来得值换成是一个DOM了
    特点:
    组件不能被实例化
    组件种得this不能被访问:因为没有实例化得过程,所以this不能访问
    组件没有办法访问生命周期中的方法
    组件只有props,但是没有state,所以不会重新渲染

    12、有状态组件:
    es5创建得:createClass
    es6创建得:Component
    因为再react种创建组件就是Component,里边封装了创建react组件得方法,所以我们如果需要创建react组件得话就要把react.Componet上创建组件得方法继承过来才行,这样才是一个react完整得组件,es6提供给了我们一个创建对象得方法class,再react中得组件再创建得时候就使用得是class进行创建得,因为react本身就是一个组件,在创建的时候使用的是Component进行创建的,所以我们创建出来得react组件需要使用extends继承react组件得一些特性,包括里边得属性和方法,所以我们再创建react组件得时候创建方法是:

    class 组件名 extends React.Component{}

  • 相关阅读:
    (三)通用定时器的定时功能(不使用中断)
    (二)STM32中中断优先级理解
    (一)通用定时器的相关介绍
    Ambari client
    Ambari的资源池管理
    Sentry的授权模型
    关于yum
    Ambari-HDP
    Ambari的API调用
    CentOS上面搭建SVN服务器
  • 原文地址:https://www.cnblogs.com/taozhibin/p/13043498.html
Copyright © 2020-2023  润新知