[译] React 入门
这篇文章将概括性的介绍一下如何用 ReactJS 进行开发。我将介绍一些基础知识,不会有过于深入的分析。你可以结合这些代码阅读本文。 一些概念React 的 API 非常少,简单易懂易用。在正式开始之前先介绍几个概念,一个一个来。 React 元素 是表现为 HTML 元素的 JavaScript 对象,他们并不真实存在于浏览器中。他们最终表现为类似 JSX 是一种创建 React 元素和 components 的技术。例如 虚拟DOM 是由 React 元素和 components 组成的 JavaScript 树形结构对象。React 将虚拟 DOM 渲染到浏览器中变成最终的用户界面。React 会观察虚拟 DOM 的变化,并自动将这些变化渲染到浏览器端。 理解了上面这些概念,我们可以开始使用 React 写一些例子了。下面会开发一系列功能,每一个例子都是在前一个例子的基础上进行改进。我们会编写一个类似 instagram 的照片流程序 - 没有比这更好的示例程序了。 渲染第一步是渲染虚拟元素(React 元素或 component)。注意,虚拟元素只存在于内存中,必须显式地告诉 React 将它渲染到浏览器上。 React.render(<img src='http://tinyurl.com/lkevsb9' />,document.body) 查看 JSBin
组件(Components)组件是 React 的精髓所在。它们是自定义的 React 元素,通常有一些功能和结构定义。 var Photo = React.createClass({ render: function() { return <img src='http://tinyurl.com/lkevsb9' /> } }); React.render(<Photo />,document.body); 查看 JSBin
这个 这个组件跟之前的渲染图片没有太大区别,但是它为将来添加自定义功能奠定了基础。 属性(Props)可以把属性看做组件的配置参数,看起来非常像 HTML 属性。 var Photo = React.createClass({ render: function() { return ( <div className='photo'> <img src={this.props.imageURL} /> <span>{this.props.caption}</span> </div> ); } }); React.render(<Photo imageURL='http://tinyurl.com/lkevsb9' caption='Hong Kong!' />,document.body); 查看 JSBin
组件不会改变它的属性,他们是静止不变的。如果组件里包含动态数据,就要用到状态(State)对象。 状态(State)状态对象用来记录随时可能变化的数据。 var Photo = React.createClass({ toggleLiked: function() { this.setState({ liked: !this.state.liked }); },getInitialState: function() { return { liked: false }; },render: function() { var buttonClass = this.state.liked ? 'active' : ''; return ( <div className='photo'> <img src={this.props.src} /> <div className='bar'> <button onClick={this.toggoleLiked} className={buttonClass}> ? </button> <span>{this.props.caption}</span> </div> </div> ); } }); React.render(<Photo src='http://tinyurl.com/lkevsb9' caption='Hong Kong!') />,document.body); 查看 JSBin 组件的状态给组件引入了一些复杂性。 这个组件有一个新的函数 这个组件还有另一个新函数 在
看看在浏览器中渲染出来是什么效果:
上例演示了点击按钮来改变类名 组合组件(Composition)将一些小的组件(components)链接起来形成一个大的组合组件。例如 var Photo = React.createClass({ toggleLiked: function() { this.setState({ liked: !this.state.liked }); },render: function() { var buttonClass = this.state.liked ? 'active' : ''; return ( <div className='photo'> <img src={this.props.src} /> <div className='bar'> <button onClick={this.toggleLiked} className={buttonClass}> ? </button> <span>{this.props.caption}</span> </div> </div> ); } }); var PhotoGallery = React.createClass({ render: function() { var photos = this.props.photos.map(function(photo) { return <Photo src={photo.url} caption={photo.caption} /> }); return ( <div className='photo-gallery'> {photos} </div> ); } }); var data = [ { url: 'http://tinyurl.com/lkevsb9',caption: 'Hong Kong!' },{ url: 'http://tinyurl.com/mxkwh56',caption: 'Cows' },{ url: 'http://tinyurl.com/nc7jv28',caption: 'Scooters' } ]; React.render(<PhotoGallery photos={data} />,document.body); 查看 JSBin
结语本文只是一篇 React 入门,我强烈推荐大家去读 React 官方文档,里面包含了所有你想要的细节。 还有一些值得一看的视频资源。Pete Hunt 讲的 re-thinking web application architecture with React 和 Tom Occhino 讲的 React Native for building native mobile applications with React (WIP)。 本文并没有介绍如何设置你的本地开发环境,官方文档有相关介绍,或者,你还可以看看我的解决方案 boilerplate。 如果本文有什么错误之处,欢迎在 twitter 上联系我,或者给我提 pull request。尽情给我发邮件吧,我很乐意效劳。 P.S - 如果你准备开发一个更复杂的 React 应用,推荐 The Flux Quick Start Guide(译注:中文译文 《Flux 入门》)。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |