react——hooks(拓展hook之useTransition、useDeferredValue、useId)

React Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

10.useTransition与useDeferredValue（React18）

1.对于同一资源的优化，这两个接口提供的优化效果是一样的，因此不需要同时使用，一旦使用两个中的任意一个都会带来一定性能上的损耗

2.建议只有数量大的时候 考虑使用这两个接口中的一个，平时的普通组件不需要使用。

3.两个接口的区别：

• useTransition是用来处理更新函数的。useTransition的优点在于一次性可以处理好几个更新函数
• useDeferredValue是用来处理更新函数执行后所更新的数据本身 的。有些情况，你并不能直接获得更新函数，比如第三方的hooks库，这时就只能使用useDeferredValue

当交互的时效性没有那么强的操作时，可以通过该api，将数据放入到慢速通道中

示例代码：

import {useDeferredValue, useState, useTransition} from 'react'


const Product = ({product}) => {
  return <div className="product">{product.name}</div>
}
const getProductData = () => {
  let products = [];
  for (let i = 0; i < 10000; i++) {
    products.push({id: i, name: '产品' + i})
  }

  return products;
}

function TransitionApp() {
  const [searchText, setSearchText] = useState('')
  const [isPending, startTransition] = useTransition();
  const filterProducts = () => {
    if (!searchText) {
      return getProductData()
    } else {
      return getProductData().filter(product => product.name.includes(searchText))
    }
  }
  const products = filterProducts()
  // useDeferredValue主要用于将得到的值进行处理进入慢速通道
  const deferredValue = useDeferredValue(products);


  const handleFilterChange = (e) => {
    // useTransition主要用于处理回调，并且可以同时处理多个数据处理函数
    // startTransition(()  => {
    //   setSearchText(e.target.value)
    // })
    setSearchText(e.target.value)

  }

  return (
      <div className="App">
        <div className='search'>
          <input placeholder='输入产品名称' onChange={handleFilterChange}/>
        </div>

        {products.map((product, index) => {
          return (<Product product={product} key={index}/>)
        })}
      </div>
  );
}

export default TransitionApp;

11.useId

useId是一个钩子，用于生成在服务器和客户端之间稳定的唯一ID

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <div>
        <input id={id + '-firstName'} type="text" />
      </div>
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <div>
        <input id={id + '-lastName'} type="text" />
      </div>
    </div>
  );
}