react | 易学教程

react 进阶必学 hook （四）：自定义hook

阅读更多关于 react 进阶必学 hook （四）：自定义hook

系列文章传送门： react 进阶必学 hook （一）：useState 来一碗大碗宽面 react 进阶必学 hook （二）：useEffect 专治不吃宽面 react 进阶必学 hook （三）：useContext 面馆分店开张了什么是自定义hook 官网原话如下: 自定义 Hook 是一个函数，其名称以 “ use ” 开头，函数内部可以调用其他的 Hook，自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性自定义hook有一下特性或是约定：自定义hook中可以调用其他hook 必须以use开头，就像组件必须以大写字母开头一样自定义hook中管理state也是使用useState、useEffect，因为useState在调用的时候就是完全独立的自定义hook解决了什么问题想必开发人员对utils文件夹都很熟悉，在开发的时候我们会把经常使用的一些方法函数放到utils文件夹中，因为这些逻辑方法的复用率很高；同样自定义hook也是解决类似的问题。 React的组件思想其实就是一种将代码复用的做法，然而在编写组件的过程中又有一些逻辑是可以复用的，但是这些逻辑不需要在ui上展示或是有些组件不能在更细的拆分，因此我们可以将这些逻辑抽象成自定义hook，和组件的抽象不是一个纬度，就像抽象工厂模式；这种功能的抽象，严格控制输入输出

React 频繁点击

阅读更多关于 React 频繁点击

// isClick默认是true const { isClick} = this .state; if (isClick) { this .setState({ isClick: false }); // 处理事件 setTimeout( function () { that.setState({ isClick: true }) }, 1000); } 来源： oschina 链接： https://my.oschina.net/u/3407708/blog/4298512

敬请指正-我进行单元测试的分享

阅读更多关于敬请指正-我进行单元测试的分享

单元测试的好处是啥? 重构、重构、重构，重要的事情说三遍 TDD（测试驱动开发）的具体实现就是通过红灯->绿灯->重构不断重复，一步一步去健壮我们的代码，保证今后重构代码的时候测试的准确，可以在重构中准确的定位到问题。同时也为以后的开发提供支持，在测试的基础上我们可以重构结构和业务功能。单元测试是最好的注释测试会提示你哪些步骤是可以通过、如何使用的最好文档。更详细的规范了测试目标的边界值与非法值。定位bug，减少bug 单元测试可以通过不同的条件来发现问题在哪里，在一些弱类型的语言中也避免了一些类型检查的低级错误，当然这个现在我们都用TypeScript做到了。被迫的规范组织结构可能平时我们会把一个方法写的很复杂、一个类写的很大，没有想过如何去组织结构，但如果你想到你即将的测试要如何写的时候，那可能你在开发前必须要想想哪些部分可以提出来了。这样会慢慢养成很好的思维。好了,不多BB,看看怎么用吧!!! 我用的是jest测试哦!!! 1.看一下我的jest.config.js中 testMatch ,告诉我需要在lib文件夹中创建个目录 __tests__ , __tests__ 的目录里面 xxxx.unit.(js|jsx|ts|tsx) 这样的文件就是测试文件加入我们642830685，领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

react 实现自定义的hook

阅读更多关于 react 实现自定义的hook

使用hook封装count计数器 import React, { useState, useEffect } from "react"; const useCount = (init = 0, dx = 1) => { const [count, setCount] = useState(init); const dec = () => setCount(count - dx); const inc = () => setCount(count + dx); const reset = () => setCount(init); return [count, dec, inc, reset]; }; export default () => { const [c1, dec1, inc1, reset1] = useCount(18, 1); const [c2, dec2, inc2, reset2] = useCount(0, 2); return ( <div> <div> c1:{c1} <button onClick={dec1}>dec1 </button> <button onClick={inc1}>inc1 </button> <button onClick={reset1}>reset1 </button> </div> <div> c2:{c2}

前端三大主流框架 React、Vue、Angular的对比

阅读更多关于前端三大主流框架 React、Vue、Angular的对比

一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：必须使用它的模块机制必须使用它的依赖注入必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React，原因就在这里，我反对的是整个业务应用的函数式倾向，很多人都是看到有很多好用的React组件，就会倾向于把它引入，然后

React、Vue、Angular对比 ---- 介绍及优缺点

阅读更多关于 React、Vue、Angular对比 ---- 介绍及优缺点

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。它有以下的特性： 1.声明式设计：React采用声明范式，可以轻松描述应用。 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活：React可以与已知的库或框架很好地配合。优点： 1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。 6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点：

React 第一个实例

阅读更多关于 React 第一个实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html> 来源： oschina 链接： https://my.oschina.net/u/4270506/blog/4403201

巧用 display: contents 增强页面语义

阅读更多关于巧用 display: contents 增强页面语义

display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支持。本文将深入一下这个有意思的属性值。基本用法根据 W3C 对 display: contents 的定义。 The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element

Medux+React+Antd4+Hooks+Typescript开箱即用通用后台(上)

阅读更多关于 Medux+React+Antd4+Hooks+Typescript开箱即用通用后台(上)

项目地址： medux-react-admin 点击在线预览本项目主要用来展示如何将 @medux 应用于 web 后台管理系统，你可能看不到丰富的后台 UI 控件及界面，因为这不是重点，网上这样的轮子已经很多了，本项目想着重表达的是：通用化解题思路在定制化和标准化之间妥协通常追求极致用户体验的 UI/UE设计师可能会让前端开发者定制各种 UI，你可能会抱怨说：这样的设计将会打乱你的模块化思想，或者让问题变得复杂化，或者失去代码重用性...然而在他们看来或许你只是想偷懒而已...无语... 用户体验当然重要，但程序的健壮性与可维护性同样重要，离开了它们，再好的用户体验都只是空中花园。别忘了人类工业革命的大爆发就是从大量制造标准件开始的，劳斯莱斯永远成不了消费的主流。所以，我们需要在定制化和标准化之间做个妥协权衡，既保持很好的用户体验，又能够面向更多的通用业务场景。一个思路是将绝大多数场景与极少数场景分而治之，如果某个 UI 方案能切合 90%的业务场景，何必为了兼容少数场景而扭曲变形呢？说了这么多，只是想说明本项目的立意是为了提供一套适合大多业务场景的通用后台。通用的工程结构本项目之开发目录主要结构如下： src ├── assets // 存放公共静态资源 ├── entity // 存放业务实体类型定义 ├── common // 存放公共代码 ├──

react hook useEffect

阅读更多关于 react hook useEffect

useEffect 在重新渲染之后执行数据变化会触发重新渲染 import React, { useState, useEffect } from "react"; export default () => { const [str, setStr] = useState("init"); useEffect(() => { console.log("====1",str); setStr(+new Date()); // 会造成死循环, 无限刷新 console.log("====2",str); }, [] // 强行只执行一次 ); return <div>{str}</div>; }; 出现死循环的原因: 第一次载入页面str为init, 渲染完成执行effect, 设置str后由于数据不一致, 页面重新渲染, 渲染完成后又重新赋值, 循环往复设置依赖数组为空数组, 保证只执行一次, 页面中数据为时间戳, 但是set函数并非立即起效, 而是将更新推入更新队列中, 所以两次打出的都是初始值依赖数组和返回的卸载函数依赖数组中的数据变化才会执行effect, 并且该effect返回的函数, 会在组件卸载的时候调用 import React, { useState, useEffect } from "react"; export default () => { const

订阅 react