您好,登录后才能下订单哦!
这篇文章主要介绍“React并发特性实例分析”,在日常操作中,相信很多人在React并发特性实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React并发特性实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
React
可以对接不同宿主环境的渲染器,大家最熟悉的渲染器想必是ReactDOM
,用于对接浏览器与Node环境(SSR)。
对于一些场景,可以用ReactDOM
的输出结果做测试。
比如,下面是使用ReactDOM
的输出结果测试无状态组件的渲染结果是否符合预期(测试框架是jest
):
it('should render stateless component', () => { const el = document.createElement('div'); ReactDOM.render(<FunctionComponent name="A" />, el); expect(el.textContent).toBe('A'); });
这里有个不方便的地方 —— 这个用例依赖浏览器环境与DOM API
(比如用到document.createElement
)。
对于测试React内部运行机制这样的场景,掺杂了宿主环境相关信息显然会让测试用例编写起来更繁琐。
如果将上文的用例中ReactDOM.render
改为ReactDOM.createRoot
,那么用例就会失败:
// 之前 ReactDOM.render(<FunctionComponent name="A" />, el); expect(el.textContent).toBe('A'); // 之后 ReactDOM.createRoot(el).render(<FunctionComponent name="A" />); expect(el.textContent).toBe('A');
这是因为在新的架构下,很多同步更新变成了并发更新,当render
执行后,页面还没完成渲染。
要让上述用例成功,最简单的修改方式是:
ReactDOM.createRoot(el).render(<FunctionComponent name="A" />); setTimeout(() => { // 异步获取结果 expect(el.textContent).toBe('A'); })
如何优雅的应对这种变化?
接下来我们来看React
团队的应对方式。
首先来看第一个问题 —— 如何表达渲染结果?
既然ReactDOM
渲染器对应浏览器、Node
环境,ReactNative
渲染器对应Native
环境。
那能不能为测试内部运行流程专门开发一个渲染器呢?
答案是肯定的。
这个渲染器叫React-Noop-Renderer
。
简单的说,这个渲染器会渲染出纯JS
对象。
React
内部有个叫Reconciler
的包,他会引用一些操作宿主环境的API
。
比如如下方法用于向容器中插入节点:
function appendChildToContainer(child, container) { // 具体实现 }
对于浏览器环境(ReactDOM
),使用appendChild
方法实现即可:
function appendChildToContainer(child, container) { // 使用appendChild方法 container.appendChild(child); }
打包工具(rollup
)将Reconciler
包与上述这类针对浏览器环境的API打包起来,就是ReactDOM
包。
在React-Noop-Renderer
中,与ReactDOM
中的DOM
节点对标的是如下数据结构:
const instance = { id: instanceCounter++, type: type, children: [], parent: -1, props };
注意其中的children
字段,用于保存子节点。
所以appendChildToContainer
方法在React-Noop-Renderer
中可以实现的很简单:
function appendChildToContainer(child, container) { const index = container.children.indexOf(child); if (index !== -1) { container.children.splice(index, 1); } container.children.push(child); };
打包工具将Reconciler
包与上述这类针对React-Noop的API打包起来,就是React-Noop-Renderer
包。
基于React-Noop-Renderer
,可以完全脱离正常的宿主环境,测试Reconciler
内部的逻辑。
接下来来看第二个问题。
并发特性再复杂,说到底也只是各种异步执行代码的策略,最终执行策略的API
不外乎setTimeout
、setInterval
、Promise
等。
在jest
中,可以模拟这些异步API
,控制他们的执行时机。
比如上面的异步代码,在React
中的测试用例会这么写:
// 测试用例修改后: await act(() => { ReactDOM.createRoot(el).render(<FunctionComponent name="A" />); }) expect(el.textContent).toBe('A');
act
方法来自jest-react
包,他的内部会执行jest.runOnlyPendingTimers
方法,让所有等待中的计时器触发回调。
比如如下代码:
setTimeout(() => { console.log('执行') }, 9999999)
执行jest.runOnlyPendingTimers
后会立刻打印执行。
通过这种方式,人为控制React
并发更新的速度,同时对框架代码0侵入。
除此之外,用于驱动并发更新的Scheduler
(调度器)模块,本身也有一个针对测试的版本。
在这个版本中,开发者可以手动控制Scheduler
的输入、输出。
比如,我想测试组件卸载时useEffect
回调的执行顺序。
如下面代码所示,其中Parent
为挂载的被测试组件:
function Parent() { useEffect(() => { return () => Scheduler.unstable_yieldValue('Unmount parent'); }); return <Child />; } function Child() { useEffect(() => { return () => Scheduler.unstable_yieldValue('Unmount child'); }); return 'Child'; } await act(async () => { root.render(<Parent />); });
根据yieldValue
的插入顺序是否符合预期,就能确定useEffect
的逻辑是否符合预期:
expect(Scheduler).toHaveYielded(['Unmount parent', 'Unmount child']);
到此,关于“React并发特性实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。