掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
上一章,我们学习了 useCallback 来进行性能优化,关于性能优化还有另一个 hook api,那就是 useMemo,下面我们一起通过一个例子来看看。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
在我们开始深入学习 useCallback 前,先回顾一下性能优化相关的内容,这将有助于我们理解什么是 useCallback,为什么使用它,以及怎么使用它。
依然先从一个组件多次被复用的代码场景看起。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
截止目前我们已经学习了3个hook api,useState
, useEffect
, useContext
。接下来我们学习下一个 hook api,useReducer
。首先我们将讲讲什么是 reducer,以及为什么使用 reducer。研究一下 JavaScript 中的 reducer 是什么,这将有助于理解 react hook 中的 useReducer
。好,现在开始吧。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
今天我们讲讲 Context 对象和 useContext 的使用方法。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
今天我们讲讲 useEffect 的使用方法。
本系列将讲述 React Hooks 的使用方法,从 useState 开始,将包含如下内容:
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
前提,需要会使用 React Class 的写法,会使用 setState()
和 props。
下面从第一个例子开始吧。
前端开发中,如果遇到复杂的交互逻辑,数据结构的知识将帮助你理清思路,抽象逻辑,完成稳定可靠的逻辑代码。
本文就讲讲我在开发弹窗时加入的队列数据结构,也许有人疑问弹窗不是很简单吗,还需要引入队列?其实在复杂交互中,特别是互动类的界面中,很容易就会有超过 10 个弹窗对话框,万一同时被触发时,逻辑就会混乱,我们希望一个接一个的方式弹出,这里就需要队列了。
不知道大家是怎样安排自己的日常计划的,我习惯是建立一个仓库,按照年/周记录在 markdown 里,平时这个仓库也写点简单的 demo,目录类似如下:
week
├── 2016
├── 2017
├── 2018
│ ├── 20180102.md
│ ├── 20180108.md
│ ├── 20180115.md
│ ├── 20180122.md
│ ├── 20180126.md
│ ├── ...
│ ├── ...
│ ├── ...
│ ├── 20181007.md
│ ├── pixi.md
│ ├── schedule.md
│ ├── temp.css
│ ├── temp.html
│ ├── temp.js
│ ├── temp.json
│ └── temp.md
├── package.json
└── yarn.lock
lottie 是一个可以轻易的给各种 native app 添加高质量动画的类库。可以在 iOS、Android 和 React Native 实时渲染 After Effects 动画,就像使用静态图片一样容易。上图即为 lottie 的 logo。
简单的说,lottie 动画制作的流程是,通过 Bodymovin 扩展将 AE 动画导出为 json 数据,然后再将这个 json 渲染在客户端或者 web 端。如下图:
与其他开发人员不同的是,前端开发都是在端上游走舞者,直接与用户交流沟通,这就需要前端开发具有更敏锐的交互体验思考,或者能更精准地理解设计师们意图,将最佳的用户体验带给用户。优质的交互体验对于用户来说学习成本应该是极低的,都是非常自然的操作,却可以让用户感到畅快愉悦,甚至惊喜。本文将通过一个看似简单的 poplayer 来分析我在这其中通过思考做的体验优化,获得类似 native 的体验感。