演示react封装的代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div class=‘wrapper‘>

</div>

</body>

<script type="text/javascript">

// class LikeButton {

//     render () {

//       return `

//         <button id=‘like-btn‘>

//           <span class=‘like-text‘>赞</span>

//           <span>??</span>

//         </button>

//       `

//     }

//   }

// function fn(){

// alert(1)

// }

// const wrapper = document.querySelector(‘.wrapper‘)

//

// const likebtn = wrapper.querySelector(‘.like-btn‘)

//   const likeButton1 = new LikeButton()

//   wrapper.innerHTML = likeButton1.render()

//

//   const likeButton2 = new LikeButton()

//   wrapper.innerHTML += likeButton2.render()

//

//   likebtn.onclick=fn

const createDOMFromString = (domString) => {

const div = document.createElement(‘div‘)

div.innerHTML = domString

return div

}

// class LikeButton {

// constructor () {

//       this.state = { isLiked: false }

//   }

// setState (state) {

//       const oldEl = this.el

//       this.state = state

//       this.el = this.render()

//       if (this.onStateChange) this.onStateChange(oldEl, this.el)

//

//     }

//

//     changeLikeText () {

////     console.log(this)

////       const likeText = this.el.querySelector(‘.like-text‘)

////       this.state.isLiked = !this.state.isLiked

////       likeText.innerHTML = this.state.isLiked ? ‘取消‘ : ‘点赞‘

// this.setState({

//         isLiked: !this.state.isLiked

//       })

//     }

//     render () {

//       this.el = createDOMFromString(`

//         <button class=‘like-button‘>

//           <span class=‘like-text‘>${this.state.isLiked ? ‘取消‘ : ‘点赞‘}</span>

//           <span>??</span>

//         </button>

//       `)

//       this.el.addEventListener(‘click‘, this.changeLikeText.bind(this), false)

//       return this.el

//     }

//   }

class Component {

constructor (props = {}) {

this.props = props

console.log(this)

}

setState (state) {

const oldEl = this.el

this.state = state

this.el = this._renderDOM()

if (this.onStateChange) this.onStateChange(oldEl, this.el)

console.log(this)

}

_renderDOM () {

this.el = createDOMFromString(this.render())

if (this.onClick) {

this.el.addEventListener(‘click‘, this.onClick.bind(this), false)

}

return this.el

}

}

//   class LikeButton extends Component {

//     constructor (props) {

//       super(props)

//       this.state = { isLiked: false }

//     }

//

//     onClick () {

//       this.setState({

//         isLiked: !this.state.isLiked

//       })

//     }

//

//     render () {

//       return `

//         <button class=‘like-btn‘ style=‘background-color: ${this.props.bgColor}‘>

//           <span class=‘like-text‘>${this.state.isLiked ? ‘取消‘ : ‘点赞‘}</span>

//           <span>??</span>

//         </button>

//       `

//     }

//   }

class RedBlueButton extends Component {

constructor (props) {

super(props)

this.state = {

color: ‘red‘

}

}

onClick () {

this.setState({

color: ‘blue‘

})

}

render () {

return `

<div style=‘color: ${this.state.color};‘>${this.state.color}</div>

`

}

}

const wrapper = document.querySelector(‘.wrapper‘)

const mount = (component, wrapper) => {

wrapper.appendChild(component._renderDOM())

component.onStateChange = (oldEl, newEl) => {

wrapper.insertBefore(newEl, oldEl)

wrapper.removeChild(oldEl)

}

}

mount(new RedBlueButton({ bgColor: ‘red‘ }), wrapper)

</script>

</html>

时间: 2024-10-12 13:55:35

演示react封装的代码的相关文章

王家林系列之scala--第69讲:Scala并发编程react、loop代码实战详解

刚才看了一下,群里王家林老师又更新课程了,真为王老师的勤奋感到佩服,于是迫不及待的下载下来观看学习.本期讲的是关于scala并发编程的react.loop代码实战. 信息来源于 DT大数据梦工厂微信公众账号:DT_Spark 关注微信账号,获取更多关于王家林老师的课程内容 王家林亲授<DT大数据梦工厂>大数据实战视频“Scala深入浅出实战经典”视频.音频和PPT下载! 百度云盘:http://pan.baidu.com/s/1c0noOt6腾讯微云:http://url.cn/TnGbdC

