react学习(一)1-30

此博客只供自己学习使用

初识react

react学习(一)1-30

 

 创建虚拟dom的两种方式

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

react学习(一)1-30

 

 第二种方式:jsx方式

react学习(一)1-30

 

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

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

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

jsx语法规则

 react学习(一)1-30

 

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

react学习(一)1-30

 

 

 示例:最简单的渲染item

react学习(一)1-30

 

 组件化和模块化的区别

react学习(一)1-30

 

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

react学习(一)1-30

 

 复习类的相关知识

react学习(一)1-30

 

 例子:先创建一个Person 父类

react学习(一)1-30

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

react学习(一)1-30

 

 react学习(一)1-30

 

 react类式组件

简单组件

react学习(一)1-30

 

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

react学习(一)1-30

 

 

react学习(一)1-30

 

 有状态组件

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

借助构造器初始化状态

react学习(一)1-30

 

 原生绑定事件的三种方式

react学习(一)1-30

 

 类方法中的this

react学习(一)1-30

 解决类中this指向的问题

react学习(一)1-30

 

 setState的使用

react学习(一)1-30

 react学习(一)1-30

 state的简写方式

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

react学习(一)1-30

 

 

 简写成以下这种方式

react学习(一)1-30

 

 

 对state的理解和注意事项

react学习(一)1-30

 

 

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

props 最基本的使用方式

 

 

 react学习(一)1-30

 

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

react学习(一)1-30

 

 复习一下展开运算符

react学习(一)1-30

 

 对props进行限制

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

react学习(一)1-30

 

 props的简写方式

react学习(一)1-30

 

 react学习(一)1-30

 

 react学习(一)1-30

 

 函数式组件使用props

react学习(一)1-30

 

 组件实例第三大属性refs

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

 react学习(一)1-30

 

 回调函数形式的ref

  react学习(一)1-30

 

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

react学习(一)1-30

 

 react学习(一)1-30

 

 createRef的使用

react学习(一)1-30

 

上一篇:Vue中jsx和React中的jsx使用总结


下一篇:前端网站开发培训,HTML如何添加锚点