zoukankan      html  css  js  c++  java
  • react学习(一)1-30

    此博客只供自己学习使用

    初识react

     创建虚拟dom的两种方式

    第一种是纯js的方式,就是不通过babel翻译(一般不用)

     第二种方式:jsx方式

    关于虚拟dom和正式dom的区别

    虚拟dom本质上是object,没有真实dom上那么多属性

    查看 真实dom的属性有两种方式:第一种是debugger,第二中是console.dir(dom)

    jsx语法规则

     

     注意:在jsx中的{ } 中输入的是js表达式,并不是js代码,这个要分清楚

     示例:最简单的渲染item

     组件化和模块化的区别

     函数式组件(适用于简单组件的定义)

     复习类的相关知识

     例子:先创建一个Person 父类

    再创造一个student 子类  子类继承父类

     

     react类式组件

    简单组件

    重要:组件三大核心:props,refs,state

     有状态组件

    如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的

    借助构造器初始化状态

     原生绑定事件的三种方式

     类方法中的this

     解决类中this指向的问题

     setState的使用

     

     state的简写方式

    类中可以直接写赋值语句,注意这是类,不是函数,所以在不用var这些

     简写成以下这种方式

     对state的理解和注意事项

     组件实例的三大核心属性2:props(注意是组件 实例!)

    props 最基本的使用方式

     

     批量传递props(注意,此章节是重点)

     复习一下展开运算符

     对props进行限制

    对标签属性进行必要的限制(默认和必要性)

     props的简写方式

     

     

     函数式组件使用props

     组件实例第三大属性refs

    字符串形式的ref(react官方不推荐这种写法,可能要废弃掉)(字符串形式的ref存在一些效率问题,所以不建议使用)

     

     回调函数形式的ref

      

     注意:注释render中jsx的某一行的时候,要用 {/*  xxx */},例如下面的图片

     

     createRef的使用

  • 相关阅读:
    spring aop
    Linux进程管理命令
    逻辑卷管理-LVM(Logical Volume Manager)
    Linux磁盘与文件系统管理(二)
    Linux磁盘与文件系统管理(一)
    Linux后台运行和关闭、查看后台任务
    Linux用户管理及用户信息查询
    文件备份与压缩
    Liunx信息显示与文件搜索
    文本处理三剑客之 awk
  • 原文地址:https://www.cnblogs.com/gengzhen/p/15042310.html
Copyright © 2011-2022 走看看