react中jsx理念

1. 可以先理解一下 jsx 概念：是javascript的愈发扩展，我们可以在js中编写像html一样的代码

render(){
        return (
            

                click me
                

                    click count: {this.state.count}
                
            
        )
    }

2. 在react中，我们使用jsx理念，不仅可以编写html，还可以引入组件标签

ReactDOM.render(
    ,
    document.getElementById('root')
)

react是如何解析区别呢？
react会根据第一个字母是否大写来判断，首字母大写即为react组件

3. jsx带来的困惑？我们一直知道，在前端编程理念中，我们一直反对把js和html混到一起，但是react又反其道而行，将其混到了一起
   以前用html来代表内容，css代表样式，js负责交互，三种文件分别放到不同的文件，实际上只是把不同的技术分开管理，而不是真正逻辑上的分而治之
   当然，我们之前说的没有错，因为

• onclick添加的时间处理函数是在全局环境下执行的，这污染了全局环境
• 给多个DOM元素添加onclick事件，可能会影响网页的性能，毕竟，网页需要的事件处理函数越多，性能就会越低
• 对于使用onclick的DOM元素，如果要动态的从DOM树中删除掉的话，需要把对应的事件处理器注销掉，假如忘了注销，可能造成内存泄漏

对于在react中的jsx，不存在以上问题，因为

• 我们在组件中，使用的是onClick，而非onclick（C是大写），区别在于，我们的onClick都是使用 事件委托 将所有事件，统一挂载到最顶层的DOM上
• 而且react控制了组件的生命周期，在unmount的时候，自动清除相关的所有事件处理函数，内存泄漏的问题页就随之解决