React & Redux 入门教程 - 第一篇:React 术语浅析

本文是《React & Redux 入门教程》系列文章的第一篇。《React & Redux 入门教程》目标读者为有一定前端开发基础的 React & Redux 的初学者。

这一篇文章主要分析各种 React 术语,参考来自技术官网的资料,夹杂了我的个人体会和理解。通过阅读这篇文章,读者可以全面掌握各种核心 React 术语。在听别人讨论相关技术问题的时候,能够及时进入语境,理解别人谈话的内容,不再如闻天书、不知所云。

React

React 是 Facebook 出品的用来开发用户界面的 JavaScript 库。 React 在 GitHub 上面有5万多颗星, 火热程度可见一斑。React 可能是当前最值得学习的前端技术。

值得一提的是,React 仅仅是一个界面库,它仅仅提供了 MVC 中的 V。对于复杂的应用,多半还需要搭配其它的库一起使用,比如说 Redux。

套用官方的说法,React 要解决的问题是:

building large applications with data that changes over time.

我们能得出结论,React 适用的场景有两个特征:一个是规模比较大;另一个是有较频繁数据更新。

React 也能用于简单的、没有太频繁的数据更新的应用。但是这种情况下体现不出它的优势来。比如我曾经把一个基于 jQuery 的非常简单的程序迁移到了 React,发现反而 jQuery 的版本更加简短、可读性更好。

JSX

严格来讲 JSX 并不属于 React。但是 React 是推荐使用 JSX 的,并且官方的例子中,默认也都使用了 JSX。

JSX lets you create JavaScript objects using HTML syntax.

没有 JSX 的情况下,我们只能通过调用 React.createElement 来构建界面。JSX 是对 JS 语法的扩展,通过它写出的界面代码跟 HTML 很像,极大地提高了可读性。下面例子中的 render() 方法,就使用了 JSX:

render() {
  return (
    <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
  );
}

可以把 JSX 形象地理解为内嵌在 JavaScript 中的 HTML。JSX 很容易让我们想起模板语言(template language),它比模板语言强的地方在于它能支持全部的 JavaScript 语言特性。虽然 JSX 看起来像 HTML,它本质上是 JavaScript。

JSX 唯一的问题在于包含了 JSX 代码的 JavaSript 文件没办法直接执行,需要预先编译一下。编译它一般是使用 Babel 搭配 React preset

Element

Element 是 React 程序中最小的构造块(building block),是 component 的构成部分。例子:

const element = <div>Seconds Elapsed: {this.state.secondsElapsed}</div>;

React Element 并非 DOM Element,它是普通的 JavaScript 对象。

Component

React 的入门门槛是非常低的,因为它只有一个核心术语 —— Component。Component 是封装良好的、可重用的界面元件。React 就是关于构建可重用的 components 的。下面是一个经过简化的 component 的例子:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 10};
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}

可以把 component 类比为 function,props 是它接受的参数,state 是它的内部变量,它返回的结果是 render() 之后的 element。

站在 JSX 的角度,也可以把 component 看作是对 HTML 语法的扩展,比如上面定义的 component,可以像这样来使用它: <Timer />

Props & State

Props 是调用 component 的时候传递进去的参数。比如 <Timer key="value" />this.props.key 的值就是 value

这个概念跟 HTML 的 attributes 很像。需要特别注意的是:props 对于当前 component 来讲是不可变的,不要尝试在 component 内部对其进行修改或赋值。

State 代表了 component 的状态。它是可变的。比如你可以像这样修改它:this.setState({key: value});。每次 state 更新,component 会重新 render 它自己。

如果把 component 类比为 function,不可变的 props 就类似 function 的参数,可变的 state 就类似 function 内部声明的变量。

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

在这输入验证码 : *

Reload Image