react18更新了什么

升级

npm i react@18 react-dom@18

原来

jsx 复制代码
import {render} from 'react-dom';
const rootElement = document.getElementById('root')
render(<App/>,rootElement)

现在

jsx 复制代码
import {createRoot} from 'react-dom/client';
const rootElement = document.getElementById('root')
const root=createRoot(rootElement)
root.render(<App/>,rootElement)

18的升级是渐进式升级,很多新功能是可选的,并不会因为升级对以前的代码带来破坏性的影响

放弃兼容ie

17能兼容ie11,18不兼容,如果要兼容,只能回退react版本。

automatic Batching自动批处理

jsx 复制代码
const [count, setCount]=useState(0);
const [name, setName]=useState('');
setTimeout(()=>{
  setCount(1);
  setName('lwp');
})

18之前:异步里面不会自动批处理,会触发两次set 18之后会触发一次set 如果不想使用automatic Batching

jsx 复制代码
import {flushSync} from 'react-dom'
flushSync(()=>{
  setCount(1);
  setCount(2);
})

不想用automatic batching场景

  • 你需要在状态之后,立刻读取dom上的数据

在17之前,class组件的异步代码里面的setState是同步,而18之后所有的场景下都是异步的,如果想要变成同步,依然用flushSync

jsx 复制代码
class Counter{
  constructor(){
    this.state={
      count:0
    }
  }
  fn=()=>{
    setTimeout(()=>{
      this.setState({count:count+1})
      //React 17:1
      //React 18:0
      console.log(count)
  })
  }
}
jsx 复制代码
  setTimeout(()=>{
    flushSync(()=>{
        this.setState({count:count+1})
        //React 17:1
        //React 18:0
        console.log(count)
    })
  })

返回值

原来组件只能返回null,现在既可以返回null也可以返回undefined

concurrent并发渲染

原来渲染只能一个一个触发(串行),且不可中断 现在

  • 渲染可暂停、可继续、可终止
  • 渲染可以在后台进行
  • 渲染可以有优先级

transitions

渲染优先级里面分为高优先级和低优先级,默认高优先级,通过transitions来标记低优先级 class

jsx 复制代码
import {startTransitions} from 'react'
startTransitions(()=>{
  xxx
})

hook

jsx 复制代码
import {useTransitions} from 'react'
const [pending, startTransitions] = useTransitions()
startTransitions(()=>{
  xxx
})

Suspense

以前我们进行异步请求都是fetch then render

jsx 复制代码
function Father(){
  const [title,setTitle]=useState();
  useEffect(()=>{
    getTitle().then(res=>{
      setTitle(res)
    })
  },[])
  return (<div>
    {!title?<Loading/>:title}
    <Child/>
  </div>)
}
function Child(){
    const [list,setList]=useState();
  useEffect(()=>{
    getList().then(res=>{
      setList(res)
    })
  },[])
  return (<div>
    {!list&&<Loading/>}
    {list&&list.map(item=>(<div>{item}</div>))}
  </div>)
}

这样就会导致两个组件的请求是串行,增加渲染时间 为了改变这种方式,可以通过Promise.all改造成并行,但是这种方式依然有缺点,就是两次请求必须都完成才能进行渲染。于是有了Suspense。fetch as you render

jsx 复制代码
function Father(){
  const [title,setTitle]=useState();
  useEffect(()=>{
    getTitle().then(res=>{
      setTitle(res)
    })
  },[])
  return (<Suspense fallback=(<Loading/>)>
    
    <Suspense fallback=(<Loading/>)><Child/></Suspense>
  </Suspense>)
}
function Child(){
    const [list,setList]=useState();
  useEffect(()=>{
    getList().then(res=>{
      setList(res)
    })
  },[])
  return (<div>
    {list.map(item=>(<div>{item}</div>))}
  </div>)
}
jsx 复制代码
//并行
<Suspense1></Suspense1>
<Suspense2></Suspense2>
//串行
<Suspense1><Suspense2></Suspense2></Suspense1>

参考

相关推荐
前端 贾公子8 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux