这篇文章将概括性的介绍一下如何用 ReactJS 进行开发。我将介绍一些基础知识,不会有过于深入的分析。你可以结合这些代码阅读本文。

##概念

React 的 API 非常少,简单、易懂、易用。在正式开始之前先介绍几个概念,一个一个来。

React 元素 是表现为 HTML 元素的 JavaScript 对象,他们并不真实存在于浏览器中。他们最终表现为类似h1, divsection 之类的浏览器元素。

组件(Components) 是开发人员创建的 React 元素。他们通常包含了用户界面的结构和功能。 比如 NavBarLikeButtonImageUploader等等。

JSX 是一种创建 React 元素和 components 的技术。例如 <h1>Hello</h1> 是一个用 JSX 写的 React 元素。同样可以用纯 JavaScript 写成 React.DOM.h1(null, 'Hello');。JSX 读写起来更轻松,最终上线之前必须将 JSX 语句转为 JavaScript 语句。

虚拟DOM 是由 React 元素和 components 组成的 JavaScript 树形结构对象。React 将虚拟 DOM 渲染到浏览器中变成最终的用户界面。React 会观察虚拟 DOM 的变化,并自动将这些变化渲染到浏览器端。

理解了上面这些概念,我们可以开始使用 React 写一些例子了。下面会开发一系列功能,每一个例子都是在前一个例子的基础上进行改进。我们会编写一个类似 instagram 的照片流程序 - 没有比这更好的示例程序了。

下载所需要的开发环境,直接在script.js文件里面开发就可以了。

##渲染(render)

第一步是渲染虚拟元素(React 元素或 component)。注意,虚拟元素只存在于内存中,必须显式地告诉 React 将它渲染到浏览器上。

React.render(<img src='http://www.zhuowenli.com/lib/img/icon.png' />, document.body)

查看代码:JSBin

render 函数接收两个参数:虚拟元素和真实的浏览器 DOM 元素。React 将虚拟元素插入到指定的 DOM 元素中。上例中可以看到图片被渲染出来了。

##组件(Components)

组件是 React 的精髓所在。它们是自定义的 React 元素,通常有一些功能和结构定义。

var Photo = React.createClass({
    render: function() {
        return <img src='http://www.zhuowenli.com/lib/img/icon.png' />
    }
});

React.render(<Photo />, document.body);

查看代码:JSBin

createClass 函数接收一个对象,这个对象实现了 render 方法。

这个Photo组件定义了 <Photo />元素,并且渲染到 document.body 里。

这个组件跟之前的渲染图片没有太大区别,但是它为将来添加自定义功能奠定了基础。

##属性(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://www.zhuowenli.com/lib/img/icon.png' caption='Logo!' />, document.body);

查看代码:JSBin

imageURLcaption 两个属性被传递到 Photo 组件内的 render 函数里。

imageURL 被用在 React 图片元素的 src 属性,caption 被用作 React span 元素内的文本。

组件不会改变它的属性,他们是静止不变的。如果组件里包含动态数据,就要用到状态(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://www.zhuowenli.com/lib/img/icon.png' caption='Logo!') />, document.body);

查看代码:JSBin

组件的状态给组件引入了一些复杂性。

这个组件有一个新的函数 getInitialState。 当组件初始化时 React 会去调用这个函数。根据它返回的对象来设置组件的初始状态(正如函数名所表达的那样)。

这个组件还有另一个新函数 toggleLiked。它调用了 setState 来切换 liked 的值。

render 函数里有个 buttonClass 的变量,根据 liked 状态被标记为 'active' 或 空值。

buttonClass 被用作 React button 元素的类名。这个按钮还将 toggleLiked 函数绑定到 onClick 事件上。

看看在浏览器中渲染出来是什么效果:

  • 当组件里的按钮被点击时,触发 toggleLiked 函数
  • liked 状态被改变
  • React 重新渲染虚拟 DOM
  • 新老虚拟 DOM 进行对比
  • React 识别出变化的部分并渲染到浏览器

上例演示了通过点击按钮来改变类名

##组合组件(Composition)

将一些小的组件(components)链接起来形成一个大的组合组件。例如 Photo 组件可以用在 PhotoGallery 组件中,如下:

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.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://www.zhuowenli.com/lib/img/icon.png',
        caption: 'Logo!'
    },
    {
        url: 'http://www.zhuowenli.com/lib/img/icon-72.png',
        caption: 'Small Logo'
    },
    {
        url: 'http://www.zhuowenli.com/lib/img/icon-152.png',
        caption: 'Large Logo'
    }
];

React.render(<PhotoGallery photos={data} />, document.body);

查看代码:JSBin

Photo 组件跟之前的没什么两样。新组件 PhotoGallery 根据 3 条假数据生成了 3 个 Photo 组件。

##结语

本文只是一篇 React 入门,我强烈推荐大家去读 React 官方文档,里面包含了所有你想要的细节。

如果本文有什么错误之处,欢迎在下方评论,或者给我提 pull request。尽情给我发邮件吧,我很乐意效劳。

P.S - 如果你准备开发一个更复杂的 React 应用,推荐阅读 Flux 入门教程