React基础之JSX语法

概述

JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。

使用JSX语法后,你必须要引入babel的JSX解析器,把JSX转化成JS语法,这个工作会由babel自动完成。同时引入babel后,你就可以使用新的es6语法,babel会帮你把es6语法转化成es5语法,兼容更多的浏览器。

Jsx语法例子

为了更好的理解Jsx语法的特点,我们先看一个官网例子helloworld。

  <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Hello React!</title>
      <script src="vendor-js/react.js"></script>
      <script src="vendor-js/react-dom.js"></script>
      <script src="vendor-js/babel-core/browser.min.js"></script>
    </head>
    <body>
      <div id="example"></div>
      <script type="text/babel">
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
      </script>
    </body>
  </html>

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。而如果转化成纯JavaScript 的语法来写:

 <script type="text/javascript">
      ReactDOM.render(
        React.DOM.h1(null,'hello,world!'),
        document.getElementById('example')
      );
    </script>

在JSX语法中有两个地方需要注意:

1, script标签的 type 属性为 text/babel,这是React 独有的 JSX 语法,跟 JavaScript不兼容。凡是在页面中直接使用 JSX 的地方,都要加上 type=”text/babel”。

2, 一共用了三个库: react.js 、react-dom.js 和 browser.min.js,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。

Jsx 的特点

jsx语法具有以下特点:

  • 类XML语法容易接受,结构清晰
  • 增强JS语义
  • 抽象程度高,屏蔽DOM操作,跨平台
  • 代码模块化

类XML语法,易于理解

JSX本身就和XML语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

var arr = [
 <h1>Hello world!</h1>,
 <h2>React is awesome</h2>,
];
ReactDOM.render(
 <div>{arr}</div>,
 document.getElementById('example')
);

组件化

使用jsx来将代码封装成React组件,然后像插入普通 HTML 标签一样,在其他地方插入这个组件。使用React.createClass还可以生成一个组件。而采用组件化开发使代码更加清晰,重用性也更高。

var MyComponent=React.createClass({
  render: function() {
   return <h1>Hello world!</h1>;
 }
});
ReactDOM.render(
 <MyComponent />,
 document.getElementById('example')
);

使用Jsx应注意;

  • 在react中通常约定组件类的第一个字母必须大写,html标签都是小写
//要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.getElementById('example'));
//要渲染 React 组件,只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent  />;
React.render(myElement, document.getElementById('example'));
  • 组件类只能包含一个顶层标签,否则会报错
//var myDivElement =<h1>你好</h1><h1>hello</h1>;
//上述写法是会报错的,要写成只有一个顶层标签:
var myDivElement =<div><h1>你好</h1><h1>hello</h1></div>;

上述代码一个静态的组件,而使用状态机State可以制作动态组件。来看一个例子:

var MyComponent=React.createClass({
  getInitialState: function() {
       return {clickNum: 0};
  },
  handleClick:function(){
    var num=this.state.clickNum;
    num++;
    this.setState({clickNum:num});
  },
  render: function() {
   return (
      <div>
        <h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>
        <h2 style={{color:'red'}}>点击{this.props.name}次数:{this.state.clickNum}</h2>
      </div>
    );
 }
});
ReactDOM.render(
  <div>
     <MyComponent name="张三" />
     <hr/>
     <MyComponent name="李四" />
  </div>,
 document.getElementById('example')
);

上面代码中定义的MyComponent组件包含属性,状态和事件,是一个简单的比较完整的组件。使用props通过父组件进行传递值,使用state定义组件自己的状态。

关于组件的属性,我们应该注意以下几点:

  • class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
  • 直接在标签上使用style属性时,要写成style={{}}是两个大括号,外层大括号是告知jsx这里是js语法,和真实DOM不同的是,属性值不能是字符串而必须为对象,需要注意的是属性名同样需要驼峰命名法。即margin-top要写成marginTop。
  • this.props.children 不要children作为把对象的属性名。因为this.props.children获取的该标签下的所有子标签。this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。

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

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

PropTypes

组件的属性props可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。React中使用PropTypes进行参数的校验。

var MyTitle = React.createClass({
   propTypes: {
     title: React.PropTypes.string.isRequired,
   },
   render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的代码PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串,如果传入的不是字符串,就会报错。

获取DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

var MyComponent = React.createClass({
   handleClick: function() {
     this.refs.myTextInput.focus();
   },
   render: function() {
     return (
     <div>
       <input type="text" ref="myTextInput" />
       <input type="button" value="Focus the text input" onClick={this.handleClick} />
     </div>
     );
   }
});

为了获取真实的DOM节点,html元素必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

求值表达式

在编写JSX时,在 { } 中不能使用语句(if语句、for语句等等),但可以使用求值表达式,这本身与JSX没有多大关系,是JS中的特性,它是会返回值的表达式。我们不能直接使用语句,但可以把语句包裹在函数求值表达式中运用。

组件生命周期

在React中,组件的生命周期主要有三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。
  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount() 此外,React 还提供两种特殊状态的处理函数。
  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三杯水

JavaScript对比两个百分数大小

23630
来自专栏Python

Django比较相等或者不相等的模板语法ifequal / ifnotequal

ifequal / ifnotequal      在模板语言里比较两个值并且在他们一致的时候显示一些内容,Django提供了 ifequal 和 ifnote...

35260
来自专栏柠檬先生

Reactjs 入门基础(一)

实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 browser.min.js:   1,react.min.js ...

22190
来自专栏互联网开发者交流社区

JS总结

17540
来自专栏coding for love

CSS常用布局实现03-水平垂直居中

其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

10310
来自专栏云端架构

【云端架构】前端必备常用CSS语法

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

37080
来自专栏JavaEdge

深入了解React.js的JSX1 JSX 与HTML2 JSX 和HTML 的不同之处

23850
来自专栏向治洪

深入理解 JSX

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 为什么要使用 JSX? 你不需要为...

235100
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

13120
来自专栏flutter开发者

Flutter动画【2】

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

1.1K40

扫码关注云+社区

领取腾讯云代金券