React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息
React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。把 import React,{ Component } from 'react' import ReactDOM from 'react-dom' import './index.css' class Header extends Component { render () { return ( <div> <h1>React 小书</h1> </div> ) } } ReactDOM.render( <Header />,document.getElementById('root') ) 我们在文件头部从
接下来的代码你看起来会比较熟悉,但又会有点陌生。你看其实它跟我们前几节里面讲的内容其实很类似,一个组件继承 JSX 原理为了让大家深刻理解 JSX 的含义。有必要简单介绍了一下 JSX 稍微底层的运作原理,这样大家可以更加深刻理解 JSX 到底是什么东西,为什么要有这种语法,它是经过怎么样的转化变成页面的元素的。 思考一个问题:如何用 JavaScript 对象来表现一个 DOM 元素的结构,举个例子: <div class='box' id='content'> <div class='title'>Hello</div> <button>Click</button> </div> 每个 DOM 元素的结构都可以用 JavaScript 的对象来表示。你会发现一个 DOM 元素包含的信息其实只有三个:标签名,属性,子元素。 所以其实上面这个 HTML 所有的信息我们都可以用合法的 JavaScript 对象来表示: { tag: 'div',attrs: { className: 'box',id: 'content'},children: [ { tag: 'div',arrts: { className: 'title' },children: ['Hello'] },{ tag: 'button',attrs: null,children: ['Click'] } ] } 你会发现,HTML 的信息和 JavaScript 所包含的结构和信息其实是一样的,我们可以用 JavaScript 对象来描述所有能用 HTML 表示的 UI 信息。但是用 JavaScript 写起来太长了,结构看起来又不清晰,用 HTML 的方式写起来就方便很多了。 于是 React.js 就把 JavaScript 的语法扩展了一下,让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法,这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。 上面的代码: import React,{ Component } from 'react' import ReactDOM from 'react-dom' import './index.css' class Header extends Component { render () { return ( <div> <h1 className='title'>React 小书</h1> </div> ) } } ReactDOM.render( <Header />,document.getElementById('root') ) 经过编译以后会变成: import React,{ Component } from 'react' import ReactDOM from 'react-dom' import './index.css' class Header extends Component { render () { return ( React.createElement( "div",null,React.createElement( "h1",{ className: 'title' },"React 小书" ) ) ) } } ReactDOM.render( React.createElement(Header,null),document.getElementById('root') );
这里再重复一遍:所谓的 JSX 其实就是 JavaScript 对象。每当在 JavaScript 代码中看到这种 JSX 结构的时候,脑子里面就可以自动做转化,这样对你理解 React.js 的组件写法很有好处。 有了这个表示 HTML 结构和信息的对象以后,就可以拿去构造真正的 DOM 元素,然后把这个 DOM 元素塞到页面上。这也是我们最后一段代码中 ReactDOM.render( <Header />,document.getElementById('root') )
所以可以总结一下从 JSX 到页面到底经过了什么样的过程:
有些同学可能会问,为什么不直接从 JSX 直接渲染构造 DOM 结构,而是要经过中间这么一层呢? 第一个原因是,当我们拿到一个表示 UI 的结构和信息的对象以后,不一定会把元素渲染到浏览器的普通页面上,我们有可能把这个结构渲染到 canvas 上,或者是手机 App 上。所以这也是为什么会要把 第二个原因是,有了这样一个对象。当数据变化,需要更新组件的时候,就可以用比较快的算法操作这个 JavaScript 对象,而不用直接操作页面上的 DOM,这样可以尽量少的减少浏览器重排,极大地优化性能。这个在以后的章节中我们会提到。 总结要记住几个点:
下一节中我们将介绍《React.js 小书 Lesson7 - 组件的 render 方法》。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |