react项目案例总结

来源：动视网责编：小采时间：2020-11-27 20:03:35

react项目案例总结

react项目案例总结:刚刚开始写组件的时候，感觉难度不大（跟vue差不多）。最有意思的应该是jsx语法，个人感觉，jsx的功能性确实比vue的template更强,而且可读性更高.// vue <p :id="text" :class="{'active':isActiv

推荐度：

点击下载本文 文档为doc格式

导读react项目案例总结:刚刚开始写组件的时候，感觉难度不大（跟vue差不多）。最有意思的应该是jsx语法，个人感觉，jsx的功能性确实比vue的template更强,而且可读性更高.// vue <p :id="text" :class="{'active':isActiv

// vue
<ul>
 <li v-for="(item,index) in list" :key="index" v-if="showItem(item)">
 <span v-text="item.label"></span>
 </li>
</ul>

// vue的methods属性
methods:{
 showItem(item){
 return item.label.indexOf('abc') !== -1
 }
}

// jsx
<ul>
 {list.map((item,index) => {
 return item.label.indexOf('abc') !== -1 && (
 <li key={index}>
 <span>{item.label}</span>
 </li>
 )
 })}
</ul>

你会发现,在一些比较简单渲染需求时,使用vue的template会比较简单直接,而且很易懂.但是如果涉及一些比较复杂的逻辑处理渲染,jsx更直观,因为jsx的语法跟js的差异不大,相当于用js来描述需要如何渲染dom结构.当然jsx并不是说可以完成使用js的语法来写dom,{}里面只能是一个表达式,所以像if else或者switch这种语法在{}是不能用的.

关于组件模版的格式化,在react里面感觉更好一点,因为react组件就是用js写的,格式化和注释部分在编辑器得到更好的支持,但是.vue文件目前还找不到针对的格式化插件.
目前我遇到的问题有2个.

1.组件注释的问题.
在写组件的时候,我比较习惯写注释.在js文件里面,注释会更加的明显和方便,但是在vue文件里面注释感觉就没啥亲和力.

// .vue
<template>
<!--
 这里是注释,而且没有高亮效果.
 -->
</template>

// .js
/**
 * @name
 * @param {Number}
 * @description
 */

这样在js里面的注释就显得非常高大上.

2.dom部分格式化.
vue里面建议dom的每个属性独占一行(也是我的书写习惯),像这样:

// .vue
<p
 id="box1"
 class="classA classB"
 :class="{'active':isActive}"
></p>

但是,只要一格式化,就...

// .vue
<p id="box1" class="classA classB" :class="{'active':isActive}"></p>

而jsx里面就不会出现这种情况,只要是换行了,就算格式化也不会出现上述的问题.

react项目案例总结

推荐度：

点击下载本文 文档为doc格式

标签：例子案例项目

热门焦点

react项目案例总结

react项目案例总结

react项目案例总结

最新推荐

猜你喜欢

热门推荐