• 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的使用

  • 相关阅读:
    protobuf简单测试应用
    golang代码片段(摘抄)
    ibatis中 $ 于 # 的 区别?
    eclipse debug 执行到断点处并没有停下,断点无效问题
    使用selenium遇到java.lang.NoSuchMethodError: org.apache.xpath.XPathContext,排查
    设置MAVEN_OPTS的推荐方法
    UI型Bug定义的处理方法
    select count(*)和select count(1)的区别
    mac下搭建java开发环境:eclipse+tomcat+maven
    eclipse中svn提交报错的解决
  • 原文地址:https://www.cnblogs.com/gengzhen/p/15042310.html
Copyright © 2020-2023  润新知