3 天前 / u525858
首发于二不挂五写文章[译]React函数组件和类组件的差异Jess前端码农2 人赞同了该文章[译]React函数组件和类组件的差异原文： https://overreacted.io/how-are-function-components-different-from-classes/ 在 React.js 开发中，函数组件(function component) 和 类组件(class component) 有什么差异呢？ 在以前，通常认为区别是，类组件提供了更多的特性(比如state)。随着 React Hooks的到来，这个说法也不成立了(通过hooks，函数组件也可以有state和类生命周期回调了)。 或许你也听说过，这两类组件中，有一类的性能更好。哪一类呢？很多这方......
11 天前 / 铜板街技术
背景在 Hook 出现之前，为实现一个计数器的功能，我们最常用的做法是在react class 的构造函数中声明一个 count的状态变量，然后通过在点击事件中调用 this.setState 方法 对 count 进行递增操作。 案例代码如下： 1classExampleextendsReact.Component{ 2constructor(props){ 3super(props); 4this.state={ 5count:0 6}; 7} 8 9render(){ 10return( 11
Youclicked{this.state.count}times
1319 天前 / 铜板街技术
React组件自动化测试1. 为什么要进行自动化测试当我们编写一个组件的时候，要怎么保证组件功能能达到预期呢？你可能回答：我可以人工测试。但是当经历三四次迭代，当有多人协调开发，当进行重构的时候，如何能快速的验证组件是否依然正确执行？这正是需要自动化测试的原因。无论经历多少次迭代，好的自动化测试都能保证你的组件能够正确执行。 A component that is untestable or hard to test is most likely badly designed. 经过测试的组件是可靠的，可测的组件的架构是合理的。如果一个组件难以下手编写测试用例，只能证明这个组件的设计是糟......
20 天前 / 噶牛爱尚
首发于前端这件小事写文章RIS，创建 React 应用的新选择beyondxgb31 人赞同了该文章前言RIS, React Integrated Solution. 它的目标是提供一套基本的构建配置方案，而且配置是能高度扩展的，希望通过它能对外输出 React 的一些最佳实践。 RIS是我在去年11月开始开源出去的，这工具之前在内部团队使用过，反馈还不错，断断续续维护和写文档，现在介绍给大家，希望能给大家提供一些帮助和启发。 背景目前社区已经有很多优秀的工具或框架做前端构建的事情，而且集成了相关的最佳实践，比如 create-react-app，react-boilerplate，umi等等，这三个我都......
22 天前 / 不仅会写代码的程序元
React16.6于2018年10月份发布，该版本带来了许多新的特性同时赋予给React更强大的功能。其中最为显著的两个特性是 React.Suspense和 React.lazy。这两个特性，将React的代码分割和懒加载带到了一个新的高度。使用这两个特性，你可以做到的是在真正需要时才加载该组件的文件。 本文主要介绍我在项目中如何使用 React.Suspense和 React.lazy以及该特性给我们React开发者带来的好处。 一、为什么要使用代码分割 随着前端技术的不断发展，ES6模块、Babel转换、webpack打包等新技术的出现，前端应用现在完全可以使用模块化的方式完成，便于维护。 ......
23 天前 / 铜板街技术
在介绍 Refs 之前，我们先来了解两个概念：受控组件 和 不受控组件。 受控组件在 HTML 中，表单元素（如 input、textarea、select）之类的表单元素通常可以自己维护state，并根据用户的输入进行更新。而在React中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过 setState()来更新。 在此，我们将 React的state作为唯一的数据源，通过渲染表单的React组件来控制用户输入过程中表单发送的操作。 这个“被React通过此种方式控制取值的表单输入元素”被成为受控组件。 不受控制组件从字面意思来理解：不被React组件控制的组......
31 天前 / 噶牛爱尚
https://www.zhihu.com/video/1091350293803032576从以上的几个例子可以看到，代码的静态分析并不仅限于单个文件的信息提取。将所有文件的信息汇总后，我们可以拼接出整个项目的相关架构。通常我们对软件架构的了解是基于项目初期的设计图，但是这些设计图往往无法遵循项目实施过程中的变化而更新，实用价值越来越低。而从代码分析中获得的架构图能准确地反映任何一个时间点的项目实际情况。 代码分析的作用在状态管理容器的可视化上尤为突出。许多React，Vue和Angular的项目采用了状态管理库：Redux，Vuex，和NgRx。虽然这些库的具体实现和术语有......
42 天前 / u519262
原文:The most important lessons I’ve learned after a year of working with React 翻译: joky （有稍做修改） 学习一项新技术总是会遇到很多挫折! 万事开头难，然后中间难，然后结尾难…（手动滑稽）。你可能会让自己遨游于各种教程或书籍的海洋中，去倾听别人提出的不同观点。每个人的观点似乎都是正确且完美的，这让我们很难判断我们选择的教程是否对我们有利。 在我们置身于海洋之前，我们需要了解这项新技术的基本概念。例如我们要开始学习React，我们就要站在 React 的角度进行思考，与 React 合二为一。 下面我会跟大家分享我这一......
43 天前 / 携程技术中心
作者简介 颜陈宇，携程玩乐高级前端开发工程师，前端架构组成员，目前主要负责玩乐国际化项目的App、H5以及Online三端技术架构。热衷于react技术栈，喜欢阅读和分享。 引言 为什么数据流管理如此重要？react的核心思想就是：UI=render(data)，data就是我们说的数据，render是react提供的纯函数，所以用户界面的展示完全取决于数据层。 这篇文章希望能用最浅显易懂的话，将react中的数据流管理，从自身到借助第三方库，将这些概念理清楚。我会列举几个当下最热的库，包括它们的思想以及优缺点，适用于哪些业务场景。 这篇文章......
60 天前 / 江米小枣tonylua
原文： https://blog.bitsrc.io/lazy-loading-react-components-with-react-lazy-and-suspense-f05c4cfde10c 虽然在 React 16.8.1 中终于面世的 hooks 引人瞩目，但在去年发布的 16.6.0 版本里也包含了一个吸引人的新特性，可以让我们在不依赖第三方库的情况下简化对延迟加载（lazy loading）的处理。 让我们看看如何借助这个特性改善应用性能，并构建更好的用户体验。 按照过往的经验，在构建组件的时候，将其用类似 Bit 的工具归纳起来是很有用的 -- 可以分享你的组件并在任意应用中使用之，以加速开发并保持 DRY 原则。 React.lazy() 是什......
61 天前 / 冷星1024
在过去的一年和一些人中，我一直在与 Creative Tim 合作。 我一直在使用 create-react-app 来开发一些不错的产品。 有很多客户询问如何在 Webpack 上迁移我们的产品模板。 在多次要求求之后，我们写了这个关于如何开始使用 React with Webpack 4和 Babel 7 的小教程。在本教程的最后，将向大家展示如何在新创建的应用程序上添加 Material Dashboard React。 在我们开始之前，请确保你的电脑上安装了 npm 和 Nodejs 的最新版本。在撰写本文时，我的电脑上的最新版本是 npm 的 6.4.1和 Nodejs 的 8.12.0 (lts)。 建立项目 ......
82 天前 / 王下_邀月熊
首发于某熊的全栈之路写文章基于 React & TS & Webpack 的微前端应用模板王下邀月熊王下邀月熊29 人赞了该文章m-fe/react-ts-webpack在 Web 开发导论/微前端与大前端一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。如康威定律(Conway’s Law)所言，设计系统的组织，其产生的设计和架构等价于组织间的沟通结构；微服务与微前端不仅仅是技术架......