了解React.js中搜索过滤的工作原理

Question

我是个新手。我昨天开始学习，我正在尝试使用精灵宝可梦API (https://pokeapi.co/)来制作一个简单的web应用程序，用户可以通过名称搜索精灵宝可梦，并根据类型进行过滤。

对于搜索，我的想法是当用户在搜索框中输入查询时过滤pokemon数据数组。我不明白的是，react的生命周期。

似乎在我向搜索框中输入内容后，我必须立即更新过滤数组。这与react组件的生命周期有什么关系？换句话说，此更新必须在生命周期的哪个部分进行？

我不是要求一个代码，但我想得到一些关于如何开始这个编程的感觉。

谢谢

Answer 1

需要理解的最重要的事情是组件的状态生命周期--一旦你真正很好地理解了它是如何工作的，你就会发现它对于你试图实现的目标来说是完美的。每次修改组件状态(例如，每次将字符输入到正在搜索的pokemon的输入栏中时)，React都会调用组件render(){}方法。新修改的状态对象将可用于呈现函数内的任何函数(在您的示例中，类似于过滤器函数)或方法等，并且该概念将允许您根据以这些状态对象作为参数运行的任何函数来返回JSX组件。

所以基本上我是这样想象的: 1.如果状态中没有过滤器的字符串，加载所有的pokemon，否则使用字符串过滤pokemon列表，并返回过滤后的列表。2.当在输入字段中键入内容时，使用该值更新状态中的过滤器。3.调用render方法，循环重复。