React_React资料文章-InfoQ写作平台

React

0 人感兴趣 · 39 次引用

关注

最新
推荐

https://static001.geekbang.org/infoq/10/1004ad722cb21575c46ae4db23869faa.png?x-oss-process=image/resize,w_416,h_234

探索 React 合成事件

pingan87871 月 11 日

React 是一个 Facebook 开源的，用于构建用户界面的 JavaScript 库。

前端 React 28天写作

https://static001.geekbang.org/infoq/b6/b67cfa74270dec9342de3ed02c81e514.png?x-oss-process=image/resize,w_416,h_234

如何搭积木式的快速开发 H5 页面?

徐小夕2020 年 12 月 15 日

2个月前开源的H5编辑器 H5-Dooring 目前已经成功迭代到1.0版本, 从最开始的基本的页面生成框架到现在的支持更丰富的组件资源,交互能力和数据追踪能力, 期间做了很多的设计和迭代,也收获了很多网友的反馈和启发, 也有很多志同道合的朋友加入进来一起让 H5-Doo

Java 前端前端工程 React 数据可视化

https://static001.geekbang.org/infoq/36/36db2450dd258b9d05ab785a5794f21b.png?x-oss-process=image/resize,w_416,h_234

深度剖析 github star 数 15.1k 的开源项目 redux-thunk

徐小夕2020 年 12 月 3 日

日益忙碌的一周又过去了，是时候开始每周一次的总结复盘了，今天笔者就来剖析一下github中star数15.1k的开源项目redux-thunk。

Java GitHub 前端工程 React 前端进阶

https://static001.geekbang.org/infoq/45/457ea6b67ac6cc104575db949cb21274.png?x-oss-process=image/resize,w_416,h_234

前端如何实现一键截图功能?

徐小夕2020 年 11 月 24 日

网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的映射到自己的服务体系里面, 比如H5页面中, 植入更多信息收集, 交互能力. 这一块的应用探索, 页面

Java 前端 React 前端训练前端进阶

https://static001.geekbang.org/infoq/5a/5a0a651fefb1bd20a4f62ccb32bb28d0.jpeg?x-oss-process=image/resize,w_416,h_234

React 灵魂 23 问

局外人2020 年 11 月 21 日

适用于 React 高级进阶

Java 前端 React

https://static001.geekbang.org/infoq/aa/aabd5793fde7b29ddf131a2b5e1d07e5.png?x-oss-process=image/resize,w_416,h_234

有点意思的 gif 动图生成平台开发实战 (二)

徐小夕2020 年 11 月 17 日

笔者之前利于业余时间开发了一个gif动图生成平台, 具体开发背景我也在上一篇文章手把手教你撸一个能生成抖音风格动图的gif制作平台中介绍过了, 我们今天继续来实现该平台, gif动图平台的实现方式比较将完全用前端的手段来实现, 所以大家在接下来的内容中会发

Java Vue 前端 GIF React

React Fiber 是什么？

局外人2020 年 11 月 17 日

React 15 以及之前的版本有一个主要的问题 —— 虚拟 dom 的 diff 操作是同步完成的。

react.js 前端 React

https://static001.geekbang.org/infoq/a0/a01586ff4acd370b1e483374f6df98c2.png?x-oss-process=image/resize,w_416,h_234

如何使用 JavaScript 实现前端导入和导出 excel 文件 (H5 编辑器实战复盘)

徐小夕2020 年 11 月 13 日

最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下:

Java node.js 前端 React 数据可视化

https://static001.geekbang.org/infoq/fd/fd6358f2efc4dccb3fc25f520e259d46.png?x-oss-process=image/resize,w_416,h_234

前端如何一键生成多维度数据可视化分析报表

徐小夕2020 年 11 月 13 日

本文是基于上一篇文章介绍**H5编辑器后台管理系统实战的第二篇文章, 也是比较重要的一篇文章, 主要介绍后台系统中如何基于已有数据表格自动生成多维度可视化报表**.

Java node.js 前端 React 数据可视化

https://static001.geekbang.org/infoq/8e/8e35508fb17db339966a3dc3d3b712e8.jpeg?x-oss-process=image/resize,w_416,h_234

React Ref 如何使用（译）

西贝2020 年 11 月 4 日

介绍React Ref相关的内容，并提供了示例

Java 翻译 React Hooks Ref

https://static001.geekbang.org/infoq/70/70112c90f3254a4ce7949e3a143064b3.png?x-oss-process=image/resize,w_416,h_234

