自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(2)
  • 收藏
  • 关注

原创 react的jsx的渲染原理

转化成React.createElement函数 而这个函数 会创建一个对应的element ,element会形成一个元素树 每一个元素树是一个对象 就是虚拟DOM。这里提一张嘴,生成的是虚拟DOM, React渲染页面的机制都是从虚拟dom的根节点开始深度优先的比对的。把右边经过编译的代码替换到原jsx中网页也能运行 这也说明了 内部就是这么转换的。这里载babel的在线编译中执行一下。大致流程就是(先看红色再看绿色)jsx代码会被babel。

2023-09-28 10:54:03 38

原创 react里jsx的事件绑定的this指向问题

浏览器无法直接识别jsx语法,执行jsx时被babel解析转译,而babel解析过的js代码会默认转化为严格模式。严格模式下最外层的函数默认调用本指向window的this会变成undefind。元素的点击事件触发执行箭头函数箭头函数的指向为这个组件的实例对象箭头函数又调用了我们需要的函数 普通函数就是谁先用this就指向谁这时候函数的this也指向了这个组件的实例对象。上面的可能有点抽象 这里用js再解释一下。简单大致的解释一 点击事件的运行过程。所以这里推荐两种解决方法。1.就是直接绑定this。

2023-09-28 10:41:25 21

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除