代码搬运工_田先森-CSDN博客

原创 React hooks异步操作踩坑指南

useEffect 和异步任务搭配使用的时候会遇到的一些坑总结。三个常见的问题： 1、如何在组件加载的时候发起异步任务 2、如何在组件交互的时候发起异步任务 3、其他陷阱一、react hooks发异步请求1、使用useEffect发起异步任务，第二个参数使用空数组可以实现组件加载的时候执行方法体，返回值函数在组件卸载时执行一次，用来清理一些东西。2、使用 AbortController 或者某些库自带的信号量 ( axios.CancelToken) 来控制中止请求，更加优雅地退出3

2021-02-28 12:19:00 1262

原创 antd分页器的bug以及解决方案

一、背景最近公司安排我去审查公司组件库，我们公司的组件库是基于antd 3.x做的二次封装。我在审查同事开发的分页器的时候，发现了几个bug。经过排查后发现，这个bug是因为antd引用第三方组件rc-pagination就有的bug，因此，我在github还给antd提了两个issue，一个被确认标记为了bug，另一个被关闭了，其实本质这两个issue的是一样的bug。值得一提的，在antd4.x和3.x都存在这个bug。二、bug复现这个bug主要是分页器快速跳页与正常直接选取页码跳转之间的

2021-02-28 12:17:48 3810 5

原创 React Hooks与setInterval的踩坑指南

一、需求我们希望有一个每一秒自动+1的定时器function Counter() { let [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); return <h1&gt

2021-02-24 10:32:48 986

原创九、深入学习ref、forward和useRef、useImperativeHandle

要学习useRef和useImperativeHandle之前，我们得先学习和回顾一下再class组件中的refs。一、什么是Refs？官网是这么说的： Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在react数据流中，props是父子组件交流的唯一方式。如果要修改一个子组件的状态，那么就需要使用新的props去重新渲染。但是，在某些情况下，我们需要在props数据流之外，强制去修改子组件。被修改的子组件可能是一个React组件的实例

2021-02-20 10:57:12 1403

原创八、useMemo和useCallback学习

一、useCallback和useMemo是什么？useCallback和useMemo是十个hook中唯二的两个不做其他操作，只做性能优化的两个hook。二、这两个hook是为了解决什么问题？function组件和class组件性能优化其实要优化的点是类似的。class组件性能优化的点：调用this.setState，就会触发组件的重新渲染，无论前后state是否相同父组件更新，子组件也会自动更新在class组件中，我们可以使用immutable去创建数据，用继承pureCompo

2021-02-19 12:00:18 325

原创七、学习useReducer

一、什么是useReducer？ useReducer是react hooks中提供的一个高级hooks，即便没有这些高级hooks，只用useState、useEffect和useContext，也能完成需求。但是这些高级的hooks可以让我们的代码具有更好的可读性、可维护性、可预测性。二、useReducer的出现是为了解决什么问题？要理解这个问题，我们得先知道reducer是什么东西。reducer是redux中一个概念，以下就是redux更新数据的一个流程。[外链图片转存失败,源站可能有防

2021-02-18 23:07:00 1478

原创六、useContext深入学习

一、介绍useContext是React hooks三个最基础的hook函数之一。const value = useContext(MyContext);useContext接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。当组件上层最近的 <MyContext.Provider&

2021-02-17 23:20:15 1649

原创学习hooks的一些问题

1、Hook 会替代 render props 和高阶组件(HOC)吗？通常，render props 和高阶组件只渲染一个子节点。我们认为让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地，（例如，一个虚拟滚动条组件或许会有一个 renderItem 属性，或是一个可见的容器组件或许会有它自己的 DOM 结构）。但在大部分场景下，Hook 足够了，并且能够帮助减少嵌套。2、Hook 能否覆盖 class 的所有使用场景？我们给 Hook 设定的目标是尽早覆盖 class 的所有使用场景

2021-02-02 16:32:48 943

原创函数式组件VS类组件(二者之间的根本区别)

参考文章：函数式组件与类组件有何不同文章在一开始就声明了：这两种写法没有好坏之分，性能差距也几乎可以忽略，而且 React 会长期支持这两种写法。至于代码的性能问题，这主要取决于代码的作用，而不是选择函数式组件和类组件React的函数式组件和类组件之间是否有任何根本上的区别？当然有 —— 在心智模型上。函数式组件捕获了渲染所用的值。（Function components capture the rendered values.）现在有这么一段代码function ProfilePage(

2021-02-02 16:29:48 1884

原创函数组件和类组件本质上有什么不同？

参考文章：函数式组件与类组件有何不同文章在一开始就声明了：这两种写法没有好坏之分，性能差距也几乎可以忽略，而且 React 会长期支持这两种写法。至于代码的性能问题，这主要取决于代码的作用，而不是选择函数式组件和类组件React的函数式组件和类组件之间是否有任何根本上的区别？当然有 —— 在心智模型上。函数式组件捕获了渲染所用的值。（Function components capture the rendered values.）现在有这么一段代码function ProfilePage(

2021-01-26 09:40:37 768 3

原创五、继续深入学习useEffect

参考文章：黄子毅的精读useEffect指南useEffect 完整指南一、问题三大基础hook中，最难理解，也最难用好、在使用过程中出问题最多的是useEffect这个hook。我们在使用useEffect的时候，常常会将useEffect去和class组件中的生命周期函数去做对比。一开始，这种想法会让我们学习useEffect入门很快，好像useEffect就是componentDidMount和componentDidUpdate,componentWillMount三个class生命周期

2021-01-25 17:17:31 610

原创四、useEffect和useLayoutEffect深入学习超大章

一、介绍useEffect是hooks中又一个重要的函数。Effect hooks允许你在组件内部中执行副作用操作。副作用包括：数据获取设置订阅手动更改DOM等等useEffect就是为了处理这些副作用而被创造出来的函数，它相当于class中componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。二、基本使用useEffect(()=>{},[])useEffect 有两个参数。第一个参数是Eff

2021-01-25 17:15:53 1005

原创三、useState深入学习

1、基本使用：const [state,setState]=useState(initValue);useState函数接收一个初始化参数initialState,其返回值用数组解构出两个参数:state和setState。在初始化渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。在后续的重新渲染中，useState 返回的第一个值将始终是更新

2021-01-25 17:13:56 3762

原创二、hooks深入学习

1、Hooks深入React Hooks 带来的好处不仅是 “更新粒度更细，代码更清晰，没有嵌套”，还有如下三个特性：多个状态不会产生嵌套，写法还是平铺的（renderProps 可以通过 compose 解决，但使用略为繁琐，而且因为强制封装一个新对象而增加了实例的数量）。Hooks 可以引用其他 Hooks。更容易将组件的 UI 与状态分离。第一点很容易理解，因为，多个状态可使用多个useState就可以，也可以结合起来为一个state，具体看useState章节。重点说明第二点和第三点

2021-01-25 17:10:35 490

原创一、Hooks入门介绍

1、什么是Hooks?React Hooks是16.8之后新增一个React特性，它可以让你在函数组件中使用state等其它class组件的特性。2、为什么要有Hooks?Class组件：学习成本高业务逻辑分散逻辑复用困难Hooks：学习成本低擅长逻辑复用会产生很多闭包问题为什么说Class学习成本高，而hooks学习成本低呢？第一、生命周期，Class组件绕不开的一点就是生命周期的问题。React15、React16.3、React16.4到React17生命周期有

2021-01-25 17:06:37 1294 1

NinthMonee的博客