学习使用React创建用户界面的JavaScript库

蜘蛛热点 2018-06-06 227 次浏览 1 条评论

为了掌握和爱上React,需要考虑的五件重要事情。

学习React,用于从Facebook和Instagram创建用户界面的JavaScript库似乎很难,直到你给它一个机会。当你理解五个关键概念时事情会变得更容易。我把这些称为五种思维转变。它们是:组件,JSX,状态,生命周期方法和单向数据流。

01.组件
组件是可以组合起来以提供更复杂功能的代码块。将应用程序划分为组件时,可以更轻松地进行更新和维护。在React中,组件更加重要:您不只是对它们进行编程,而是通过考虑这些组件如何组合在一起来设计您的应用程序。

以下面的界面为例。您可以看到如何将其分为三部分:预约新约会的方框,允许您查看现有约会的列表视图以及用于查看它们的搜索框。

一张图片显示了将应用程序构建为可重用组件的过程。

您可以轻松了解如何将此应用程序构建为可重用组件

在HTML中,您可能会将此应用程序视为一系列元素,如下所示:

<div id="petAppointments">
  <div class="addAppointments"></div>
  <div class="searchAppointments"></div>  
  <div class="listAppointments"></div>  
</div>

这也是你在React中所做的。您创建一个调用petAppointments组件的单个标签(

<

div id =“petAppointments”>),然后根据需要调用其他子组件。要传递这样的配置对象,可以使用React对象的createClass方法。

var MainInterface = React.createClass({
  render: function() {
    return (
      <div className="interface">
        <AddAppointment />
        <SearchAppointments />
        <ListAppointments />
      </div>
    )
  } //render
}); //MainInterface

ReactDOM.render(
  <MainInterface />,
  document.getElementById('petAppointments')
); //render

有两种渲染方法。在MainInterface类中,我们声明将发送到浏览器的项目,并且ReactDOM.render方法用React的代码替换HTML中的

<

div id =“petAppointments”> </ div>元素。然后我们将编写处理我们三个子组件的代码。

组件使代码易于编写和维护。一旦你学会了将应用程序作为一系列可组合的组件来考虑和组织,构建复杂的应用程序变得更简单。

  1. JSX
    JSX 可能是最大的思想转变之一,也是图书馆看起来很奇怪的原因之一。JSX是JavaScript的扩展,它允许您将XML代码与JavaScript结合起来。

这就是像Mustache这样的模板语言发生的事情,它允许您在HTML中包含JavaScript。但JSX被翻译(转译)成JavaScript。所以你不只是建立一个模板,而是一个结构被转换成一系列的JavaScript语句。与模板语言不同,它不必在运行时解释。我们来看一个例子。

<li className="pet-item media" key={index}>
  <div className="pet-info media-body">
    <div className="pet-head">
      <span className="pet-name">{this.state.data[index].petName}</span>
      <span className="apt-date pull-right">{this.state.data[index].aptDate}</span>
    </div>
    <div className="owner-name"><span className="label-item">Owner:</span>
    {this.state.data[index].ownerName}</div>
    <div className="apt-notes">{this.state.data[index].aptNotes}</div>
  </div>
</li>

我们可以使用此代码输出我们的约会。这很像使用常规模板语言,所以除了学习一些关于JSX的小小特质之外,您可以快速找到它。

关于使用JSX的奇怪部分不是学习语言本身; 它正在克服将HTML放在JavaScript代码中似乎......好的,错误的事实。但将每个组件的所有代码都放在一个地方真的很不错。

03.状态

点击其中一个红色X会在组件级别捕获,但通过道具引用主要组件中的方法

第三种思维转变是学习如何在React中处理状态。状态存储在应用程序的最顶层组件中,并管理应用程序中发生的情况。有一种称为getInitialState的特殊方法,您可以在其中配置应用程序启动时发生的情况。

在我的示例应用程序中,初始状态是这样设置的:

