React Native 中的状态管理

fatimakanij204

管理状态是学习 React Native 时最难掌握的概念之一，因为有很多方法可以做到这一点。npm 注册表上有无数的状态管理库 - 例如Redux - 并且有无数的库构建在其他状态管理库之上以简化原始库本身 - 例如Redux Easy。React 中每周都会引入一个新的状态管理库，但自想从头开始学习 React Native 吗 React 引入以来，维护应用程序状态的基本概念一直保持不变。 Backward Skip 10s Play Video Forward Skip 10s 在 React Native 中设置状态的最常见方法是使用 React 的setState()方法。我们还有 Context API 来避免 prop 钻探，并将状态向下传递多个级别，而不将其传递给树中的各个子节点。 最近，Hooks 在v16.8.0中出现在 React 中，这是一种简化 React 中状态使用的新模式。React Native 在v0.59中得到了它。

在本教程中，我们将了解状态实际上是什么，以及方法setState()、Context API 和 React Hooks。这是 React Native 中设置状态的基础。所有库都是在上述基本概念之上构建的。因此，一旦了解了这些概念，理解库或创建自己的状态管理库就会很容易。 想从头开始学习 React Native 吗？本文 黎巴嫩电话号码表 摘自我们的高级库。使用 SitePoint Premium 获取一整套 React Native 书籍，涵盖基础知识、项目、技巧和工具等。立即加入，每月仅需 9 美元。 什么是国家？ Learn to Code with JavaScript 任何随时间变化的事物都称为状态。如果我们有一个计数器应用程序，状态将是计数器本身。如果我们有一个待办事项应用程序，待办事项列表会随着时间的推移而变化，所以这个列表就是状态。即使输入元素在某种意义上也是一种状态，因为随着用户在其中输入内容，它会随着时间的推移而变化。



setState 简介 现在我们知道了什么是状态，让我们了解 React 如何存储它。 考虑一个简单的计数器应用程序在此应用程序中，我们将状态存储在constructor对象中并将其分配给this.state。 请记住，状态只能是一个对象。您不能直接存储号码。这就是我们counter在对象内创建变量的原因。 在该render方法中，我们解构该counter属性this.state并将其呈现在h1. 请注意，目前它仅显示静态值 ( 0)。 您还可以在构造函数之外编写您的状态，如下所示现在假设我们希望+和-按钮起作用。我们必须在各自的处理程序中编写一些代码onPress 现在，当我们单击+和-按钮时，React 会重新渲染组件。这是因为setState()使用了该方法。 该setState()方法重新渲染树中已更改的部分。在这种情况下，它会重新渲染h1. 因此，如果我们单击+，计数器就会加 1。如果我们单击-，计数器就会减 1。