ssh

## 前言 在Vue中，我们经常需要用watch去观察一个值的变化，通过新旧值的对比去做一些事情。 但是React Hook中好像并没有提供类似的hook来让我们实现相同的事情 不过好在Hook的好处就在于它可以自由组合各种基础Hook从而实现强大的自定义Hook。 本篇文章就带你打造一个简单好用的use-watch hooks。 ## 实现 ### 实现雏形 首先分析一下Vue中watch的功能，就是一个响应式的值发生改变以后，会触发一个回调函数，那么在React中自然而然的就想到了useEffect这个hook，我们先来打造一个基础的代码雏形，把我们想要观察的值作为useEffect的依赖传入。 ```js type Callback = (prev: T | undefined) => void; function useWatch(dep: T, callback: Callback) { useEffect(()...

## 前言 TypeScript可以说是今年的一大流行点，虽然Angular早就开始把TypeScript作为内置支持了，但是真正在中文社区火起来据我观察也就是没多久的事情，尤其是在Vue3官方宣布采用TypeScript开发以后达到了一个顶点。 社区里有很多TypeScript比较基础的分享，但是关于React实战的还是相对少一些，这篇文章就带大家用React从头开始搭建一个TypeScript的todolist，我们的目标是实现类型安全，杜绝开发时可能出现的任何错误！ 本文所使用的所有代码全部整理在了 [ts-react-todo](https://github.com/sl1673495/ts-react-todo) 这个仓库里。 本文默认你对于TypeScript的基础应用没有问题，对于泛型的使用也大概理解，如果对于TS的基础还没有熟悉的话，可以看我在上面github仓库的Readme的文末附上的几篇推荐。 ## 实战 ### 创建应用 首先使用的脚手架是create-react-app，根据 https://www.html.cn/create-react-app/docs/adding-typescript/ 的流程可以很轻松的创建一个开箱即用的typescript-react-app。 创建后的结构大概是这样的： ``` my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.ts App.test.ts index.css index.ts...

大家都用过Vue-CLI创建vue应用，在开发的时候我们修改了vue文件，保存了文件，浏览器上就自动更新出我们写的组件内容，非常的顺滑流畅，大大提高了开发效率。想知道这背后是怎么实现的吗，其实代码并不复杂。 这个功能的实现底层用了[vue-hot-load-api](https://github.com/vuejs/vue-hot-reload-api)这个库，得益于vue的良好设计，热更新的实现总共就一个js文件，200行代码，绰绰有余。 而在这个库里涉及到的技巧又非常适合我们去深入了解vue内部的一些机制，所以赶快来和我一起学习吧。 ## 提要 本文单纯的从`vue-hot-load-api`这个库出发，在浏览器的环境运行Vue的热更新示例，主要测试的组件是普通的vue组件而不是functional等特殊组件，以最简单的流程搞懂热更新的原理。 在源码解析中贴出的代码会省略掉一些不太相关的流程，更便于理解。 ## 示例 学习一个库当然还是先从示例看起，github页面上的示例结合了webpack的一些机制，有点偏离本文的重点，所以我简化了一个例子，先给大家饱饱眼福，使用起来就是这么简单。 ```js import api from 'vue-hot-reload-api' import Vue from 'vue' // 初始化 api.install(Vue, true) // 建立一个vue组件 const appOptions = { render:...

vue在视图更新的时候是异步更新，这个很多人已经知道了，这么做的好处有很多，今天我们就来看看vue是如何调度这个异步更新队列去优化性能的。 src/core/util/next-tick.js ```js /* @flow */ /* globals MessageChannel */ import { noop } from 'shared/util' import { handleError } from './error' import { isIOS, isNative } from './env' const...

上一篇介绍computed的文章讲到了，良好的设计对于功能的实现非常有帮助，computed的核心实现原理是计算watcher，那么watch其实也是基于watcher来实现的，我们还是从initWatch初始化看起。 ### initWatch ```js function initWatch (vm, watch) { for (var key in watch) { // 遍历用户定义的watch属性 var handler = watch[key]; // 如果watch是数组 就循环createWatcher if (Array.isArray(handler)) { for (var i...

Vue源码学习 计算属性computed

1

上一篇讲解（摘抄）了Vue响应式实现的原理，良好的设计为很多看似复杂的功能奠定了基础，使得这些功能的实际实现变得很简单。 **我们先得出个结论，Watcher这个类即可以用做渲染函数的watcher， 也可以用作计算属性的Watcher，这两者在初始化和部分函数的分支都是不同的， watcher的更新核心方法是update，可以说计算属性的update是为了驱动渲染watcher的update，而渲染watcher的update是为了重新调用vm._update(vm._render())方法去更新真正的页面。** 首先来看初始化函数的简化版本 ### initComputed ```js function initComputed (vm: Component, computed: Object) { const watchers = vm._computedWatchers = Object.create(null) for (const key in computed) { const userDef =...

## 前言 Reack Hooks自从16.8发布以来，社区已经有相当多的讨论和应用了，不知道各位在公司里有没有用上这个酷炫的特性~ 今天分享一下利用React Hooks实现一个功能相对完善的todolist。 特点： - 利用自定义hook管理请求 - 利用hooks做代码组织和逻辑分离 ## 界面预览  ## 体验地址 https://codesandbox.io/s/react-hooks-todo-dh3gx?fontsize=14 ## 代码详解 ### 界面 首先我们引入antd作为ui库，节省掉无关的一些逻辑，快速的构建出我们的页面骨架 ```js const TAB_ALL = "all"; const TAB_FINISHED =...

rc-form作为ant-design系列实现表单组件的底层组件， 通用性和强大的功能兼得，这得益于它底层的精妙实现，rc-form是典型的高阶组件（higher-order component） 下面从一个官方的简单示例说起。 ```js import { createForm, formShape } from 'rc-form'; class Form extends React.Component { static propTypes = { form: formShape, }; submit = () => { this.props.form.validateFields((error,...

rc-steps是antd的步骤组件所依赖的底层组件，先看官方给的用法示例。 ```js ``` 简洁明了的父子嵌套组件。 先从父组件的源码看起。 ## Steps.jsx ```js /* eslint react/no-did-mount-set-state: 0 */ import React, { cloneElement, Children, Component } from 'react'; import PropTypes from 'prop-types'; import { findDOMNode }...

[swipe组件预览地址（手机模式可体验）](https://didi.github.io/cube-ui/#/zh-CN/docs/swipe) [作者：黄轶老师](https://github.com/ustbhuangyi) 先吹一波黄老，昨天体验swipe组件的时候感受到了什么叫丝滑，这可以说是东半球移动端最好用的swipe组件了吧。 先来一段文档中的用法的简化版： ```js ``` 在cube-ui的项目的src/components/swipe目录下，我们可以看到swipe组件被分为swipe.vue和swipe-item.vue。 其实swipe就是列表的外层容器组件，负责处理一些全列表的事件。 swipe-item就是列表中循环出来的某一项元素的组件，负责处理手势等细节。 我们先从swipe.vue入手： ### swipe.vue ```js ``` 我们先从template部分入手， 可以看到结构非常简单，就是一个div中给了一个slot子元素，并且slot有个默认值， 如果用户不传slot的话就默认的带transition-group动效循环出一段cube-swipe-item列表，不使用slot的情况下用户可以传入 ```js swipeData: [{ item: { text: '测试1', value: 1 }, btns: [ {...