标签：学习 方式 dom 30 react props 组件 jsx

此博客只供自己学习使用

初识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的使用

 

标签：学习,方式,dom,30,react,props,组件,jsx
来源： https://www.cnblogs.com/gengzhen/p/15042310.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。