目 录CONTENT

文章目录

React-JSX简介

恪晨
2019-07-10 / 0 评论 / 0 点赞 / 917 阅读 / 1 字 / 正在检测是否收录...
温馨提示:
慢慢看,慢慢读,不行就边听歌边读

初探JSX

  相对于AngularJS,React采用了与之不同的方式,这也导致在从AngularJS切换到React时感觉及其别扭。React中使用了JSX,一种JavaScript的扩展语法,更加通俗的说,它将html融入了js中,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式,JSX生成React"元素",React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。

JSX基本语法

    const name = 'hello world';
    // 定义一个React元素
    const element = <h1>wangBo, {name}</h1>;
    
    ReactDom.render(
    // 使用定义的元素,并绑定到root节点上
        element,
        document.getElementById('root')
    )

  老实说,我看到这个语法的时候是崩溃的,相对于之前的采用html+css+js三文件结构的写法,React中相当于删除了html文件,将html与js结合形成JSX语法。在JSX语法中,使用{}将JavaScript表达式包裹,{}中可以放置任何的JavaScript表达式。

    // 定义一个名称为test的函数
    function test(user) {
        return user.firstName + user.lastName;
    }
    
    // 定义一个名称为user的对象
    const user = {
        firstName: 'w',
        lastName: 'b'
    }
    
    // 创建React元素,使用函数与对象
    const element = (
        <h1>你好,{test(user)}</h1>  
    );
    
    // 渲染DOM
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

  在上述代码中,React元素element中使用了user对象,以及test函数,最终页面上将会显示你好,wb

JSX属性与对象

  • JSX属性
    1、在JXS中,可以通过引号来将属性值指定为字符串字面量,这与AngularJS写法类似。
    const element = <h1 tabIndex="1"></h1>
    

    2、也可以通过{}使用JavaScript表达式来定义属性值,这与AngularJS中不一致的是AngularJS中是使用了两个大括号。

    const element = <input value={user.operate} />
    
  • JSX对象
    在React中,之所以能够使用上述的这种写法,是因为Babel会将JSX转译为React.createElement()函数进行调用。下面两种代码的写法实现的功能是一致的。
        const element = (
          <h1 className="greeting">
            Hello, world!
          </h1>
        );
    
        const element = React.createElement(
          'h1',
          {className: 'greeting'},
          'Hello, world!'
        );
    

    事实上,React更完整的创建React元素的过程是这样的,但是这也是简化后的过程,更加深层的还需要去看React源码。

        const element = {
          type: 'h1',
          props: {
            className: 'greeting',
            children: 'Hello, world!'
          }
        };
    

采用上述方式创建的element,被称为"React元素",React通过读取这些对象,然后进行DOM构建,并保持实时的更新。

JSX子元素

  因为JSX中的React元素类似与html,那么在创建React元素的时候,可以进行多个元素的嵌套,以及多个元素的并列。如:

    const element = (
        <div>
            <h3>我是h3</h3>
            <h4>我是h4</h4>
        </div>
    );

总结

  通过上述,可以看出在React开发过程中,使用JSX将DOM元素构建为"React元素",React通过读取这些"元素",构建DOM,并进行相关的处理。这种写法与AngularJS差异较大,在进行React学习过程中,应该把它当作新的语法来看待。

0
博主关闭了当前页面的评论