React18 hooks,useId(),useTransition(),useDeferredValue()

useId()

userId作用

SSR同构应用

Hydration

import React, { memo, useId, useState } from "react";
const App = memo(() => {
  const [count, setCount] = useState(0);
  const id = useId();
  console.log("id=> ", id); //:r0:
  return (
    <div>
      <h2>useId App</h2>
      <button onClick={(e) => setCount(count + 1)}>count+1({count})</button>
      <label htmlFor={id}>
        username:
        <input id={id} type="text" />
      </label>
    </div>
  );
});
export default App;

useTransition()

const arr = [];
for (let i = 0; i < 10000; i++) {
  arr.push("name" + i);
}
export default arr;

import React, { memo, useState } from "react";
import namesArray from "./namesArray";

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);
  function valueChangeHandle(event) {
    const keyword = event.target.value;
    const filterShowNames = namesArray.filter((item) => item.includes(keyword));
    setShowNames(filterShowNames);
  }
  return (
    <div>
      <h2>useTransition App</h2>
      <input type="text" onInput={valueChangeHandle} />
      <h2>用户名列表：</h2>
      <ul>
        {showNames.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
});

export default App

上面代码页面会卡顿

如何解决？

import React, { memo, useState, useTransition } from "react";
import namesArray from "./namesArray";

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);
  const [isPending, startTransition] = useTransition(); //[布尔值，接收回调函数]

  function valueChangeHandle(event) {
    startTransition(() => {
      const keyword = event.target.value;
      const filterShowNames = namesArray.filter((item) => item.includes(keyword));
      setShowNames(filterShowNames);
    });
  }
  return (
    <div>
      <h2>useTransition App</h2>
      <input type="text" onInput={valueChangeHandle} />
      <h2>用户名列表：{isPending && <span>data is loading</span>}</h2>
      <ul>
        {showNames.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
});
export default App;

页面明显不那么卡了

useDeferredValue()

import React, { memo, useState } from "react";
import namesArray from "./namesArray";
import { useDeferredValue } from "react";

const App = memo(() => {
  const [showNames, setShowNames] = useState(namesArray);
  const deferedShowNames = useDeferredValue(showNames);

  function valueChangeHandle(event) {
    const keyword = event.target.value;
    const filterShowNames = namesArray.filter((item) => item.includes(keyword));
    setShowNames(filterShowNames);
  }
  return (
    <div>
      <h2>useDeferredValue App</h2>
      <input type="text" onInput={valueChangeHandle} />
      <h2>用户名列表：</h2>
      <ul>
        {deferedShowNames.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
});
export default App;