9 天前 / 噶牛爱尚
首发于阿里云中台前端/全栈团队专栏写文章在 React 中使用 Shadow DOMHoufengProgramming is playing.73 人赞同了该文章1. Shadow DOM 是什么Shadow DOM 是什么？我们先来打开 Chrome 的 DevTool，并在 'Settings -> Preferences -> Elements' 中把 ' Show user agent shadow DOM' 打上勾。然后，打开一个支持 HTML5 播放的视频网站。比如 Youtube： 可以看到 video 内部有一个 #shadow-root ，在 ShadowRoot 之下还能看到 div 这样的普通 HTML 标签。我们能知道 video 会有「播放/暂停按钮、进度条、视频时间显示、音量控制」等控件，那其实，......
16 天前 / itclanCoder
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文| 川川 VX-ID:suibichuanji 点击下方小程序可看视频 点击文末左下方阅读原文,可看更多内容 （妹子搁这了,不点点看看么） 前言 props与state都是用于组件存储数据的一js对象,前者是对外暴露数据接口,后者是对内组件的状态,它们决定了UI界面显示形态,而若想要用户与界面有些交互动作 也就是web浏览器通知应用程序发生了什么事情,例如:鼠标点击,移动,键盘按下等页面发生相应的反馈,......
17 天前 / 噶牛爱尚
首发于最美前端写文章解读源码系列——create-react-app吴战磊曹操出行 资深前端工程师15 人赞同了该文章create-react-app 是一款优秀的react app脚手架，我花了一些时间把源码做了一个梳理和解读，用注释的方式把主线做了一个引导，大家可以一起学习下： github项目地址：https://github.com/mutong772817723/single-app-cli 该项目已经发布到npm上面，可以用于构建单页面应用 //安装single-app-clinpm install single-app-cli -g//创建一个单页面应用single-app-cli 这期解读了createapp的整个过程，下拉git模板项目的过程这期没有，后续会继......
26 天前 / 美码师
概念Reactive Programming(响应式编程)已经不是一个新东西了。关于 Reactive 其实是一个泛化的概念，由于很抽象，一些理论性的介绍很容易把人带到沟里去，包括一些语言框架在实现上也会使用不同的一些概念。 按照 维基百科的解释： reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change 意思就是，Reactive Programming 就是一种面向数据流、关注变更的声明式编程范式。面向数据流比较容易理解，而关注变更则说的应该是数据流的特点，比如来自某个界面元素属性的变更(前......
39 天前 / 冷星1024
翻译：刘小夕 原文链接：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ 原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我不得不进行了分割，本篇文章重点阐述 SRP，即单一职责原则。 ————————我是一条分割线—————— 我喜欢React组件式开发方式。你可以将复杂的用户界面分割为一个个组件，利用组件的可重用性和抽象的DOM操作。 基于组件的开发是高效的：一个复杂的系统是由专门的、易于管理......
46 天前 / 小米云技术官方
本文梳理了容器与展示组件、高阶组件、render props这三类React组件设计模式 往期回顾：HBaseCon Asia 2019 Track 3 概要回顾 随着 React 的发展，各种组件设计模式层出不穷。React 官方文档也有不少相关文章，但是组织稍显凌乱，本文就组件的设计模式这一角度，从问题出发，为大家梳理了常见的设计模式。看完这篇文章后，你将能得心应手地处理绝大多数 React 组件的使用问题。开始之前先解释一下什么是设计模式。所谓模式，是指在某些场景下，针对某类问题的某种通用的解决方案。本文所阐述的设计模式并不是编程通用的设计模式，如大家熟悉......
65 天前 / itclanCoder
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 点击文末下方小程序可看视频,土豪请随意 点击阅读原文,可看更多内容 撰文 | 川川 1.JSX中添加属性有什么要注意的以及JSX中的子元素是怎么操作的 2. 组件的大小写问题,使用拓展运算符,以及怎么循坏遍历一个对象 3. JSX中的prop指的是什么以及表单的labe应该要注意什么 以上问题即使自己很清楚,但是否有时却总是道不清,说不明？那么读完本文,就豁然开朗了 J......
65 天前 / u525858
写文章React Native自定义下拉刷新组件Jesse前端码农2 人赞同了该文章React Native 自定义下拉刷新组件 PullToRefresh针对猴急一些的同学，可以先在这个 Expo网站在线运行下demo看看效果。 完整的代码，在 Github仓库。 下拉刷新，是一个很常见的交互方式。React-Native(以下简称RN)内置的 FlatList 是支持下拉刷新组件的，通过设置 refreshControl属性即可。通常我们不仅仅需要定制下拉组件，还需要在下拉过程中，下拉组件执行一些动画，比如在我们场景下，公司logo会随着下拉的幅度，不同的笔画还是显现出颜色。这就需要我们的下拉组件，知道当......
66 天前 / Jartto
最近要使用 Electron 来构建 React 项目，突然发现之前的 Demo已经不能正常运行了，有些感概技术发展的迅猛。如果你还不了解 Electron，可以看我之前的文章：初探 Electron - 理论篇，理论知识没有变。如果你想了解 Electron5.0 版本如何构建 React 项目，不妨继续看本文。 需要注意：网上流传的 1.0 版本的项目应该已经启动不了了。 一、为什么要写此文之前研究的时候，Electron 还是 1.0 版本，因此写了一系列的文章。 初探 Electron - 理论篇初探 Electron - 升华篇初探 Electron - 实践篇1初探 Electron - 实践篇2经过本次尝试，发现 5.0 版......
80 天前 / 鱼籽酱yzh
点击上方“独立开发者周刊” 喜欢本文，请置顶或星标 原文 - Learning React Without Using React Part 2 接着我们上次讲到的内容。这篇文章将着重于改进我们简单的待办事项列表。当前的实现由一组函数组成，它们呈现完整的应用，并包含一个管理我们状态的简单store。但是，我们需要做一些事情来改进我们的应用。这里是一个与当前示例和代码的链接。 首先，我们没有妥善处理我们的事件。我们的组件不处理任何事件。在React中，事件触发数据流。 这意味着我们的组件应该触发事件。举个例子我们的ItemRow方法应该调用一个通过props传递......
90 天前 / 子曰五溪
首发于lightningMiners写文章入门TypeScript编写Reacticepyhttps://icepy.me 厨子/摩旅/编程16 人赞同了该文章使用 create-react-app 开启 TypeScriptCreate React App 是一个官方支持的创建 React 单页应用程序的CLI，它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时，你可以运行： $ npx create-react-app my-app --typescript$ # 或者$ yarn create react-app my-app --typescript如果在已有的工程中添加，也非常简单： $ npm install --save typescript @types/node @types/react @typ......
99 天前 / 静逸秋水
很早之前，写过一篇 《使用enzyme 测试你的 React 组件》, 综合叙述了如何利用 Karma+ Webpack+ Enzyme进行组件的测试， 从而确保我们的质量。 相对而言，这次会丰富一些，比如组件的 UI 事件以及 redux 引入后的测试。 项目使用 yarn-react-webpack-seed为案例，你可以在项目里找到源码。 建立测试安装 karma $ npm install karma karma-chai karma-chrome-launcher karma-coverage karma-jasmine karma-sourcemap-loader jasmine-core karma-webpack --save-dev安装 enzyme 相关 npm install enzyme redux-mock-store enzyme-adapter-react-1......
101 天前 / 噶牛爱尚
写文章从React Hooks看React的本质canonical千山万水32 人赞同了该文章后jQuery时代的前端革命是由AngularJs发起的，它最初的一个想法是将后台的技术架构复制到前台来。后端的一个核心技术是所谓的模板技术(template)。它可以用一个公式来描述 html = template(vars)这是一个特别直观的想法：模板就是一个普通函数，它根据传入的变量信息（无特殊要求）拼接得到字符串（无特殊结构）。这一模型完全不需要考虑面向对象传统的状态分散管理的问题，基本上是一种函数式的解决方案。 React的模式相当于是对模板渲染模型的一个面向领域结构的改进 vdom......