实现 React Hooks

UI 开发有两个问题:

  1. 展示复用
  2. 逻辑复用

展示复用目前基本使用组件化来解决,逻辑复用一直以来都没有特别好的解决方案。React 从一开始的 mixin ,到 高阶组件 以及 Render Props ,都是在试图解决这个问题,但是都引入了一些别的问题。

Mixins

  1. 命名空间冲突
  2. 数据来源不清晰

Higher-order Components

  1. props 属性来源不清晰
  2. props 上命名冲突
  3. 额外的组件渲染带来性能问题

Render Props(Vue 中的 Renderless Components)

  1. 解决了 命名空间冲突、数据来源不清晰的问题,仍然会带来额外组件实例的性能消耗

Hooks

在前段时间 Hooks 发布后,我认为 React 找到了【有状态】组件【函数式】【复用逻辑】的解决方案。

先说有状态:一般来说,无状态组件直接使用函数组件就行,省去了实例化的样板代码和性能消耗。不涉及到 state 的存取,可以直接写个 helper 函数处理一下,方便又快捷。

再说函数式:class 组件是面向对象的,每一次声明、声明周期都逃不开 this,而 hooks 更加函数式,调用一个函数,传入的是初始值,返回修改值,没有副作用。

最后说复用逻辑:DRY,一般来说,相同的代码不写第二次,在 class 组件中,通过生命周期方法对 state 修改,然后 rerender,在使用了 hooks 以后,我们可以通过 hooks 触发 render,render 调用 hooks 时,根据传入值的比较,来决定是否触发 render,然后把 hooks 返回的值填充到页面上。

实现

hooks 给人最直接的印象就是可以在 function 组件中使用 state 了。但它也有着不同于 class 组件的心智模型,从生命周期的思维跳到 update circle,刚开始 useEffect 总会写一些无限循环。接下来我们先来写一个简易版的 useState,来模仿 React。

let state;
function useState(init) {
function setState(newState) {
if (typeof newState === "function") {
// 支持旧值传入更新
state = newState(state);
} else {
state = newState;
}
// setState 后调用组件 render
// render();
}
if (!state) {
state = init;
}
return [state, setState];
}

上面就是一个 useState 了,接下来继续写 useEffect.

let _deps;
function useEffect(callback, deps) {
if (
deps === undefined || // 就是不传 deps,就是每次都执行副作用
(deps !== undefined && _deps === undefined) || // 就是初始化,要执行一次副作用
!deps.every((dep, i) => dep === _deps[i]) // 如果不是每一项都相等,就执行
) {
callback();
}
}

这就是 useEffect 基本实现了,当然还有一个问题,callback 的 return 函数问题。

let _deps;
function useEffect(callback, deps) {
if (
deps === undefined || // 就是不传 deps,就是每次都执行副作用
(deps !== undefined && _deps === undefined) || // 就是初始化,要执行一次副作用
!deps.every((dep, i) => dep === _deps[i]) // 如果不是每一项都相等,就执行
) {
// 如果有 cleanUp 就执行清理
if (typeof _deps._cleanUp === "function") {
_deps._cleanUp();
}
_deps._cleanUp = callback();
}
}

接下来,还有个重要问题,hooks 的顺序问题,其实就是把 state 和 deps 存到数组里。

let _arr = [];
let cursor = 0;
function useState(init) {
const current = cursor;
function setState(newState) {
if (typeof newState === "function") {
// 支持旧值传入更新
_arr[current] = newState(_arr[current]);
} else {
_arr[current] = newState;
}
// setState 后调用组件 render
render();
}
if (!_arr[current]) {
_arr[current] = init;
}
cursor++;
return [_arr[current], setState];
}
function useEffect(callback, deps) {
const effect = _arr[cursor] || {};
const { _deps, _cleanUp } = effect;
if (
deps === undefined || // 就是不传 deps,就是每次都执行副作用
(deps !== undefined && _deps === undefined) || // 就是初始化,要执行一次副作用
!deps.every((dep, i) => dep === _deps[i]) // 如果不是每一项都相等,就执行
) {
// 如果有 cleanUp 就执行清理
if (typeof _cleanUp === "function") {
_cleanUp();
}
effect._cleanUp = callback();
effect._deps = deps;
_arr[cursor] = effect;
}
cursor++;
}

全部代码在 CodeSandBox

完。

实现 React Hooks的更多相关文章

  1. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  2. 初探React Hooks & SSR改造

    Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...

  3. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  4. 理解 React Hooks

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...

  5. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  6. 关于React Hooks,你不得不知的事

    React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...

  7. react hooks 全面转换攻略(三) 全局存储解决方案

    针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...

  8. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  9. 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...

  10. React Hooks 深入系列 —— 设计模式

    本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...

随机推荐

  1. Linux用户管理命令useradd、passwd、who详解

    创建用户命令useradd 命令useradd,所在路径为: 可以看到命令useradd的路径为:/usr/sbin/useradd,因此它的执行权限是root 命令的功能是创建一个新用户,例如:us ...

  2. 从windows到Mac的那些坑

    今年入职一家新公司 公司办公统一使用Mac pro,所有国产软件不允许使用,只允许装国外的.开源的软件,,,,(这对一个从来没用过Mac的人来说,可真是头疼了一阵子) 经过几天的摸索,作一个简单的小总 ...

  3. 数组 & 链表

    数组 是一种线性表数据结构,它用一组连续的内存空间,来存储一组具有相同类型的数据. 使用了连续的内存空间和相同类型的数据,使得它可以“随机访问”,但同时也让数组的删除,插入等操作变得非常低效, 为了保 ...

  4. SpringCloud多数据源实现

    1.枚举多数据源-定义一一对应变量 /** * * 列出所有的数据源key(常用数据库名称来命名) * 注意: * 1)这里数据源与数据库是一对一的 * 2)DatabaseType中的变量名称就是数 ...

  5. Zookeeper实现服务注册/发现

    what that? Zookeeper在分布式开发中使用频繁,但许多框架都对其进行了封装,初学者可能无法较好的理解其工作原理,该文章演示了使用Zookeeper实现服务注册,服务发现的简单demo, ...

  6. Crypto++ AES 加密解密流程

    // aesdemo.cpp : 定义控制台应用程序的入口点. // #include <stdio.h>#include <tchar.h>#include <iost ...

  7. 君荣 TS--8200 消费机显示说明

     Err 001——不在消费时段内Err 002——非本系统卡Err 003——余额不足Err 004——级别未开放Err 005——卡已挂失Err 006——有效期未生效Err 007——已过有效期 ...

  8. flink实时数仓从入门到实战

    第一章.flink实时数仓入门 一.依赖 <!--Licensed to the Apache Software Foundation (ASF) under oneor more contri ...

  9. view中显示部分区域

    在android中有时候要求只显示view的部分区域,这个时候就需要对当前的view进行剪裁的操作.在android中剪裁当前的view的有两种方法:一种是直接截取view,第二种是通过Outline ...

  10. cc40a_demo_Cpp_智能指针c++_txwtech

    //40_21days_Cpp_智能指针c++_cc40a_demo.cpp_txwtech //智能指针.auto_ptr类//*常规指针-容易产生内存泄漏,内存被占满,程序就死机,或者系统死机// ...