今日头条 焦点资讯 营销之道 企业报道 淘宝运营 网站建设 软件开发 400电话
  当前位置: 首页 » 资讯 » 软件开发 » 正文

react项目案例总结

放大字体  缩小字体 发布日期:2018-02-10  来源:企业800网  作者:新格网  浏览次数:315  【去百度看看】
核心提示:刚刚开始写组件的时候,感觉难度不大(跟vue差不多)。最有意思的应该是jsx语法,个人感觉,jsx的功能性确实比vue的template更强,而且可读性更高.
刚刚开始写组件的时候,感觉难度不大(跟vue差不多)。最有意思的应该是jsx语法,个人感觉,jsx的功能性确实比vue的template更强,而且可读性更高.

// vue
<p :id="text" :class="{'active':isActive}" v-text="'hello! ' + msg"></p>
// jsx
<p id={text} className={isActive && 'active'}>hello !{msg}</p>
  1. 在jsx里面没有指令,而且jsx里面 {} 代表要执行的js语句,它的效果类似 return ,它会有返回值.这样的话,更好理解jsx的内容,jsx里面的dom不是真正的dom,只是一种表示dom的语法,{}里面的内容可以完全理解为js,这种整个jsx就可以完成理解为原生js写的html模版.

  2. 属性计算的部分,vue里面需要在属性名前面加:,在jsx里面则不需要.

  3. 另外,在vue里面的dom的contentText不使用{{}}来渲染,使用因为在vue页面生成之前,模版语法部分没有渲染出来,就会在页面上先出现{{content}},再一闪变成真正的文本内容.

再举个数组遍历渲染的栗子
// 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

这样在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组件的几种进阶方法

React 16.3新特性分析

React 16.3之Context API详解

以上就是react项目案例总结的详细内容,更多请关注php中文网其它相关文章!

 
关键词: react,总结,项目
 
[ 资讯搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅 | 吉ICP备11001726号-6
企业800网 · 提供技术支持