Taobao FED

标签:React

使用 React Hooks 代替 Redux

使用 React Hooks 代替 Redux 注:此文章立场不表示 Hooks 可以完全代替 Redux。因为 Redux 还有其他适用的场景和功能,只是在大部分场景可以用 Hooks 代替。理性选择即合理。 React Hooks 面世也有很大一段时间了。我相信很多人对于 Hooks 的认知还大概处在: 更 FP「Functional Programming」 编程方式 更简洁易测的组件

前端架构杂思录:议 Function Component 与 Hooks

最近团队里 @大果 分享了 React Hooks,也尝试讨论下 Function Component 与 React Hooks,技术的发展路径总是逐步降低其门槛,简单从轻量级角度我们做一个排序: 1createClass Component > Class Component > Function Component 技术上 Class Component 是可以完全代替 cre

QCon San Francisco 2016 前端参会总结

11 月初有幸参加了在美国旧金山举行的 Qcon 会议,会议之余在小伙伴们的各路关系中拜访了一些美国的科技公司。此行受益颇多,这里谈一下自己的所见、所闻以及自己的感受。 会议内容会议内容覆盖了前端、设计、容器、微服务、devops、JAVA 等等,内容非常的丰富,这里选择几个前端相关的场做下分享。 Webpack: The One Build Step To Rule Them Allwebp

React 组件间通讯

React 组件间通讯说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父子:Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1 兄弟:Child_1 与 Child_2、Child_1_1 与 Child_2、e

React 实践心得:key 属性的原理和用法

我们知道,React 元素可以具有一个特殊的属性 key,这个属性不是给用户自己用的,而是给 React 自己用的。如果我们动态地创建 React 元素,而且 React 元素内包含数量或顺序不确定的子元素时,我们就需要提供 key 这个特殊的属性。 如果你有下面这样的代码: 123456const UserList = props => ( <div> <h3&

React 实践心得:react-redux 之 connect 方法详解

Redux 是「React 全家桶」中极为重要的一员,它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单,除了 React,它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用,就还需要一些额外的工具,其中最重要的莫过于 react-redux 了。 react-redux 提供了两个重要的对象,Provider 和 connect,前

高性能 React 组件

前言组件的重新渲染说到 React 组件,肯定离不开组件的 props 和 state,我们可以在 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态。当 props 和 state 发生变化时,React 会重新渲染整个组件,组件重新渲染的过程可简化如下图: 当组件的 props 或 state 变化,React 将会构建新的 virt

已买到的宝贝前端组件化探索

随着已买到的宝贝组件化全网回归完成,项目开发工作终于告一段落了,接下来便是 Beta ,灰度发布。我也终于有了时间来总结一下整个项目。 同学们普遍对 PC 业务如何进行组件化感兴趣,在此就把我在项目中的思考过程,积累的经验写出来与大家分享。 先来介绍一下已买到的宝贝这个业务: 已买到的宝贝是全网(淘宝/天猫)买家进行订单相关操作的平台(订单相关的操作如:取消订单,确认收货,订单搜索等),承载了全