文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

2021年React学习路线图

从四部分来理解组件： 学习组件之间的数据通讯 从组件的角度想象一个页面 生命周期和状态 函数和类组件 你应该理解属性的概念，它是怎么传递到子组件，怎么使用 PropTypes 来进行类型检查。...图片 React Bootstrap 主页被分割成多个组件 每个组件有一套生命周期，动态数据保存在状态中。当状态中的数据发生改变时，组件会再次渲染，来更新这些变更。你要理解这几个基础概念。...它用在函数组件中，允许开发者不使用类的情况下，使用状态和其他特性。 之前，函数组件是无状态的，状态和生命周期用在类组件中。有了 Hooks，开发者可以在函数组件中使用状态。...尽管 Redux 非常复杂，并且为最简单的数据获取引入了大量模版代码，但它仍然是业界非常流行的和广泛使用的状态管理库。...您应该学习最流行的测试库，如 Jest 和 Enzyme，以及如何使用库（如 Sinon ）模拟 API 调用。还有其他库，比如 React 测试库。

8.6K21

40道ReactJS 面试问题及答案

ReactJS 是一个功能强大的 JavaScript 库，用于使用构建块创建交互式用户界面。 ReactJS 的运行原理是声明式和基于组件的方法。...Provider 组件用于包装组件树中上下文数据可用的部分，Consumer 组件用于使用上下文数据。 useContext() 挂钩用于使用功能组件内的上下文数据。...：为组件编写测试涉及使用 Jest 和 React 测试库等测试库来确保组件按预期运行。...最后，我们断言使用正确的表单数据调用了handleSubmit 函数。 快照测试：快照测试是一种捕获组件输出“快照”并将其与先前存储的快照进行比较的方法。 使用 Jest 创建和维护组件输出的快照。...如何构建 ReactJS 应用程序？ 构建 ReactJS 应用程序涉及设计结构和组织组件、状态管理、路由、数据获取以及应用程序的其他方面，以实现可维护性、可扩展性和性能。

