[译] React 入门

2024年1月30日 184次阅读 来源: meikidd

原文链接：The React Quick Start Guide

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

一些概念

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

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

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 的照片流程序 – 没有比这更好的示例程序了。

渲染

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

React.render(<img src='http://tinyurl.com/lkevsb9' />, document.body)

查看 JSBin

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

组件(Components)

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

var Photo = React.createClass({

  render: function() {
    return <img src='http://tinyurl.com/lkevsb9' />
  }
});

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://tinyurl.com/lkevsb9' caption='Hong Kong!' />, document.body);

查看 JSBin

imageURL 和 caption 两个属性被传递到 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://tinyurl.com/lkevsb9' caption='Hong Kong!') />, 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://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

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

结语

本文只是一篇 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 入门》)。

    原文作者：meikidd
    原文地址: https://segmentfault.com/a/1190000002759878
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