从零实现一个动态表单设计 (编辑) 器

徐小夕2020 年 11 月 3 日

之前笔者有写过一篇如何设计动态表单配置平台的文章，但是由于笔者电脑问题代码丢失，所以后期重新实现了一套表单设计器，并优化了之前的设计方式，特地做一下总结和复盘。

Java 编辑器 H5 Node React

https://static001.geekbang.org/infoq/2d/2db84940ad0132fd45750eeaa7e3805a.jpeg?x-oss-process=image/resize,w_416,h_234

1 分钟教你如何整理 React 知识体系

Leo2020 年 11 月 3 日

前言: 如果你想快速学习梳理一门前端框架，那就来看看这个吧

学习前端 React 前端进阶训练营

https://static001.geekbang.org/infoq/52/52b2187ebdd79349d768c2dd5b106d1a.jpeg?x-oss-process=image/resize,w_416,h_234

为什么 React Hooks 优于 HOCs（译）

西贝2020 年 11 月 3 日

HOC和React Hooks 通过一些示例做了对比，为选择哪种方式提供了参考

Java 翻译 React Hooks HOC

https://static001.geekbang.org/infoq/9e/9ec8ca135fb7ebdab7a695d40fac98e7.png?x-oss-process=image/resize,w_416,h_234

基于 React+Koa 实现一个 h5 编辑器

徐小夕2020 年 11 月 2 日

前段时间笔者一直忙于数据可视化方面的工作，比如如何实现拖拽式生成可视化大屏，如何定制可视化图表交互和数据导入方案等，这块需求在B端企业中应用非常大，所以非常有探索价值。

Java nodejs H5 React koa

https://static001.geekbang.org/infoq/da/da59288c3daa4fb773b7b3368ca6f9b2.png?x-oss-process=image/resize,w_416,h_234

1 分钟带你入门 React 生命周期

Leo2020 年 10 月 26 日

前言：给你一个问题，在React中父组件执行了render函数，那么它的子孙组件会执行哪些钩子函数，如果不了解的话，就来看看这个篇文章吧。

react.js 前端 React 生命周期前端进阶训练营

https://static001.geekbang.org/infoq/33/33a041d5889f43d2fbd051605c03b87b.png?x-oss-process=image/resize,w_416,h_234

1 分钟带你入门 React SCU、memo、pureCom

Leo2020 年 10 月 23 日

前言: 话说React的性能优化，你也许能想到shouldComponentUpdate这个钩子函数，如果不了解，那么你更加需要看啦

react.js 前端 React 前端进阶训练营前端性能优化

https://static001.geekbang.org/infoq/e7/e719f5bf47b605aa6db4d6d8edaf3e3f.jpeg?x-oss-process=image/resize,w_416,h_234

1 分钟带你 get React setState 面试要点

Leo2020 年 10 月 22 日

前言: 对于React的初学者来说，setState这个API是再亲切不过了，但你真的了解它了吗？面试时工作是，你能讲清楚他吗？

面试前端 React 前端进阶训练营 setState

https://static001.geekbang.org/infoq/32/324775b07570a7102d960dd45c5aa914.png?x-oss-process=image/resize,w_416,h_234

1 分钟带你入门 React 公共逻辑抽离 HOC...

Leo2020 年 10 月 21 日

前言: 看到这标题你会想到什么 ? HOC ? Render Props ? 自定义Hooks ? mixin ? 哈哈, mixin 已经被React抛弃了，今天由我来个给你们理清这些看似高深的概念

React Hooks 前端进阶训练营 HOC Render Props

https://static001.geekbang.org/infoq/33/33e72e10b6532b0560b01e5a6e1b4046.png?x-oss-process=image/resize,w_416,h_234

1 分钟带你入门 Redux、React-Redux

Leo2020 年 10 月 21 日

前言：还在迷茫在Redux门外的小伙伴们，今天de福利就能让你豁然开朗。至于Redux的目的我在这里就不在累赘了，直接上手基本用法。

前端 React 前端进阶训练营 Redux React-Redux

https://static001.geekbang.org/infoq/37/3770615765bf9ffc2dfc8d80fc5fa37e.png?x-oss-process=image/resize,w_416,h_234

1 分钟带你入门 React Context

Leo2020 年 10 月 21 日

前言：如果当你看过React的官方文档，还觉得迷惑，那这边文章就能帮到你。

前端 React useContext Context 前端进阶训练营