var MainInterface = React.createClass({
  getInitialState: function() {
    return {
      aptBodyVisible: false,
      orderBy: 'petName',
      orderDir: 'asc',
      queryText: ''
    } //return
  }, //getInitialState

它看起来像我为我的应用程序设置全局变量,但修改这些变量实际上控制着组件的呈现方式。如果我的应用中的某些内容更改了变量的值,我的组件将重新渲染。例如,如果orderBy的值发生变化,约会列表将重新排序。

编写组件时,修改应用程序的状态很容易。编写组件比较容易,因为您只关注组件的功能。这是我的应用程序的最终列表组件:

var React = require('react');
var AptList = React.createClass({

  handleDelete: function() {
    this.props.onDelete(this.props.whichItem)
  },

  render: function() {
    return(
      <li className="pet-item media">
        <div className="media-left">
          <button className="pet-delete btn btn-xs btn-danger" onClick={this.handleDelete}>
          <span className="glyphicon glyphicon-remove"></span></button>
        </div>
        <div className="pet-info media-body">
          <div className="pet-head">
            <span className="pet-name">{this.props.singleItem.petName}</span>
            <span className="apt-date pull-right">{this.props.singleItem.aptDate}</span>
          </div>
          <div className="owner-name"><span className="label-item">Owner:</span>
          {this.props.singleItem.ownerName}</div>
          <div className="apt-notes">{this.props.singleItem.aptNotes}</div>
        </div>
      </li>
    ) // return
  } // render
}); //AptList

module.exports=AptList;

该组件只关心两件事。首先,根据应用程序的当前状态显示约会列表。其次,处理一个红色'X'的点击。

点击'X'会将更改推送到应用程序状态,导致此组件重新呈现。我并不担心数据会发生什么,而只是显示当前数据的显示方式。

列表组件只关心列出的东西。它不必担心其他地方发生了什么。这是构建应用程序的绝妙方式,一旦你掌握了它,你就会明白为什么它是一种优秀的代码编写方式。
04.单向数据流

这里的搜索组件只关心改变数据的状态。该列表将随即用新数据重新呈现

接下来的思维转变是学会热爱单向数据流。在React中,应用程序的状态位于最上面的组件中。当您需要在子组件中对其进行更改时,可以创建对最高组件的引用并在其中处理它。这有点难以习惯。这是一个例子:

var React = require('react');
var AptList = React.createClass({
  handleDelete: function() {
    this.props.onDelete(this.props.whichItem)
  },
  render: function() {
    return(
      <li className="pet-item media">
        <div className="media-left">
          <button className="pet-delete btn btn-xs btn-danger" onClick={this.handleDelete}>
          <span className="glyphicon glyphicon-remove"></span></button>
        </div>
      </li>
      ...
    ) // return
  } // render
}); //AptList

module.exports=AptList;

这是创建约会列表的模块的简化版本。我们的列表有一个删除按钮,我们通过事件处理程序进行管理。这是一个特殊的React版本的onclick。我们的事件处理函数调用子模块本地的函数handleDelete。我们的本地函数只是在一个名为道具的对象中创建对另一个函数的引用。道具是主模块如何与子模块进行通信。

在主模块中,您将为您用于表示模块的标签创建一个属性。它看起来就像将一个属性传递给HTML标记一样:

<AptList onDelete = { this.deleteMessage } />

然后在主要组件中创建自己的方法来处理对应用程序状态的更改。保持主模块的状态有助于提高子模块的效率。维护代码也更容易,因为大部分操作发生在一个地方。

05.生命周期方法
关于React的最好的事情之一就是它管理模块渲染的方式。您的模块不必担心更新DOM,而只需要对您的应用程序状态做出反应。当状态发生变化时,React会重新呈现应用程序的组件。它通过创建自己的称为虚拟DOM的DOM版本来实现这一点。

但有时你需要能够做出回应渲染生命周期的事情。输入生命周期方法。这些方法可以要求React处理应用程序执行过程中不同点的任务。

例如,有些lifecyle方法允许您通过AJAX请求加载外部数据:

componentDidMount: function() {
  this.serverRequest = $.get('./js/data.json', function(result) {
    var tempApts = result;
    this.setState({
      myAppointments: tempApts
    }); //setState
  }.bind(this));
}, //componentDidMount

在这里,componentDidMount使您可以在初始渲染完成后执行某些操作。这是加载AJAX内容,设置定时器等的好地方。还有很多其他的生命周期方法可以让您在不同的点捕捉应用程序的执行。由于React的虚拟DOM,它们是必要的,这在构建应用程序时是一个很好的节省时间。

反思反应
React需要重新考虑您使用Web应用程序的方式,但如果您专注于掌握这五种思维转换的好处,您将很快了解为什么图书馆变得非常流行,并且是构建界面的绝佳方式。

0

【飞龙网.COM】不一样的IT资讯网,艺术,设计,插画,资源技巧分享!

1 条评论

发表评论