React-深入理解Props和States
YOYO一笑2019-03-14 19:38
In React, everything is a component
如果你熟悉React，那么你一定听过或读过很多次这个短语。但是你知道它的确切含义和用法吗？如果没有，请花30分钟跟随本文了解React组件。我相信，通过这篇文章，您将对React组件及其相关概念有一个完整的了解。
本文将通过以下几个方面进行讨论：
什么是 React ComponentsReact Components 的特点React Components 之 PropsReact Components 之 StatesStates vs Props什么是 React Components
早些时候，开发人员不得不编写1000行代码来开发一个简单的单页应用程序。这些应用程序大多数遵循传统的DOM结构，对它们进行更改对开发人员来说是非常具有挑战性和单调乏味的任务。他们必须手动搜索需要更改的元素并相应地更新它。即使是一个小错误也会导致应用程序失败。此外，更新DOM非常昂贵。因此，引入了基于组件的方法。在这种方法中，整个应用程序被划分为称为组件的逻辑块。React是选择这种方法的框架之一。
React组件被认为是用户界面的构建块。这些组件都存在于相同的空间中，但彼此独立执行。React组件有自己的结构、方法和api。它们是可重用的，可以根据需要注入接口。为了更好地理解，可以将整个UI看作一棵树。在这里，起始组件成为根，每个独立的部分成为分支，这些分支又被进一步划分为子分支。
这使我们的UI具有组织性，并允许数据和状态更改逻辑地从根流向分支，然后再流向子分支。组件直接从客户端调用服务器，这允许DOM在不刷新页面的情况下动态更新。这是因为react组件是基于AJAX请求的概念构建的。每个组件都有自己的接口，可以调用服务器并更新它们。由于这些组件彼此独立，所以每个组件都可以在不影响其他组件或整个UI的情况下进行刷新。
我们使用response . createclass()方法创建组件。此方法必须传递一个对象参数，该参数将定义React组件。每个组件必须恰好包含一个render()方法。它是负责用JavaScript (JSX)解析HTML的组件中最重要的属性。这个render()将返回作为DOM节点的组件的HTML表示。因此，所有HTML标记都必须包含在render()内的一个封闭标记中。
下面是一段创建组件的示例代码。
React Components 的特点
代码可重用性——基于组件的方法使您的应用程序开发更容易、更快。如果您想在您的代码中使用一个预先存在的功能，您可以将该代码放入您的代码中，而不是从头开始构建它。它还允许您的应用程序架构随着时间的推移保持最新，因为您可以更新需要升级的特定区域。快速开发——基于组件的UI方法导致迭代和敏捷的应用程序开发。这些组件驻留在一个库中，不同的软件开发团队可以在整个开发过程中访问、集成和修改它们。一致性——实现这些可重用组件有助于保持设计的一致性，并可以在整个应用程序中清晰地组织代码。可维护性——拥有一组组织良好的组件的应用程序可以快速更新，您可以对哪些领域会受到影响、哪些不会有信心。可伸缩性——有了适当组织的准备实现组件的库，开发就变得更容易了。确保组件的名称空间是正确的，有助于避免随着项目的扩展，样式和功能泄漏或重叠到错误的位置。易于集成——组件代码存储在像GitHub这样的库中，它是开放给公众使用的。应用程序开发团队非常擅长使用源代码存储库，因此他们能够根据需要提取代码并将其注入到应用程序中。既然您已经了解了什么是组件及其优点，现在让我们来看看如何向这些组件提供数据。
组件接收数据的方式有两种：Props和States
Props
Props是Properties的简写。它们是只读组件，工作方式类似于HTML属性。Prop是一种将数据从父组件传递给子组件的方法。让我们用一个例子来理解这一点。
正如我们已经知道的，react组件以树的形式安排UI，其中父组件成为根组件，子组件成为分支和子分支。现在假设父组件希望将数据发送到它的一个深度嵌套组件。假设您需要从组件1向组件6发送一个属性。你会怎么做呢？
不能将属性直接传递给目标组件。这是因为React遵循这样的规则:属性必须从父组件流向直接的子组件。这意味着在发送属性时不能跳过子组件层，子组件也不能将属性发送回父组件。您可以使用默认的道具，以防父组件没有向下传递道具以便它们仍然被设置。这就是React具有单向数据绑定的原因。
因此，在本例中，我们需要逐层发送数据，直到它到达目标子组件。此路径中的每个组件都必须从其父组件接收该属性，然后将该属性作为接收重发到其子组件。这个过程会重复，直到属性到达它的目标组件。
由于这些属性只能从父组件传递，因此不能更改它们。这是一个巨大的挑战，因为现代应用程序并没有在页面加载时准备好所有状态。数据返回时可能发生Ajax或事件，因此需要有人负责处理更新。这就是React states。
States
通常，组件接受道具并呈现它们。这些被称为无状态组件。但是，它们还可以提供用于存储有关组件的数据或信息的状态，这些数据或信息可以随着时间的推移而更改。这些组件称为有状态组件。状态更改可以作为对用户事件或系统事件的响应发生。换句话说，状态是每个react组件的核心，它决定组件的行为和呈现方式。它们还负责使组件具有动态性和交互性。因此，它们必须尽可能保持简单。
状态可以通过这个引用访问，例如this.state。您可以使用大括号{}访问和打印JSX中的变量。类似地，您可以呈现这个。国家内部呈现()。您必须为组件设置一个默认状态，否则它将被设置为null。
现在让我们看看如何将状态分配给组件。
States vs Props
本文到这里先告一段落，后续我们会继续学习react的生命周期，react全家桶的其他成员redux等等，欢迎有兴趣的同学关注~
举报/反馈
0
0
收藏
分享
