在使用 React 开发的这段时间里，我最大的感受就是 “这是 React 最好的时代，也是最坏的时代” ！「好」在于 hooks 开启了不一样的开发模式，在思考方式上要求更关注于数据之间的依赖关系，同时书写方式更加简便，总体上提升了开发效率；「坏」在于项目中经常是类组件与函数…

个人认为 React 本身的学习曲线并不高，但是学习到 Redux 时，突然发现多出了好多概念。例如： Action 、 ActionCreator 、Dispatch 、Reducer 、 combineReducers。 当你学习完它们之后，突然又发现一些新东西，如 rea…

本文帮助大家从0了解什么是immutable，以及它有什么作用，是在什么背景下应运而生的。 最重要的是它是我们日常开发中常用的技术之一，与React配合使用的immutable能给我们开发者带来多大的便利，本文会依次讲到。 显然上面例子中的原数组list，被我们不轻易间串改了，…

1. 背景 云音乐 B 端业务场景非常多，B 端业务相对于 C 端业务产品生命周期更长而且更注重场景的的梳理。很多时候开发 B 端业务都是拷贝之前的代码，这样增加了很多重复而且枯燥的工作量。 中后台系统其实可以拆分成几个比较通用的场景：表单、表格、图表，其中表单涉及到联动、校验…

React Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其它的 React 特性。 这段代码实现了一个简单的计数器功能，点击按钮使 count 增加，同时使页面标题的显示与 count 的变化同步。这里引入了 …

React 在 16.3 版本里面引入了新的 Context API —— 说它是新的是因为老版本的 context API 是一个幕后的试验性功能，大多数人要么不知道，要么就是依据官方文档所说，尽量避免使用它。 但是，现在 Context API 摇身一变成为了 React …

乍一看，让我们手写出这个逻辑应该是非常复杂的，先看看本文最后要实现的效果吧，和这个案例是非常类似的。 图片素材依然引用自知乎问题《有个漂亮女朋友是种怎样的体验？》，侵删。 拿到了这个需求，第一直觉是怎么做？假设第一行第一个图片移动到了第二行第三列，是不是要计算出第一行的高度，再…

防抖（debounce）和节流（throttle）是前端经常用到的工具函数。 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（…

同时，也为了让 FunctionalComponent 也拥有 ClassComponent 的一些特性。 不能将 hooks 放在循环、条件语句或者嵌套方法内。react 是根据 hooks 出现顺序来记录对应状态的。 只在 function 组件和自定义 hooks 中使用…