资料
  • 资料
  • 专题
[完结16章]React18内核探秘:手写React高质量源码迈向高阶开发
推荐星级:
类别: 软件/EDA/IP
时间:2023-10-09
大小:1.5KB
阅读数:487
上传用户:学习菜鸟小弟弟
查看他发布的资源
下载次数
20
所需E币
0
ebi
新用户注册即送 300 E币
更多E币赚取方法,请查看
close
资料介绍
手写 React 高质量源码,迈向高阶开发
React18内核探秘:手写React高质量源码迈向高阶开发

batching 批处理,说的是,可以将回调函数中多个 setState 事件合并为一次渲染,因此是异步的。

解决的问题是多次同值、不同值 setState, 期望最后显示的是最后一次 setState 的结果,减少渲染。

  const Index = () => {
    const [name, setName] = useState('')
    const [age, setAge] = useState(0)
    
    const change = () => {
      setName('a')
      setAge(1) 
      // 仅触发一次渲染,批处理,2次setState合并为一次渲染

      // 需需要立即重渲染,需要手动调用
      // ReactDOM.flushSync(() => {
      //   setName('a') // 立即执行渲染
      //   setAge(1) // 立即执行渲染
      //   // 不会合并处理,即没有批处理,触发2次
      // });
    }

    console.log(1) // 只打印一次

    return (
      <div>
        <p>name: {name}</p>
        <p>age: {age}</p>
        <button onClick={change}>更改</button>
      </div>
    )
  }

1. React 18是什么?
在我们讨论“React 18有什么新功能”之前,React 18 是什么意思?任何 18.0.0 以上但不包括 19.0.0 的 React 库的稳定版本都被称为 React 18。

React 18 的创建在 React 应用程序中引入了并发渲染。React 一直在关注 DOM 渲染,并为开发人员提供控制和跟踪组件生命周期的工具。有了一些新功能,React 18 现在可以调整渲染过程,以适应客户端设备。

  <!-- 注意:部署时,将 "development.js" 替换为 "production.min.js" -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- 加载我们的 React 组件 -->
  <script src="app.js"></script>
</body>

现在终于等到了 React 18,所以我打算好好看看新版本的这些特性,到底香不香
版权说明:本资料由用户提供并上传,仅用于学习交流;若内容存在侵权,请进行举报,或 联系我们 删除。
相关评论 (下载后评价送E币 我要评论)
没有更多评论了
  • 可能感兴趣
  • 关注本资料的网友还下载了
  • 技术白皮书