React18 | useTransition

React18 所做的最有趣的实现是并发性，我们可以优先考虑某些状态而不是其他状态，以便我们可以保持网站的整体用户体验响应。

为此，React18 引入了 startTransition 的概念，也可以使用 useTransition 钩子来利用它。

通过使用 useTransition，我们可以告诉 React 某些状态的优先级较低，因此可以先执行高优先级状态，这最终会改善用户体验，因为用户可以很快看到 UI 上的大部分改进更新。

useTransition 钩子返回 2 个元素的数组。第一个是 isPending 元素，它告诉低优先级状态仍在等待处理，第二个是 startTransition，它告诉 React 某些状态是低优先级的。

使用 useTransition 挂钩的另一个示例 -某些 UI 更新应尽快执行（在输入字段中键入，从下拉列表中选择一个值），而其他更新则可以具有较低的优先级（过滤列表）。

让我们通过示例来看一下 -我们将尝试填充数字列表，并在顶部添加搜索框。只要在搜索框中输入任何号码，列表就会显示匹配的号码。

示例 1 —上面的示例没有使用 useTransition 钩子

let copyList = null;

const MyComp = (props) => {
  let [list2, setList2] = React.useState([]);

  React.useEffect(() => {
    for (let i = 0; i < 15000; i++) {
      setList2((val) => {
        return [...val, i];
      });
    }
  }, []);

  const handleChange = (event) => {
    if (copyList === null) {
      copyList = JSON.parse(JSON.stringify(list2));
    }
    list2 = JSON.parse(JSON.stringify(copyList));

    // filtering the list based on the value typed in textbox
    if (event.target.value) {
      list2 = list2.filter((v) => v == event.target.value);
    }
  };

  return (
    <div>
      <input onChange={handleChange} />
      {list2.map((val, key) => {
        return <div key={key}>{val}</div>;
      })}
    </div>
  );
};

const rootElement = document.getElementById("app");
const root = ReactDOM.createRoot(rootElement);
root.render(<MyComp />);

尝试执行上述代码后，您会发现只要您尝试在键入后删除搜索框中的 “否”，用户界面就会一团乱，这是很糟糕的用户体验，而允许用户在搜索框中键入值是比过滤列表更重要的任务。

示例 2- 让我们使用 useTransition 钩子来改进它

let copyList = null;

const MyComp = (props) => {
  let [list2, setList2] = React.useState([]);

// using useTransition hook
  let [isPending, startTransition] = React.useTransition();
  
  React.useEffect(() => {
   for(let i = 0; i < 15000; i++) {
     setList2((val) => {
       return [...val, i];
      });
    }
  }, []);
  
  const handleChange = (event) => {
    if (copyList === null) {
     copyList = JSON.parse(JSON.stringify(list2)); 
    }
    list2 = JSON.parse(JSON.stringify(copyList));
    
    // filtering the list based on the value typed in textbox by using useTransition hook
    startTransition(() => {
      if(event.target.value) {
       list2 = list2.filter((v) => (v == event.target.value));
      }
      setList2(list2);
    });
  }
  
  return(
   <div>
    {isPending ? 'Wait searching...' : ''}
    <input onChange={handleChange} />
    {
     list2.map((val, key) => {
       return (<div key={key}>{val}</div>)
      })
    }</div>
  );
}

const rootElement = document.getElementById("app");
const root = ReactDOM.createRoot(rootElement);
root.render(<MyComp />);

试着运行上述代码，你就会发现之前代码中出现的问题，即当用户试图从搜索框中移除值时，这个问题将不复存在，用户在搜索框中键入值的体验将变得流畅，一旦用户停止在搜索框中键入值，列表就会被过滤。

希望本文能帮助您在项目中有效利用 useTransition 钩子。

原文：https://medium.com/@bansal.suneet/react18-usetransition-hook-very-effective-7a93ea1b1dff

公号同步更新，欢迎关注 👻