React-JSX

杰泥龟
234 阅读6分钟

最近一直在看书------>React(第二版)

打算写一下每天看的东西和大家共同学习,我把书上+官网+个人理解 综合到一起。（不喜勿喷）

话不多说直接开始

JSX

1：什么是JSX----->JSX就是JavaScript XML

开发者建议在React当中配合使用JSX,JSX可以很好地描述 UI 应该呈现出它应有交互的本质形式。

JSX是在React组建内部构建标签的XML语法.React不使用JSX一样可以正常运行。可是用JSX的话 可以提高组件的可读性,所以推荐大家使用JSX

举个例子,在不使用JSX的React中创建一个标签大概这样：

React.createElement('h1',{className:'question'},'Quetions');
如果使用了JSX,就会变得更加熟悉且简练
<h1 className="question">Questions</h1>

和以前在JavaScript中嵌入HTML的方案相比,JSX有几个特性：

1.JSX是一种语句法变换，每一个JSX节点都对应着一个JavaScript函数
2.JSX既不提供也不需要运行时的库
3.JSX并没有改变或添加JavaScript的语义 他只是函数调用

因为与HTML使用的相似点使得JSX在React中有比较好的体验，下面说下使用JSX的好处以及在程序中的作用

使用JSX的好处

这个也是我在网上看到的最多的问题 ε=(´ο｀*)))

JSX的好处----->随着代码库的慢慢增大,组件越来越复杂,这时候JSX的好处就越来越明显

1.更加熟悉
2.更加的语义化
3.更加直观
4.关注分离点

接下来我给大家一个一个解释下这四个点

更加熟悉

许多团队都有非开发人员,比如熟悉HTML的UI及UX和测试.....
使用JSX之后,大家都可以更加轻松地阅读和贡献代码(让UI,测试...帮写代码不现实^_^)
而且熟悉基于XML语言的人都可以快速掌握JSX.(简单来说就是方便大家)

更加语义化

语义化这种设计为我们提供了使用类HTML语法来声明组件结构和数据流向的能力,大家都知道JSX后续会被转换为原生的JavaScript.
JSX允许在应用程序中使用预定的HTML5标签及自定义组件.
举个例子 我们要创建一个Diverder元素，他有一个左边的标题和一个占满右侧的水平分割线，大致结构是这样的：
<div className="diverder">
    <h2>diverder</h2><hr />
</div>
之后把这个HTML包裹进Divider React.Component之后,就可以像是使用HTML元素一样的使用它了.相比HTML.Divider提供了更丰富的语义.
<Divider />

更加直观

像是上面的小组件,JSX也可以让它更加简单,直观.当在有上百个甚至更多的项目中.这种好处会被无限的放大.
尤其是在函数作用内,使用JSX语法的版本和使用原生的JavaScript相比,标签意图更直观,可读性也更强.
原生JavaScript版本：
render:function(){
    return React.createElement('div',{className:'divider'},
        'Label Text',
        React.createElement('hr')
    );
}
下面是JSX版本:
render:function(){
    return(
        <div className="divider">
            Label Text
            <hr />
        </div>  
    );
}
这样看JSX版本更加易懂,也方便调试

关注分离点

这点也是React的核心,指在将HTML标签以及生成的标签的耦合问题（程序模块间存在联系的紧密程度）
在React中,不需要把整个应用程序分离成视图和模板两种.
React支持大家去创建一个独立的组件,并把逻辑和标签封装到里面.
JSX以干净和简介的方式保证了组件当中的标签和逻辑的相互分里.不仅是提供了清晰且直观的方法来描述组件树,同时也让应用程序更加符合逻辑.

目前为止,我们已经说了JSX的几个好处,接下来说下JSX在复合组件时经常会用到的几个点吧（上面偏观念,下面经常会用到）

我们按照顺序说 
    一.JSX和HTML有何不同（需要有个区分,别弄混了）
    二.注释
    三.使用动态值
    四.属性
    五.条件判断

  • JSX和HTML有何不同

    强调这点主要是怕大家弄混了...
JSX和HTML很像,可并不是HTML语法的复制品.在JSX规范中这样声明了:
这个规范(JSX)并不尝试去遵循任何XML或HTML规范。JSX是作为一种ECMAScript特性来设计的。至于大家觉得JSX很像
XML这个事情.仅仅是因为大家比较熟悉XML.----->以上内容来自http://facebook.github.io/jsx/
顺道说下ECMA是指：电脑操作格式标准

  • 注释

    这个说起来比较简单
内联（比如元素的className,input的placeholder.....）用/**/ 或 //
<div>
    <input
    /* 
        xxxxx-xxxxx
    */
    name = "email"
    placeholder="Email Address" />
</div>
或
<div>
    <input 
    name="email" // xxxxxx-xxxxxx
    placeholder="Email Address" />
</div>
作为子节点一般用 {/**/} 可以跨多行
<div>
    {/* XXXXX-XXXXX
    XXXXX-XXXXX */}
    <input name="email" placeholder="Email Address" />
</div>

  • 使用动态值

    JAX将花括号之间的内容{...}渲染为动态值
在花括号内放入的任何东西都会被求值,得到结果被渲染为标签中的节点/若干节点.
比如:
var text = '2020'
<h2>{text}</h2>
对于更复杂的逻辑,可能更倾向于将其转化为一个函数来进行求值.可以通过在花括号内调用这个函数来达到
比如:
function dateToString(d) {
    return [
        d.getFullYear(),
        d.getMonth()+1,
        d.getDate()
    ].join('-');
};
<h2>{dateToString(new Date()))}</h2>

    • 属性

    在HTML当中可以使用内联的方式给每个节点设置相应的属性,
例:<div id="XXX" class="xxxXXX">...</div>
JSX以同样的方式实现了属性的设置,同事提供了将属性设置为动态JavaScript变量的便利方法（语法糖?）.要设置动态的属性,可以吧原本引用起来的文本换成花括号包裹的JavaScript变量.
var id = this.props.id;
var classes = 'xxxXXX'
...
<div id={id} className={classes}>...</div>
对于更复杂的情况,我肯可以把属性设置为一个函数调用返回的结果
<div id={this.getId()}>...</div>
React每次渲染一个组件时,指定的变量和函数都会被取值,而最终生成的DOM结构会反映出这个的最新状态

    条件判断

    想要在组建中添加判断似乎是一件较为困难的事,因为if/else逻辑很难用HTML标签来表示.直接在JSX内部添加if语句会渲染出无效的JavaScript
<div className={if(true){'xxx'}}>...</div>
可是我们可以用其他的方法
1.使用三目运算符
2.设置一个变量并在属性中引用它
3.使用&&
-------------------------------------------------------分割线-------------------------------------------------
1.三目运算符
render(){
    return(
        <div
            className = {this.state.bool?'xxx':''}
        >
        ...
        </div>
    )
}
三目对于文本角度来讲可以正常运行,可想要在其他情况下很好的应用React.Component三目运算符可能会显得笨重写这时候我们通常用↓
2.使用变量
getComplete(){
    return this.state.isComplete?'xxx':''
}
render(){
    var isComplete = this.getComplete
    return(
        <div className = {isComplete>...</div>
    )
}
个人认为用得少相比三目这两者对比："变量"更可控，三目更舒服

3.使用&&
对于null或者false的值React不会输出任何内容,所以可以使用一个后面跟随了期望字符串的布尔值来实现条件判断
(简单来说为true会使用,false不会使用)
render(){
    return(
        <div className={this.state.bool && 'xxx'>
        ...
        </div>
    )
}
avatar
文章
阅读
粉丝