浅谈React 一 操作DOM(旧版)

hello ,大家中午好,无聊的周末过去了,写代码让我们不在孤单,抽中午吃饭时间给大家分享一下React操作DOM的方法。

一:setSate(第一种方法)
使用setState来进行DOM的刷新,这个方法和小程序的用法是一样的
在这里插入图片描述
使用this.setState改变写法是Key,value来写。

二:ReactDOM(第二种方法)
这里咱们需要用到ReactDOM先引入react-dom
在这里插入图片描述
改变DOM的方法偏向原生,给DOM绑定class,Id等等!!!
在这里插入图片描述
这里咱们绑定了一个Onclik事件
在这里插入图片描述
来改变按钮字体的颜色,按钮默认字体颜色是黑色,点击以后会变成red或者是yellow。
在这里插入图片描述
字体颜色变换了证明咱们操作DOM实现了!!!

三:ref(第三种方法)
说到ref用过vue的同学应该有所了解ref在vue中也是来获取DOM来操作DOM的,获取this.$refs.key来获取。

React:
在这里插入图片描述
获取的时候就有一点不同之处了Vue是this.$refs.key,然后React是this.refs.key就可以
在这里插入图片描述

在这里插入图片描述

注意:
1:refs是获取组件内部DOM唯一可靠的方法
2:refs会自动销毁对子组件的引用
3:不要在render里面调用因为DOM结构还没生成好也不要在生命中调用
4:不要滥用refs 因为可能会影响性能问题

源码地址: https://github.com/Liingot/react-demo

今天就到这里谢谢大家 溜了溜了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值