关于react.js:react18-来了我-get-到

36次阅读

共计 5488 个字符，预计需要花费 14 分钟才能阅读完成。

大家好！

本文次要是对于行将公布的 react 18 的新个性。那么 react18 带来了什么呢？

详情能够关注 github React 18 工作组仓库

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>
  )
}

然而 react 18 之前，在 promise、timeout 或者 event 回调中调用屡次 setState，因为失落了上下文，无奈做合并解决，所以每次 setState 调用都会立刻触发一次重渲染：

const Index = () => {const [name, setName] = useState('')
  const [age, setAge] = useState(0)
  
  const change = () => {setTimeout(() => {setName('a') // 立刻执行渲染
      setAge(1) // 立刻执行渲染
      // 不会合并解决，即没有批处理，触发 2 次

      // 若须要批处理，须要手动调用
      // ReactDom.unstable_batchedUpdates(() => {//   setName('a')
      //   setAge(1) 
      //   // 合并解决
      // })
      // 并且将 ReactDOM.render 替换为 ReactDOM.createRoot 调用形式
      // 旧 ReactDOM.render(<App tab="home" />, container);
      // 新 ReactDOM.createRoot(container).render(<App tab="home" />)
    }, 0);
  }

  console.log(1) // 打印 2 次

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

react18，在 promise、timeout 或者 event 回调中调用屡次 setState，会合并为一次渲染。晋升渲染性能。

v18 实现「主动批处理」的关键在于两点：

减少调度的流程
不以全局变量 executionContext 为批处理根据，而是以更新的「优先级」为根据

参考：

在 React18 中主动批处理以缩小渲染
精读《React 18》
给女朋友讲 React18 新个性：Automatic batching

Concurrent：并发，采纳可中断的遍历形式更新 Fiber Reconciler。是渐进降级策略的产物。

不同更新触发的视图变动是有轻重缓急的，让高优更新对应的视图变动先渲染，那么就能在设施性能不变的状况下，让用户更快看到他们想看到的 UI。

案例：用户操作滑块，而后响应树的变动。滑块响应是高优先级的，而树的变动能够认为是低优先级的。

demo，须要迷信上网，能力正确看到申请的数据。

未开启：能够看到滑块的拖动有卡顿

开启：能够看到滑块的拖动，十分的丝滑顺畅

代码实现，将设置更新树的 setState，放到 startTransition 中。而更新滑块的不变，认为是高优先级，优先响应。

2 局部：

紧急响应：滑块。
过渡更新：依据滑块，出现后果内容。

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

// 更改滑块触发
function changeTreeLean(event) {const value = Number(event.target.value);
    setTreeLeanInput(value); // 更新滑块

    // 是否开启 startTransition
    if (enableStartTransition) {startTransition(() => {setTreeLean(value); // 这个变慢，依据滑块，出现后果内容。});

      // react18 之前，想要有相似性能。变体，setTimeout，防抖节流
      // setTimeout(() => {//   setTreeLean(value)
      // }, 0)

    } else {setTreeLean(value);
    }
}

// 过渡期间能够这么解决
{isPending ? <Spinner /> : <Con>}

比 setTimeout 更好，能有状态 isPending，且更早更快的出现更新到界面上（微工作里解决）。而且 setTimeout 是不可中断的，而 startTransition 是可中断的，不会影响页面交互响应。

依赖于 React 底层实现的优先级调度模型，被 startTransition 蕴含的 setState 的优先级会被设置为低优先级的过渡更新。

参考：

真实世界示例：为慢速渲染增加 startTransition
新性能：startTransition
React 18 不再依赖 Concurrent Mode 开启并发了
给女朋友讲 React18 新个性：startTransition
A better React 18 startTransition demo

和写同步逻辑代码一样，写异步代码逻辑。大大的简化了代码逻辑的书写。把代数效应利用到极致了，把异步的副作用剥离了。

代数效应是函数式编程中的一个概念，用于将副作用从函数调用中拆散。

场景案例：demo，须要迷信上网，能力正确看到申请的数据。

显示《纽约时报》畅销书排行榜。

其中，名称和日期是一个接口获取，而上面的列表是另一个接口获取。

从图中，能够显著感到 with suspense 的成果更丝滑，用户体验更好。而代码也十分简洁。局部代码如下：

    // 接口局部
    import {fetch} from "react-fetch"

    export function fetchBookLists() {
      const res = fetch(`
      https://api.nytimes.com/svc/books/v3/lists/names.json?api-key=${API_KEY}`)

      const json = res.json()

      if (json.status === "OK") {return json.results} else {console.log(json)
        throw new Error("Loading failed, likely rate limit")
      }
    }

    // 组件局部
    // 没有解决 loading 状态等的异步解决，和同步曾经完全一致的代码书写
    const Content = () => {const list = fetchBookLists()[0]

      return (
        <>
          <h4>From {list.display_name}</h4>
          <Paragraph sx={{mt: -3}}>
            Published on {list.newest_published_date}
          </Paragraph>
          <BookList list={list} />
        </>
      )
    }

    export const BestSellers = () => {
      return (<Suspense fallback={<Spinner />}>
          {/* loading must happen inside a <Suspense> */}
          <Content />
        </Suspense>
      )
    }

而在 react18 之前，你得这么写：

    // 接口局部
    import {fetch} from "react-fetch"
    export async function fetchBookLists() {
      const res = await fetch(`
      https://api.nytimes.com/svc/books/v3/lists/names.json?api-key=${API_KEY}`)

      const json = await res.json()

      if (json.status === "OK") {return json.results} else {console.log(json)
        throw new Error("Loading failed, likely rate limit")
      }
    }

    // 组件局部，依照异步的逻辑写，写 loading，对异步后果的解决等
    function useNYTBestSellerLists() {
      // poor man's useQuery implementation
      const [isLoading, setIsLoading] = useState(false)
      const [lists, setLists] = useState(null)

      useEffect(() => {setIsLoading(true)

        fetchBookLists()
          .then((lists) => {setLists(lists)
            setIsLoading(false)
          })
          .catch(() => setIsLoading(false))
      }, [])

      return {isLoading, lists}
    }

    export const BestSellers = () => {const { isLoading, lists} = useNYTBestSellerLists();

      if (isLoading) {return <Spinner />;}

      if (!lists) {return "not loading or error";}

      const list = lists[0];

      return (
        <>
          <h4>From {list.display_name}</h4>
          <Paragraph sx={{mt: -3}}>
            Published on {list.newest_published_date}
          </Paragraph>
          <BookList list={list} />
        </>
      );
    }

参考：

React 18 and the future of async data
代数效应与 React
官网 suspense demo

场景举例：

    <Suspense fallback={<h3>loading...</h3>}>
      <LazyCpn /> // 为 React.lazy 包裹的异步加载组件
      <Sibling /> // 一般组件
    </Suspense>

因为 Suspense 会期待子孙组件中的异步申请结束后再渲染，所以当代码运行时页面首先会渲染 fallback：loading。而在 loading 这个过程中，页面体现是统一的，然而背地的行为是不统一的：

react18 之前：即在 Legacy Suspense 中，Sibling 组件会立刻装置到 DOM 并触发其成果 / 生命周期。页面上暗藏。
react18：即在 Concurrent Suspense 中，Sibling 组件没有挂载到 DOM。它的成果 / 生命周期也不会在 ComponentThatSuspends 解决之前触发。

react18，Sibling 不会执行，会等 suspense 包裹的组件都加载完才执行渲染

优化的是提交渲染的流程：

打断兄弟组件阻止他们提交。期待提交 Suspense 边界内的所有内容 - 挂起的组件及其所有兄弟组件 – 直到挂起的数据解决。而后在一个繁多的、统一的批次中同时提交整个树渲染。

参考：

React18 中 Suspense 的行为变动
React Effects List 大重构，是为了他？

比方：新 Hook —— useId

解决问题：ssr 场景下，客户端、服务端生成的 id 不匹配！官网推出 Hook——useId 解决，每个 id 代表该组件在组件树中的层级构造。

  function Checkbox() {
    // 生成惟一、稳固 id
    const id = useId();
    return (
      <>
        <label htmlFor={id}>Do you like React?</label>
        <input type="checkbox" name="react" id={id} />
      </>
    );
  );

参考：为了生成惟一 id，React18 专门引入了新 Hook：useId

这几个重大的更新，指标都是较少渲染、依据优先级响应、晋升性能、领有更好的体验。十分值得期待。

想尝鲜的可装置 react18 beta 版 (2021-11-16 公布的)

  # npm
  npm install react@beta react-dom@beta
  # yarn
  yarn add react@beta react-dom@beta

正文完

react.js

发表至： react.js

2021-12-12

0

关于react.js:面试官最喜欢问的几个react相关问题

关于react.js:React核心工作原理

关于react.js:reactrouter

关于react.js:TypeScript与React中如何使用ref

关于java:手把手教你搭建-RabbitMQ-集群

关于react.js:react18-来了我-get-到

1. automatic batching：主动批处理。

2. concurrent apis：全新的并发 api。比方：startTransition

3. suspense：更好的 suspense。更好的反对在 ssr 和异步数据场景下应用 suspense。

1.ssr 下反对，可参考：React18 中的新 Suspense SSR 架构

2. 通明的异步数据处理（将来 18.x 反对）

3. 优化 suspense 的行为表现。

4. 其余

最初

Just My Socks（注册教程内含优惠码）

关于react.js:react18-来了我-get-到

1. automatic batching：主动批处理。

2. concurrent apis：全新的并发 api。比方：startTransition

3. suspense：更好的 suspense。更好的反对在 ssr 和 异步数据 场景下应用 suspense。

1.ssr 下反对，可参考：React18 中的新 Suspense SSR 架构

2. 通明的异步数据处理（将来 18.x 反对）

3. 优化 suspense 的行为表现。

4. 其余

最初

Just My Socks（注册教程 内含优惠码）

3. suspense：更好的 suspense。更好的反对在 ssr 和异步数据场景下应用 suspense。

Just My Socks（注册教程内含优惠码）