8.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    领域设计、文件结构、数据管理、主题替换

    ，甚至是页面级的 model 数据，至于数据的处理方案，请向下细读 数据管理 整体使用的是 context 的一个方案，包裹在最外层，在里层去消费数据 用到了一个三方库 unstated-next[1]...，使用 jest + testing-library + mm 来进行 mock 以及断言 最好可以在 CI/CD 上配置增量的代码覆盖率是要求在多少，每个 mr 都不能拉低单测覆盖率（待学习） 需要注意的一些点...: zh-hans.reactjs.org/docs/testin…[3] testing-library: rualc.com/frontend/te…[4] rualc.com/frontend/te.../je…[11] juejin.cn/post/709218…[12] mm: www.npmjs.com/package/mm[13] 如果在组件维度去写单测需要去 mock 和页面一样多的数据时，我们应该考虑单测的覆盖维度就是页面级别的...target=https%3A%2F%2Fzh-hans.reactjs.org%2Fdocs%2Ftesting-recipes.html [4] https://rualc.com/frontend

    56730

    JavaScript 测试系列实战（三）：使用 Mock 模拟模块并处理组件交互

    在之前的两篇教程中，我们学会了如何去测试最简单的 React 组件。在实际开发中，我们的组件经常需要从外部 API 获取数据，并且组件的交互逻辑也往往更复杂。...API 获取数据。...改写 TodoList 组件 首先让我们改造组件，使其能够通过 API 获取数据。...打开 TodoList 的测试文件，首先在最前面通过 jest.mock 配置 axios 模块的 Mock（确保要在 import TodoList 之前），在 Mock 之后，无论在测试还是组件中使用的都将是...首先通过 jest.spyOn，我们便可以监听一个函数的使用情况，然后使用配套的 toBeCalled Matcher 来判断该函数是否被调用。整体代码十分简洁，同时也保持了很好的可读性。

    6K20

    JavaScript 测试教程–part 3：测试 props，挂载函数和快照测试

    JavaScript测试教程-part 1：用 Jest 进行单元测试 2. JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 3....JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互 在上一篇教程中，我介绍了使用 Enzyme 测试 React 组件的基础知识。...在这种情况下子组件将根本不会被渲染。所以上面的测试失败了，你需要了解“浅渲染”的局限性。 Mount 模拟了 DOM 的实现，而 Jest 默认使用 jsdom。...使用 mount 函数可能意味着你是在进行单元测试，而现在在进行集成测试。正是由于这个事实，使用 mount 函数能够测试这些组件是否可以协同工作，而不仅仅是单独的单元测试。...要了解有关高阶组件的更多信息，请查看官方指南【https://reactjs.org/docs/higher-order-components.html】和 David Kopal 的文章【https:

    2.2K20

    ReactJS学习(二)

    2.2、ReactJS简介 官网：https://reactjs.org/ 官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的...ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。...ReactJS圈内的一些框架简介： Flux Flux是Facebook用户建立客户端Web应用的前端架构， 它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非框架。...Ant Design提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。 2.3、搭建环境 2.3.1、创建项目 我们依然选择使用UmiJS作为构建工具。...在umi中，约定的目录结构如下： 在config.js文件中输入以下内存，以便后面使用： //导出一个对象，暂时设置为空对象，后面再填充内容 export default {}; 第二步，创建HelloWorld.js

    4.8K10

    React 组件测试技巧

    React 组件的常见测试模式。 注意： 此页面假设你正在使用 Jest 作为测试运行器。如果你使用不同的测试运行器，你可能需要调整 API，但整体的解决方案是相同的。...; }); --- 数据获取 {#data-fetching} 你可以使用假数据来 mock 请求，而不是在所有测试中调用真正的 API。...使用“假”数据 mock 数据获取可以防止由于后端不可用而导致的测试不稳定，并使它们运行得更快。注意：你可能仍然希望使用一个"端到端"的框架来运行测试子集，该框架可显示整个应用程序是否一起工作。...--- 快照测试 {#snapshot-testing} 像 Jest 这样的框架还允许你使用 toMatchSnapshot / toMatchInlineSnapshot 保存数据的“快照”。...由 jest 自动填充 ... */ }); 通常，进行具体的断言比使用快照更好。这类测试包括实现细节，因此很容易中断，并且团队可能对快照中断不敏感。

    5.7K00

    2020全球JS报告调查结果,请查收

    兴趣度 满意度 数据层 使用排名比较高的状态管理依旧是Redux、Vuex、Mobx。 数据管理为 GraphQL 和 Apollo，并且 XState 横空出世。...其他工具 测试框架 Jest和 Mocha 在使用量上依旧是统治地位，但是新增了 Testing Libray 很强劲。 以下是满意度排行。 什么是 Testing Library ？...用于 DOM 和 UI 组件测试的一系列工具，主要 API 包含 DOM 查询，更可以和其他测试工具(jest、cypress)配合，用于更多场景(react、vue、svelte)。...我们推荐使用 React Testing Library，它使得针对组件编写测试用例就像终端用户在使用它一样方便。...----摘自 React 官网(https://zh-hans.reactjs.org/docs/test-utils.html) 打包工具 虽然短时间内 webpack 使用量还处于霸主地位，这一年打包工具的发生了巨大的变化

    1.2K00

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    Reflux 实现了 Flux 概述的单向数据流模式。 Store 注册在 app/stores 下，用于存储应用程序使用的各种数据。 Action 需要在 app/actions 下注册。...注意：你的文件名必须是 .spec.jsx 否则 jest 不会运行它！ 我们在 setup.js 中定义了有用的 fixtures，使用这些！如果您以重复的方式定义模拟数据，则可能值得添加此文件。...https://reactjs.org/docs/hooks-rules.html 此外，我们建议您尽量少使用 useEffect。...getByTestId - 因为这不反映用户如何与应用交互，所以只推荐用于不能使用任何其他选择器的情况 如果您仍然无法决定使用哪个查询， 请查看 testing-playground.com 以及 screen.logTestingPlaygroundURL...示例是 组件。 margin 和 padding Margin 属性 以 m 开头，以 p 填充。

    8K30

    「前端架构」React和Vue -CTO的选择正确框架的指南

    或者在那些年里，我将被一个几乎无法维护的遗留应用程序所束缚? 框架支持服务器端呈现吗? 框架适合轻量级还是重量级应用程序? 这些框架的顶级实用程序是什么?什么时候使用它们是正确的选择?...对我来说，Vue更像是一个简单的JavaScript，还有一些新的想法，单向数据流、组件和事件驱动的模型。 Vue的学习曲线 在学习曲线方面，Vue胜过了其他Javascript框架。...在React中测试和调试 测试:Facebook推荐Jest来测试React代码。下面是Jest和Mocha 的比较——还有一篇文章是关于如何在Mocha 中使用Enzyme 的。...Enzyme 是Airbnb使用的一个JavaScript测试工具(与Jest、Karma和其他测试运行程序一起使用)。...他们建议使用Karma。Vue与Jest一起工作，还有Vue test Utils.。 调试:与调试任何其他web应用程序一样，Vue中的调试变得更加容易。

    5.5K20

    小程序 自动化测试

    自动化测试在小程序中使用自动化测试，主要包括：单元测试、接口测试、web页面点击事件单元测试使用 jest全局安装 npm i jest -g在项目中创建jest.config.jsmodule.exports...工具手点 方式优点：不需要写代码可以导出用例缺点：数据填充问题特殊场景无法完成如：断网，接口报错，选择图片使用在开发者工具 -> 工具 -> 自动化测试中，添加用例，点击录制按钮，对左侧模拟器上的页面进行操作...，系统会自动记录整个过程，在操作过程中，可以对数据，页面进行快照、截图等操作在用例添加完成后，可以导出为jest代码，在单独的文件中维护生成报表结果在项目中也可以在非项目中，运行jest，会对jest.config.js...element.input输入文本，仅 input、textarea 组件可以使用。element.callMethod调用组件实例指定方法，仅自定义组件可以使用。...element.data获取组件实例渲染数据，仅自定义组件可以使用。element.setData设置组件实例渲染数据，仅自定义组件可以使用。

    3.5K20

    「首席架构师推荐」React生态系统大集合

    react-table - React的轻量级，快速且可扩展的数据网格 react-data-grid - 使用React构建的类似Excel的网格组件 react-draggable - React...- 用于React的QR组件 做出React 命令行 ink - 对交互式命令行应用程序进行React react-blessed - 用于祝福终端接口库的React渲染器 React测试 jest...react-leaflet - 用于Leaflet映射的React组件 react-geo - 使用react，antd和ol的一组与地理相关的组件 pigeon-maps - 没有外部依赖关系的ReactJS...React图表组件 react-stockcharts - 具有ReactJS和d3的高度可定制的股票图表 Number Picture - 使用React和D3构建动画可视化的低级构建块。...Redux，Parse.com，Jest（88％覆盖率）React原生iOS和Android Ignite - React Native，样板，插件，生成器等最热门的CLI！

    16.5K30

    React+Redux仿Web追书神器

    ：容器组件就放在components中，和模块组件(比如左侧菜单组件、书籍列表组件等)就放到 component-module中; 页面状态等公共部分最好是独立起来，统一管理; 跨域配置使用 pathRewrite...字段，需要注意 webpack-dev-server 的版本 准备工作 整理 API 学习 Redux(搭建脚手架) API 数据 数据来源主要是两个地方：一个是开源的Android项目与RN版本的数据...，另一个是追书神器h5移动端 数据跨域：网上查了不少方法，考虑到便捷，使用反向代理的方式处理 学习 Redux 刚开始我差不多用一个星期多学习了 Github 上的 从零开始学 ReactJS（ReactJS...这里提下反向代理部分，关于使用 webpack-dev-server 进行配置反向代理的时候，如果使用 pathRewrite 到属性需要注意 webpack-dev-server 版本，这个属性是在...扩展内容 功能扩展 讨论区数据统计分析，主要想知道一段时间的热点内容。 测试及优化 现在项目代码是没有进行单元测试，后续学习集成JEST测试 优化部分页面的组件以及一些 bugs

    2K80

    127. 精读《React Conf 2019 - Day1》

    这也从某种意义上说明了 iconFont 注定被淘汰，因为字体文件目前无法按需加载，只有全部使用 SVG 图标的项目才能使用这种优化。...本地 hooks 无法提交，导致项目开发规则可能不尽相同。 无法替代 CI、服务端分支保护、Code Review。...国际化仓库命名规则是 reactjs/xx.reactjs.org，比如简体中文的国际化仓库是：https://github.com/reactjs/zh-hans.reactjs.org 从仓库的 readme...关于数据流的话题目前没有什么新意，但这次 React Conf 关于数据流总结的算是比较真诚的，总结了以下几个点： 全局数据流现在不是必须的，比如 Redux，但也不能说完全不能用，至少在全局状态较为复杂时有必要使用...不要只使用一种数据流方案，根据状态的作用域确定方案比较好。 工程技术与科学不同，工程世界没有最好的方案，只有更好的方案。 就算有了完美方案也不要停止学习的步伐，总会有新知识产生。

    2.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券