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

Posted 2022-10-28 勇敢*牛牛

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;