Scala并发编程react、loop代码实战

学习了Scala并发编程react.loop代码实战详解,通过线程重用,提升性能.具体通过loop进行循环,应用react重复接收消息,适用于带有界面的事件驱动的方式 def  act() loop{ React { Case Net(name,actor)=> Actor! getIp(name) Case msg=> Println(“Unhanded message:”+msg) } } 王家林亲授<DT大数据梦工厂>大数据实战视频“Scala深入浅出实战经典”视频.音频和P

Scala并发编程react、loop代码实战解析

Scala并发编程react.loop代码实战解析,内容介绍和视频链接:http://pan.baidu.com/s/1bnlpuVH,欢迎下载视频 内容介绍:Scala并发编程中共享线程的使用 (1)在Actor类的act方法中,可以使用react方法来替代receive方法进行消息的处理,使用react方法的好处是可以在一个线程中执行多个Actor的消息处理函数,需要注意的是当react方法接受到的消息匹配到它方法体中的一个偏函数时并进行消息的处理后会导致该react方法的退出,这时一般常常

Github 大牛封装 Python 代码,实现自动发送邮件只需三行代码

*注意:全文代码可左右滑动观看 在运维开发中,使用 Python 发送邮件是一个非常常见的应用场景.今天一起来探讨一下,GitHub 的大牛门是如何使用 Python 封装发送邮件代码的. 一般发邮件方法 SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. 我们以前在通过Python实现自动化邮件功能的时候是这样的: import smtplibfrom email.mime.text import MIMETextfrom email

委托IL解析-----封装逻辑和代码复用

委托IL解析-----封装逻辑和代码复用 1.委托的本质 委托大家都不陌生吧,我们经常都会接触到或用到.LINQ查询就是基于委托来实现的. 我们常常这样定义委托: public delegate void SayHiDelegate(string name); 那么委托的本质是什么呢? 在介绍委托的本质前,我们先来认识一下IL,IL是中间语言,是我们在VS写的代码和计算机二进制代码的中间语言.我们的代码编译生成IL,IL通过GIT最终编译成计算机能识别的计算机二进制代码.IL可以看到真正原生的C

Scala并发编程react、loop代码实战具体解释

演示样例代码及凝视: //scala并发编程中的react和loop,共同特点: //通过线程存用的方式让性能有所提升. //Actor本身的运行,被actor子系统管理的时候,会有一个或者多个远程的线程让当前的actor使用 //普通情况下每一个Actor都有自己的线程.仅仅有有自己的线程时,我们的Actor中的actor方法才会运行. //可是,这样线程的开销会很大,所以为了共用线程,一个actor使用多个线程后,我们不想马上回收,我们想共用. //scala给我们提供了两个方法:react

(原理篇)基于SQLite3轻量级封装,一行代码实现增删改查

最近写的项目中有用到数据库,写了不少蛋疼的sql语句,每次都是好几行代码,而且每次都是重复的没有一点技术含量的代码,虽然也有不少基于sqlite的封装,不过用起来还是感觉不够面向对象! 为了不再写重复的代码,花了几天时间,基于SQLite3简单封装了下,实现了一行代码解决增删改查等常用的功能!并没有太过高深的知识,主要用了runtime和KVC: 首先我们创建个大家都熟悉的Person类,并声明两个属性,下面将以类此展开分析 @interface Person : NSObject @prope

Scala并发编程react、loop代码实战详解

示例代码及注释: //scala并发编程中的react和loop,共同特点: //通过线程存用的方式让性能有所提升. //Actor本身的运行,被actor子系统管理的时候,会有一个或者多个远程的线程让当前的actor使用 //一般情况下每个Actor都有自己的线程.只有有自己的线程时,我们的Actor中的actor方法才会执行. //但是,这样线程的开销会非常大,所以为了共用线程,一个actor使用多个线程后,我们不想立即回收,我们想共用. //scala给我们提供了两个方法:react方法和

React中的代码分割

代码分割想要解决的问题是:经打包工具??生成的bundle文件过大,特别是在我们引入第三方库的情况下. 在React中,我们有一下几种解决方案: 1. 动态加载 1 // math.js 2 export function add(a, b) { 3 return a + b 4 } 5 6 // 未使用动态加载 7 import { add } from './math.js' 8 console.log(add(10, 20)) 9 10 // 使用动态加载 11 import("./mat