react@18——useTransition降级渲染——useDeferredValue降级节流

useTransition降级渲染

可以对于更新渲染进行降级，提高更重要的组件的提前渲染

import React,{useState,useTransition} from 'react';
const [isPending,startTransition] = useTransition();

​​isPending​​​ 如果在更新等待渲染时isPending为true,没有更新不渲染时为false
​​​startTransition​​ 它是一个函数，在里面写的更新数据会进行降级

场景：count更新它没有哪么的着急，可以让别的数据更新渲染先执行

import React,{useState,useTransition} from 'react';

const App = () => {
    const [count,setcount]=useState(100);
    const [isPending,startTransition] = useTransition();

    const addCount = ()=>{
        // 对于更新count的数据时行了降级,更新也就会降级
        startTransition(()=>{
            setcount(v=>v+1)
        })
    }
    return (
        <div>
            {/* count更新它没有哪么的着急，可以让别的数据更新渲染先执行 */}
            <h3>{isPending ? '加载中...' : count}</h3>
            <button onClick={()=>{addCount()}}>++++</button>
        </div>
    );
}

export default App;

useDeferredValue降级节流

import React,{useState,useDeferredValue} from 'react';
import Home from './views/Home';

const App = () => {
    const [text,setcount]=useState('');
    // 让数据更新降级，起到了节流的效果，让渲染平滑一些
    let deferredValue = useDeferredValue(text)

    return (
        <div>
           <h1>{text}</h1>
           <hr />
           <input type="text" value={text} onChange={e=>{setcount(e.target.value.trim())}} />
           <hr />
           <Home text={deferredValue}></Home>
        </div>
    );
}

export default App;

Home组件

import React from 'react';

const Home = ({text}) => {
    const data = Array(1000).fill("勇牛").map((_,index)=>(
        _+"敢牛"+index+"----------"+text
    ))
    return (
        <div>
            <ul>
                {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Home;