一、用JS实现加减
<body>
<div>
<span id="result">0</span>
<button id ="add">+</button>
<button id="minus">-</button>
</div>
</body>
<script>
let result = document.querySelector('#result')
let add = document.querySelector('#add')
let minus = document.querySelector('#minus')
add.addEventListener('click',function(){
let number = parseInt(result.innerText,10)
number += 1
result.innerText = number
})
minus.addEventListener('click',function(){
let number = parseInt(result.innerText,10)
number -= 1
result.innerText = number
})
</script>
二、用React实现加减
<body>
<div id="root"></div>
</body>
<script>
let number = 0
let onClickButton =()=>{
number += 1
render()
}
let onClickButton2 = ()=>{
number -=1
render()
}
render()
function render(){
ReactDOM.render(
<div className='parent'>
<span className='red'>{number}</span>
<button onClick={onClickButton}>+</button>
<button onClick={onClickButton2}>-</button>
</div>,
document.querySelector('#root'))
}
</script>
三、相关知识点
- jsx就是用html形式来写
- 虚拟DOM就是非真实DOM，表示DOM节点的虚拟对象。