跳到主要内容

通过以下五个因素了解React

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

01.组件

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

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

An image showing how easy it is the structure an app into reusable components.

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

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

这也是你在React中所做的。您创建一个标签(

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

var MainInterface = React.createClass({render:function(){return( 
)} // render}); // MainInterface ReactDOM.render( ,document.getElementById('petAppointments')); //渲染

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

HTML中的元素与React的代码。然后我们将编写处理三个子组件中的每一个的代码。

组件使代码易于编写和维护。一旦您学会将应用程序想象并组织为一系列可组合组件,构建复杂的应用程序就变得更加简单。

02. JSX

JSX可能是最大的思维转变之一,也是图书馆看起来如此奇怪的原因之一。 JSX是JavaScript的扩展,允许您将XML代码与JavaScript结合使用。

这就像Mustache这样的模板语言会发生什么,它允许你在HTML中包含JavaScript。但JSX被翻译(转换)为JavaScript。因此,您不仅要构建模板,还要将结构转换为一系列JavaScript语句。与模板语言不同,它不必在运行时解释。我们来看一个例子。

  • {this.state.data [index] .petName} {this.state.data [index] .aptDate}
    所有者: {this.state.data [index] .ownerName}
    {this.state.data [指数] .aptNotes}
  • 我们可以使用此代码输出我们的约会。这感觉很像使用常规的模板语言,所以除了学习一些关于JSX的小特性之外,你可以快速拿起它。

    使用JSX的奇怪之处不是学习语言本身;它已经克服了将JavaScript放入JavaScript代码中的事实......好吧,错了。但是让每个组件的所有代码都存在于一个地方真的很棒。

    03.国家

    An image displaying the user clicking on a red X – which is captured at the component level.

    单击其中一个红色X将在组件级别捕获,但通过props引用主组件中的方法

    第三个思维转变是学习在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( 
  • {this.props.singleItem.petName} {this.props.singleItem.aptDate}
    所有者: {this.props.singleItem.ownerName}
    {} this.props.singleItem.aptNotes
  • )// return} // render}); // AptList module.exports = AptList;

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

    单击“X”将更改为应用程序状态,从而导致此组件重新呈现。我并不担心数据发生了什么,只关注当前数据的显示方式。

    列表组件仅与列出内容有关。它不必担心其他地方发生的事情。这是构建应用程序的绝佳方式,一旦掌握了它,您就会明白为什么它是一种优秀的代码编写方式。

    04.单向数据流

    An image showing the user inputting information into a search component, demonstrating how React will re-render specific data on the go.

    这里搜索组件仅涉及改变数据的状态。该列表将动态地使用新数据重新呈现

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

    var React = require('react'); var AptList = React.createClass({handleDelete:function(){this.props.onDelete(this.props.whichItem)},render:function(){return( 
  • ...)// return} // render}); // AptList module.exports = AptList;

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

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

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

    05.生命周期方法

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

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

    例如,有生命周期方法允许您通过AJAX请求加载外部数据:

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

    在这里,componentDidMount使您可以在初始渲染完成后执行某些操作。这是加载AJAX内容,设置计时器等的好地方。有许多其他生命周期方法允许您在不同点捕获应用程序的执行。它们是必要的,因为React的虚拟DOM,在构建应用程序时节省了大量时间。

    重新思考反应

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

    这篇文章 - 由Ray Villalobos演示 - 最初发表于net 286,这是世界上最畅销的网页设计师和开发者杂志。订阅网

    想进一步完善你的React技能?

    Image with the details on Kristijan Ristovski’s workshop – Learn How to Think in React – at Generate London on 19-21 September 2018.

    克里斯蒂扬·里斯托夫斯基(Kristijan Ristovski)将于2018年9月19日至21日为他的研讨会学习如何思考React at Generate London

    如果您有兴趣了解有关React的更多信息,请确保您已经拿到了机票从2018年9月19日至21日产生伦敦。成立了React Academy,在世界各地教授React并推出Sizzy.coOk-google.io,Kristijan Ristovski将提供他的研讨会 - 学习如何在React中思考 - 他将探索React最佳实践并教你解决在构建应用程序过程中可能遇到的实际问题。

    Generate London将于2018年9月19日至21日举行。立即获取您的机票

    相关文章:



    翻译字数超限