刚刚开始写组件的时候，感觉难度不大（跟vue差不多）。最有意思的应该是jsx语法，个人感觉，jsx的功能性确实比vue的template更强,而且可读性更高.
// vue
登录后复制
// jsxhello !{msg}
登录后复制
在jsx里面没有指令,而且jsx里面 {} 代表要执行的js语句,它的效果类似 return ,它会有返回值.这样的话,更好理解jsx的内容,jsx里面的dom不是真正的dom,只是一种表示dom的语法,{}里面的内容可以完全理解为js,这种整个jsx就可以完成理解为原生js写的html模版.
属性计算的部分,vue里面需要在属性名前面加:,在jsx里面则不需要.
另外,在vue里面的dom的contentText不使用{{}}来渲染,使用因为在vue页面生成之前,模版语法部分没有渲染出来,就会在页面上先出现{{content}},再一闪变成真正的文本内容.
再举个数组遍历渲染的栗子
// vue
登录后复制
// jsx
- {list.map((item,index) => { return item.label.indexOf('abc') !== -1 && (
- {item.label} ) })}
登录后复制
你会发现,在一些比较简单渲染需求时,使用vue的template会比较简单直接,而且很易懂.但是如果涉及一些比较复杂的逻辑处理渲染,jsx更直观,因为jsx的语法跟js的差异不大,相当于用js来描述需要如何渲染dom结构.当然jsx并不是说可以完成使用js的语法来写dom,{}里面只能是一个表达式,所以像if else或者switch这种语法在{}是不能用的.
关于组件模版的格式化,在react里面感觉更好一点,因为react组件就是用js写的,格式化和注释部分在编辑器得到更好的支持,但是.vue文件目前还找不到针对的格式化插件.
目前我遇到的问题有2个.
1.组件注释的问题.
在写组件的时候,我比较习惯写注释.在js文件里面,注释会更加的明显和方便,但是在vue文件里面注释感觉就没啥亲和力.
// .vue
登录后复制
// .js/** * @name * @param {Number} * @description */
登录后复制
这样在js里面的注释就显得非常高大上.
2.dom部分格式化.
vue里面建议dom的每个属性独占一行(也是我的书写习惯),像这样:
// .vue
登录后复制
但是,只要一格式化,就…
// .vue
登录后复制
而jsx里面就不会出现这种情况,只要是换行了,就算格式化也不会出现上述的问题.
相关推荐：
分解React组件的几种进阶方法
React 16.3新特性分析
React 16.3之Context API详解
以上就是react项目案例总结的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2786571.html
