![](https://img-blog.csdnimg.cn/20210117164542364.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 91
全面学习React
代码搬运工_田先森
我不生产代码,我只是代码的搬运工
展开
-
React hooks异步操作踩坑指南
useEffect 和异步任务搭配使用的时候会遇到的一些坑总结。三个常见的问题: 1、如何在组件加载的时候发起异步任务 2、如何在组件交互的时候发起异步任务 3、其他陷阱一、react hooks发异步请求1、使用useEffect发起异步任务,第二个参数使用空数组可以实现组件加载的时候执行方法体,返回值函数在组件卸载时执行一次,用来清理一些东西。2、使用 AbortController 或者某些库自带的信号量 ( axios.CancelToken) 来控制中止请求,更加优雅地退出3原创 2021-02-28 12:19:00 · 1301 阅读 · 0 评论 -
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 · 3927 阅读 · 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>原创 2021-02-24 10:32:48 · 1061 阅读 · 0 评论 -
九、深入学习ref、forward和useRef、useImperativeHandle
要学习useRef和useImperativeHandle之前,我们得先学习和回顾一下再class组件中的refs。一、什么是Refs?官网是这么说的: Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在react数据流中,props是父子组件交流的唯一方式。如果要修改一个子组件的状态,那么就需要使用新的props去重新渲染。但是,在某些情况下,我们需要在props数据流之外,强制去修改子组件。被修改的子组件可能是一个React组件的实例原创 2021-02-20 10:57:12 · 1459 阅读 · 0 评论 -
八、useMemo和useCallback学习
一、useCallback和useMemo是什么?useCallback和useMemo是十个hook中唯二的两个不做其他操作,只做性能优化的两个hook。二、这两个hook是为了解决什么问题?function组件和class组件性能优化其实要优化的点是类似的。class组件性能优化的点:调用this.setState,就会触发组件的重新渲染,无论前后state是否相同父组件更新,子组件也会自动更新 在class组件中,我们可以使用immutable去创建数据,用继承pureCompo原创 2021-02-19 12:00:18 · 335 阅读 · 0 评论 -
七、学习useReducer
一、什么是useReducer? useReducer是react hooks中提供的一个高级hooks,即便没有这些高级hooks,只用useState、useEffect和useContext,也能完成需求。但是这些高级的hooks可以让我们的代码具有更好的可读性、可维护性、可预测性。二、useReducer的出现是为了解决什么问题?要理解这个问题,我们得先知道reducer是什么东西。reducer是redux中一个概念,以下就是redux更新数据的一个流程。[外链图片转存失败,源站可能有防原创 2021-02-18 23:07:00 · 1560 阅读 · 0 评论 -
六、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 · 1736 阅读 · 0 评论 -
学习hooks的一些问题
1、Hook 会替代 render props 和高阶组件(HOC)吗?通常,render props 和高阶组件只渲染一个子节点。我们认为让 Hook 来服务这个使用场景更加简单。这两种模式仍有用武之地,(例如,一个虚拟滚动条组件或许会有一个 renderItem 属性,或是一个可见的容器组件或许会有它自己的 DOM 结构)。但在大部分场景下,Hook 足够了,并且能够帮助减少嵌套。2、Hook 能否覆盖 class 的所有使用场景?我们给 Hook 设定的目标是尽早覆盖 class 的所有使用场景原创 2021-02-02 16:32:48 · 950 阅读 · 0 评论 -
函数式组件VS类组件(二者之间的根本区别)
参考文章:函数式组件与类组件有何不同文章在一开始就声明了:这两种写法没有好坏之分,性能差距也几乎可以忽略,而且 React 会长期支持这两种写法。至于代码的性能问题,这主要取决于代码的作用,而不是选择函数式组件和类组件React的函数式组件和类组件之间是否有任何根本上的区别?当然有 —— 在心智模型上。函数式组件捕获了渲染所用的值。(Function components capture the rendered values.)现在有这么一段代码function ProfilePage(原创 2021-02-02 16:29:48 · 1915 阅读 · 0 评论 -
函数组件和类组件本质上有什么不同?
参考文章:函数式组件与类组件有何不同文章在一开始就声明了:这两种写法没有好坏之分,性能差距也几乎可以忽略,而且 React 会长期支持这两种写法。至于代码的性能问题,这主要取决于代码的作用,而不是选择函数式组件和类组件React的函数式组件和类组件之间是否有任何根本上的区别?当然有 —— 在心智模型上。函数式组件捕获了渲染所用的值。(Function components capture the rendered values.)现在有这么一段代码function ProfilePage(原创 2021-01-26 09:40:37 · 785 阅读 · 3 评论 -
五、继续深入学习useEffect
参考文章:黄子毅的精读useEffect指南useEffect 完整指南一、问题 三大基础hook中,最难理解,也最难用好、在使用过程中出问题最多的是useEffect这个hook。我们在使用useEffect的时候,常常会将useEffect去和class组件中的生命周期函数去做对比。一开始,这种想法会让我们学习useEffect入门很快,好像useEffect就是componentDidMount和componentDidUpdate,componentWillMount三个class生命周期原创 2021-01-25 17:17:31 · 624 阅读 · 0 评论 -
四、useEffect和useLayoutEffect深入学习超大章
一、介绍useEffect是hooks中又一个重要的函数。Effect hooks允许你在组件内部中执行副作用操作。副作用包括:数据获取设置订阅手动更改DOM等等useEffect就是为了处理这些副作用而被创造出来的函数,它相当于class中componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。二、基本使用useEffect(()=>{},[])useEffect 有两个参数。第一个参数是Eff原创 2021-01-25 17:15:53 · 1036 阅读 · 0 评论 -
三、useState深入学习
1、基本使用:const [state,setState]=useState(initValue);useState函数接收一个初始化参数initialState,其返回值用数组解构出两个参数:state和setState。在初始化渲染期间,返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。在后续的重新渲染中,useState 返回的第一个值将始终是更新原创 2021-01-25 17:13:56 · 3858 阅读 · 0 评论 -
二、hooks深入学习
1、Hooks深入React Hooks 带来的好处不仅是 “更新粒度更细,代码更清晰,没有嵌套”,还有如下三个特性:多个状态不会产生嵌套,写法还是平铺的(renderProps 可以通过 compose 解决,但使用略为繁琐,而且因为强制封装一个新对象而增加了实例的数量)。Hooks 可以引用其他 Hooks。更容易将组件的 UI 与状态分离。第一点很容易理解,因为,多个状态可使用多个useState就可以,也可以结合起来为一个state,具体看useState章节。重点说明第二点和第三点原创 2021-01-25 17:10:35 · 507 阅读 · 0 评论 -
一、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 · 1316 阅读 · 1 评论