优化的反应搜索栏ð-DEV365 开发者社区

最近学习 react 我遇到了一个名为 bealpouncing 的术语？？？那是什么意思？
让我们一起解码它，并了解如何使用 bebouncing 在优化我们的 search / filter component component

让我们学习，构建和共享

学

拒绝

拒绝是指用于调节时间范围/间隔的优化技术，然后执行任务。
例如，在搜索栏中，每个状态更改（on Change）将根据给定的输入多次重新渲染组件。
不是真正的好如果我们的组件，请重新呈现这样的多个时间

搜索组件的问题语句

在每个事件（on Change）中，状态都会更新并重新呈现组件...
我们可以通过使用辩论来提供稍微延迟状态更新来优化它。

建造

谈话很便宜，告诉我代码

绝对！让我们立即深入研究代码，我们将建立一个搜索栏，该搜索栏将根据给定输入过滤数据并显示其相应的数据（搜索口袋妖怪名称并相应地显示字符）

对于构建部分，我将使用codesandbox
使用React + Typescript模板
遵循ð

要遵循的步骤

html呈现的视图
设置事件处理程序，州（您能猜测我们的州是什么吗？）
在渲染（效果）
添加vebouncing（Hook）以限制状态更新

export default function App() {
  return (
    <div className="App">
      <input type="text" />
      <ul>
        {/* here we will map our data and display */}
        <li>Pokemon Name</li>
        <li>
          <img src="#" alt="pokemon" />
        </li>
      </ul>
    </div>
  );
}

到目前为止输出：

各州，事件处理程序，类型（可以开始在代码中包括TS，事件小部分可能有助于学习Typescript）

import { useState } from "react";
import "./styles.css";

type Pokemon = {
  name: string;
  image: string;
};

export default function App() {
  const [filter, setFilter] = useState<string>("");
  const [pokemonData, setPokemonData] = useState<Pokemon[]>([]);

  return (
    <div className="App">
      <input
        value={filter}
        type="text"
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {pokemonData.map((pokemon) => (
          <li key={pokemon.name}>
            <h1>{pokemon.name}</h1>
            <img src={pokemon.image} alt={pokemon.name} />
          </li>
        ))}
      </ul>
    </div>
  );
}

代码非常简单
我们正在使用filter状态变量存储输入值（e.target.value）记得吗？
pokemonData状态变量将用于存储来自API
包括某些类型（如果看起来令人困惑，请使用TS文档）

带有副作用（使用效果）ð¥的API调用

  useEffect(() => {
    // will be called after every state (filter) update
    console.log("called");

    const getPokemonData = async () => {
      const pokemonList = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${filter}`
      );

      const pokemonListToJson = await pokemonList.json();

      return {
        ...pokemonListToJson,
        name: pokemonListToJson.name,
        image: pokemonListToJson.sprites?.front_shiny
      };
    };

    getPokemonData().then((pokemon) => setPokemonData([pokemon]));
  }, [filter]);

这是我们称为API
使用效果采用两个参数 - （回调函数，依赖项数组）
因此，我们的依赖性数组是[filter]，这意味着在setFilter完成的每个更新中，过滤状态变量将被更新（用户输入），并导致调用回调函数内部效果
在回调函数中，我们正在使用异步语法进行异步调用（非常易于使用，如果您不熟悉该语法，请快速浏览一下）
获得数据后，我们将该对象存储在Pokemondata数组中，并使用Setter函数SetPokeMondata（）。

添加使用效果挂钩后的视图输出

chimchar

gengar

到现在为止一切正常，

所以问题在哪里

让我带您解决问题（重新渲染）

它是QUERY =“ Gengar”的日志，其中我们的副作用被称为六个时间，导致组件重新呈现到过滤状态变量的每次更改
这可能会严重影响我们在大规模上的应用程序的性能

解决方案

Debounce

要删除我们的输入，我们将使用useDebounce Hook
安装：-npm i使用debounce
如果使用codesandbox，请通过键入use-debounce添加左下面板的依赖项

添加vebouncing（Hook）以限制状态更新

import { useEffect, useState } from "react";
import "./styles.css";
import { useDebounce } from "use-debounce";

type Pokemon = {
  name: string;
  image: string;
};

export default function App() {
  const [filter, setFilter] = useState<string>("");
  const [debouncedFilter] = useDebounce(filter, 500);
  const [pokemonData, setPokemonData] = useState<Pokemon[]>([]);

  useEffect(() => {
    // will be called after every state (filter) update
    console.log("side effect called");

    const getPokemonData = async () => {
      const pokemonList = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${filter}`
      );

      const pokemonListToJson = await pokemonList.json();

      return {
        ...pokemonListToJson,
        name: pokemonListToJson.name,
        image: pokemonListToJson.sprites?.front_shiny
      };
    };

    getPokemonData().then((pokemon) => setPokemonData([pokemon]));
  }, [debouncedFilter]);

  return (
    <div className="App">
      <input
        value={filter}
        type="text"
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {pokemonData.map((pokemon) => (
          <li key={pokemon.name}>
            <h1>{pokemon.name}</h1>
            <img src={pokemon.image} alt={pokemon.name} />
          </li>
        ))}
      </ul>
    </div>
  );
}

您的文件中的导入使用
使用ebounce接受值和延迟
我们已将过滤器（搜索值）传递给useDebounce(filter,500)，延迟500ms
debouncedFilter状态变量将存储传递到debounce hook的过滤器值。
花点时间了解流，我们如何将数据传递到debounce hook
最后是时候改变我们的依赖性arr，更早地称我们的副作用被称为每次filter状态变量
现在，当debouncedFilter将以500ms的间隔更新时，将调用副作用。
所以我们在搜索栏中实现了某种优化
状态将在每500ms上更新，而不是用户完成的所有输入更改。

最终代码沙箱解决方案

xvi2tj.csb.app

谢谢您的发展！
今天，我们涵盖了很多状态，效果，弹跳和课程都了解了口袋妖怪

所以恭喜！ð
继续学习继续建造ðÖ

您可以与我联系：

twitter

github