https://static001.geekbang.org/infoq/6a/6a323b5b4e8b92712bf806271123a8b9.jpeg?x-oss-process=image/resize,w_416,h_234

实现一个简单的 MobX

局外人2020 年 10 月 14 日

为了方便读者更好的阅读体验，笔者将循序渐进的分多个demo来实现一个可用的 MobX。

前端 js React

https://static001.geekbang.org/infoq/04/043b926c678bb9a67181657e0930a05a.jpeg?x-oss-process=image/resize,w_416,h_234

微前端之如何拆解 React 巨石应用 qiankun

SugarTurboS2020 年 10 月 12 日

团队的项目 A 经历两年需求的洗礼，一些问题也随之暴露出来：项目引用的npm包很多，业务代码也很多，有着向巨石应用发展的趋势。巨石应用的一些典型问题如下：构建效率低下、*dev-server 占用内存大甚至内存泄露*、维护成本急剧增加。

项目管理架构 React 微前端前端性能优化

https://static001.geekbang.org/infoq/15/15fbf4f6d69926e719e07ef0fdd9db95.jpeg?x-oss-process=image/resize,w_416,h_234

一条龙！CI / CD 、打造小团队前端工程化服务

久违2020 年 9 月 3 日

这个是自动化部署 + npm私有库搭建 + API Mock server 等服务的搭建

Vue 前端 jenkins React 前端工程化

https://static001.geekbang.org/infoq/a7/a7cb9ce07ecb3c34a756bafab04d17b2.png?x-oss-process=image/resize,w_416,h_234

React TypeScript 项目基本构建 2

JackWangGeek2020 年 8 月 13 日

React组件中处理可以用CSS单独的文件来定义样式外，还可以直接用类似style这种方式来定义样式，当然这里需要首先安装一下依赖库，此时需要打开命令行，并输入如下命令：

React

https://static001.geekbang.org/infoq/48/489c8d88dfcf3d0fd61895cbef691f62.jpeg?x-oss-process=image/resize,w_416,h_234

带你体验 Vue2 和 Vue3 开发组件有什么区别

三钻2020 年 8 月 12 日

我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。还有一些童鞋已经开始又慌又抓狂了 -- “又要开始学新的写法了 (ノToT )ノ ~┻┻”。

Java Vue 前端 Vue3 React

https://static001.geekbang.org/infoq/e1/e165e3a1003f357d8db991e6b5859458.jpeg?x-oss-process=image/resize,w_416,h_234

记一次 bem 命名规范使用优化方案

前端有的玩2020 年 7 月 22 日

在公司项目中，我们一直class名称遵循bem规范，但是在使用中，也发现了一些不方便的地方，特别是每次要写很长的class名称，太麻烦了，怎么办呢？

Vue npm React bem

https://static001.geekbang.org/infoq/16/16a9c6de9465a4db1432fd858999948c.png?x-oss-process=image/resize,w_416,h_234

15 个很有用的自定义 React Hooks

Verlime2020 年 7 月 21 日

React 提供了自定义 Hooks 的特性，我们可以根据这个特性创建出很多有意思的功能，今天就来分享一些个人认为还不错的 Hooks，共计 15 个。

Java 前端 React

https://static001.geekbang.org/infoq/f6/f6ebc1de94a5cd05c1058660095362f7.png?x-oss-process=image/resize,w_416,h_234

React Hooks 温故而知新

Verlime2020 年 7 月 21 日

React Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其它的 React 特性。

Java 前端 React

https://static001.geekbang.org/infoq/02/021fa7eeeed0bbf029f5464ac2ae72e2.jpeg?x-oss-process=image/resize,w_416,h_234

学会使用 Vue JSX, 一车老干妈都是你的

前端有的玩2020 年 7 月 15 日

今天这篇文章将给大家小编在项目中使用JSX的一些实战经验。其实一般情况下写Vue还是比较推荐template的写法的，但是有时候我们真的需要更灵活的去做一些功能，这时候就需要用到JSX了。

Java Vue 前端技巧 React

1. react 起始 | 2020 年前端再入门系列连载

chaozh2020 年 7 月 14 日

包管理 yarn vs npm，推荐使用npm，可以直接使用npx来执行create-react-app 脚手架，该框架会安装react、react-dom和react-scripts（配置webpack和babel，用来编译打包，可以运行npm run eject来启用自定义配置）

前端开发 React

创作场景

React

推荐作者

推荐标签