React:JSX

2018-06-19 10:55 更新
JSX,全称:JavaScript XML,一种在React组件内部构建标签的类XML语法。React使用JSX来替代常规的JavaScript。

JSX的特征
  • JSX是一种句法变换---每一个JSX节点都对应着一个JavaScript函数
  • JSX既不提供也不需要运行时库
  • JSX并没有改变或添加JavaScript的语义---它只是简单的函数调用而已。

虽然React并不强制使用JSX语法,但是使用JSX有不少好处
  • 运行使用熟悉的语法来定义HTML元素树。
  • JSX执行更快,因为它在编译为JavaScript代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误。
  • 提供更加语义化且易懂的标签。
  • 是原生的JavaScript


JSX简单使用

ReactDOM.render(

    <h1>Hello,world!</h1>,

    document,getElementById('example')

);

注意:由于React.render方法只能解析一个标签,也就是只能包含一个顶层标签,如果要放多个标签,可以将多个标签放到一个div内;多个组件同样是一个道理。
多个标签:

ReactDOM.render(

  <div>

    <h1>Hello</h1>

    <p>一起学习吧</p>

  </div>,

  document.getElementById('example')

);

多个组件:

var Hello=React.createClass({

  render:function(){

    return (

      <div className="item">Hello</div>

    );

  }

});

var World=React.createClass({

  render:function(){

    return (

      <div>world</div>

    );

  }

});

ReactDOM.render(

  <div>

    <Hello/><World/>

  </div>,

  document.getElementById('example')

);


//结果:helloworld


使用动态值
JSX将两个花括号之间的内容{..}渲染为动态值。花括号内指明了一个JavaScript上下文环境:在花括号中放入的任何东西都会被进行求值。
JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

简单值:

var text='Hello world';

ReactDOM.render(

  <div>{text}</div>,

  document.getElementById('example')

);

//结果:Hello world

函数

function dateToString(d){

  return [

    d.getFullYear(),

    d.getMonth()+1,

    d.getDate()

  ].join('-');

};

ReactDOM.render(

  <div>{dateToString(new Date())}</div>,

  document.getElementById('example')

);


//结果:2016-9-4

数组:JSX 允许在模板中插入数组,数组会自动展开所有成员

var text=['hello','world'];

ReactDOM.render(

  <div>{text}</div>,

  document.getElementById('example')

);


//结果:helloworld


子节点
React将开始标签与结束标签之间的所有子节点保存在一个名为this.props.children的特殊组件属性中。

var Divider=React.createClass({

  render:function(){

    return (

      <div className="divider">

        <h2>{this.props.children}</h2>

      </div>

    )

  }

});


ReactDOM.render(

  <Divider>Props</Divider>,

  document.getElementById('example')

)

//渲染结果:

<div class="divider">

  <h2>Props</h2>

</div>


在上面的例子里,this.props.children == ['Props']。

JSX与HTML有何不同?

1.属性
在HTML中,我们用内联的方式给每个节点设置属性:

<div id="id" class="className"></div>

而在JSX中,是这样的:

var id='id';

var className='className';

<div id={id} className={className}></div>

格式都是一致,只不过引号换成了大括号。
更为复杂的情景,还可以把属性设置为一个函数调用返回的结果。

<div className={this.getClassName()}></div>

React每渲染一个组件时,指定的变量和函数会被求值,而最终生成的DOM结果会反映出这个新的状态。

2.条件判断
在JSX中加入if语句会渲染出无效的JavaScript,但还是有方法的:

  • 使用三目运算符
  • 设置一个变量并在属性中引用
  • 将逻辑转化到函数中
  • 使用&&运算符

使用三目运算符

render:function(){

  return (

    <div className={this.state.isActive?'active':''}></div>

  )

}


使用变量

getIsActive:function(){

  return this.state.isActive?'active':''

}


render:function(){    

  return ( 

    var isActive=this.getIsActive();  

    <div className={isActive}></div>   

  )  

}


使用函数

getIsActive:function(){

  return this.state.isActive?'active':''

}


render:function(){    

  return ( 

    <div className={this.getIsActive()}></div>   

  )  

}


使用逻辑与(&&)运算符

在React中,null或false是不会输出任何内容的。

render:function(){

  return <div className={this.state.isActive && 'active'}></div>

}

如果这个布尔值为true,那么后面的值将会输出。


非DOM属性

  • key
  • ref
  • dangerousSetInnerHTML


键(key)

key是一个可选的唯一标识符。


引用(ref)

ref运行父组件在render方法之外保持对子组件的一个引用。

render:function(){

  return (

    <div>  <input ref='myInput'/> </div>

  )

}

当设置了ref后,我们就可以在组件的任何地方使用 this.refs.myInput 获取这个引用了。通过引用获取到的这个对象被称为 支持实例 。它并不是真的DOM,而是React在需要时用来创建DOM的一个描述对象。

我们可以使用 this.refs.myInput.getDOMNode() 访问真实的DOM节点。


事件


在所有浏览器中,事件名已经被规范化并统一用驼峰形式表示,例如,click变成了onClick,change变成了onChange。

handleClick:function(event){},

render:function(){

  return <div onClick={this.handleClick}></div>

}

注意:React自动绑定了组件所有方法的作用域,我们永远不需要去手动绑定。


注释

在JSX语法中,有两种方式添加注释:

  • 当作一个元素的子节点
  • 内联在元素的属性中

作为子节点
子节点形式的注释只需要简单的包裹在花括号内即可,并且可以跨行

<div>

  {/*注释*/}

  <p></p>

</div>


作为内联属性

<div>

  <p

  /*注释*/

  ></p>

</div>


特殊属性

由于JSX最后是转换为原生的JavaScript的,所以有一些关键词是不能使用的,例如:

用 htmlFor 代替 for 

用 className 代替 class 


样式

React把所有的内联样式都规范化为了驼峰形式,如果你使用过原生的JavaScript中的DOM的style属性,就会发现两者是一致的。

var styles={

  borderColor:'#000',

  borderRadius:'5'

}

React.createClass({

  render:function(){

    return (<div style={styles}></div>)

  }

})


React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。


如果往原生 HTML 元素里传入 HTML 规范里不存在的属性,React 不会显示它们。如果需要使用自定义属性,要加 data- 前缀。

<div data-custom-attribute="foo" />


以 aria- 开头的 [网络无障碍] 属性可以正常使用。

<div aria-hidden={true} />


题外话:

最近好像React的中文官网好像秀逗了,直接点击进去都是英文,如果需要查看中文版,可以这样:

英文:http://reactjs.cn/react/docs/getting-started.html

中文:http://reactjs.cn/react/docs/getting-started-zh-CN.html

就是加上-zh-CN




以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号