冲吧React
这波能反杀
公众号:不知非攻
展开
-
超性感的React Hooks(十一)useCallback、useMemo
在实践开发中,有一种优化手段叫做记忆函数。什么是记忆函数?用一个例子来说明。我们想要计算从1到某个整数的总和。封装一个方法来实现这个目的。function summation(target: number) { let sum = 0; for(let i = 1; i <= target; i++) { sum += i; } return sum;}验...原创 2019-12-02 14:21:46 · 3976 阅读 · 0 评论 -
超性感的React Hooks(十)useRef
import {useRef} from 'react';在函数式组件中,useRef 是一个返回可变引用对象的函数。该对象.current属性的初始值为useRef传入的参数initialVale。返回的对象将在组件整个生命周期中持续存在。const ref = useRef(initialValue);通常情况下,useRef有两种用途,访问DOM节点,或者React元素保持...原创 2019-12-02 14:21:09 · 2770 阅读 · 0 评论 -
超性感的React Hooks(九)useContext实践
如上图所示。我们利用useContext来实现这个小demo。在实现之前,复习一下相关比较重要的知识点。如下图。1如何合理的拆分组件?这是一个需要在实践中,不断去总结,优化才能获得的技能。首先,将一个复杂的页面逻辑进行拆分的目的,一定是为了可读性和可维护性。如果你的组件拆分违背了这两个原则,那么拆分就有问题。本来我想根据我自己的经验,将组件分为基础组件,工具组件,容器组件,页面组...原创 2019-12-02 14:20:16 · 718 阅读 · 0 评论 -
超性感的React Hooks(八)useContext
在context这个高级API出来之前,数据流向只能自上而下,从父组件一层一层的往下传递。如上图左。如果仅仅只支持这样的方式,在实践中会遇到很多麻烦。例如一个数据要传到使用它的组件,中间还要经历3个组件。我们就不得不在这三个中间组件中处理该数据的传递逻辑。但其实对于这三个组件而言,该数据毫无用处。context的出现,就是为了解决这样的痛点。context能够让数据直达需要它的那一个子组件...原创 2019-12-02 14:19:26 · 615 阅读 · 0 评论 -
超性感的React Hooks(七)useReducer
useReducer是React hooks提供的API之一,它和redux的使用几乎一样。因此如果你熟悉redux,那么自然就已经知道如何去使用useReducer了。1我用最简单的递增递减的案例,来和大家分享一下它的用法。最终实现效果如图。首先从React中引入import React, { useReducer } from ‘react’;然后需要定义一个状态值,以表示us...原创 2019-12-02 14:18:38 · 1342 阅读 · 0 评论 -
超性感的React Hooks(六)自定义hooks的思维方式
今天Spenser在公众号里说,今年许多公司都在裁员。市场上供大于求,但是,好多企业还是招不到人。真正的人才,市面上太稀缺了。这句话真的深有体会。我们公司想要招一个Java的高级开发,招了一个多月都没找到满意的。真的痛苦。出现这种局面,两极分化就会日渐严重。就以前端行业来看,厉害的人,会越来越难找,也会越来越值钱。而普通的人,混口饭吃都不容易。还是那句话说得对,外面的世界很精彩,可精彩是属于真...原创 2019-12-02 14:17:47 · 1621 阅读 · 2 评论 -
超性感的React Hooks(五):自定义hooks
1在实践中,我们常常会遇到逻辑相同的功能片段。对于这样的场景,更省力的方式是,将这些功能片段封装成为一个单独函数来使用。例如,比较两个数组是否相等,可以封装一个equal方法,来处理这个通用逻辑。export default function equalArr(a: number[], b: number[]) { if (a.length !== b.length) { ret...原创 2019-12-02 14:16:55 · 2409 阅读 · 1 评论 -
超性感的React Hooks(四):useEffect
1想不想验证一下自己的React底子到底怎么样?或者验证一下自己的学习能力?这里有一段介绍useEffect的文字,如果你能够从中领悟到useEffect的用法,那么恭喜你,你应该大概率是个天赋型选手。那么试试看:在function组件中,每当DOM完成一次渲染,都会有对应的副作用执行,useEffect用于提供自定义的执行内容,它的第一个参数(作为函数传入)就是自定义的执行内容。为了避...原创 2019-12-02 14:15:51 · 1574 阅读 · 0 评论 -
超性感的React Hooks(三):useState
这几天和许多同学聊了使用React Hooks的感受。总体感觉是,学会使用并不算难,但能用好却并不简单。索性拉了一个React Hooks的讨论群,抽空时间在群里纠正大家的使用方式。如果持续关注群消息,能够学到许多正确的使用方式。感兴趣的同学速度进群,如果提示满人,公众号回复React Hooks获取进群方式。后进群的不用担心,每天的讨论的内容,我都会记录在语雀讨论组中,任何时候进群都能...原创 2019-12-02 14:14:52 · 883 阅读 · 2 评论 -
超性感的React Hooks(二)再谈闭包
如果你一天没有真正理解它,你就应该继续学习它。曾经我去找工作面试的时候,我最讨厌别人问我闭包,因为我说不清楚。现在我面试别人了,却又最爱问闭包,因为闭包真的能直接的检验你对JS的理解深度。可能够回答上来的人真的很少。两年以来我面试过估计200多人,其中技术能力最强的是阿里P6的一个胖胖的哥们儿,这里简称PP。PP的JS基础很扎实,对React的理解比较深刻,其他问题上我们聊得很开心。可即使是...原创 2019-12-02 14:12:30 · 3295 阅读 · 3 评论 -
超性感的React Hooks(一):为何她独具魅力
正如标题所示,我准备写一系列文章介绍React Hooks。过去大半年里,我将React Hooks应用到了许多大型项目,其中5个全新重构,其他项目由于时间关系少量使用。这些项目包括React Native基于ant-design-pro重构的中后台应用基于React,专注于小程序开发的Taro应用以create-react-app为基础,自主构建的web应用基于beidou框架...原创 2019-12-02 10:52:52 · 873 阅读 · 0 评论