react
前端分享会
这个作者很懒,什么都没留下…
展开
-
Hooks API你了解多少
useState1、定义:useState是用来代替class Component里的state2、useState的性质useState的初始值只在第一次有效,这要特别注意不然容易采坑,下面看个例子:import React, { useState,memo } from 'react'const Child =memo(({data})=>{ const [name,setName]=useState(data); return( <div> <d.原创 2020-12-27 18:43:39 · 156 阅读 · 0 评论 -
hooks和类组件的区别
为什么我么要使用hooks呢,这一点很多人可能觉得没必要去探究,觉得官方初的东西只要好用就行,对于这一点我觉得最重要的还是要去学习大佬们为什么去设计hooks,解决了什么问题,设计的思路是什么?React团队在设计层面的思路能够在一定程度上代表着当前业界在框架设计领域上的最佳实践。函数组件的写法更轻量、灵活在函数组件中我们不需要去继承一个class对象,不需要去记忆那些生命周期,不需要把数据定义在state中。函数作为js中的一等公民,可以让我们更加高效更加灵活的去组织代码。类组件的自身缺陷原创 2020-12-27 18:42:35 · 3097 阅读 · 0 评论 -
理解React hook useCallback作用
为什么需要使用useCallback呢??,我们先来看看官网给出的解释这里我们看到的作用就是减少子组件没必要的渲染,具体怎么去理解我们等下看例子,我在官网的基础上再加上自己的理解吧,useCallback的目的是在与缓存了每次渲染时inline callback的实例,这样方便配合子组件的shouldComponentUpdate或者React.memo,去减少没必要的渲染,这里要提醒下React.memo和React.callback要配合使用,不然不仅不能提升性能还有可能让性能下降场景展示在cl原创 2020-10-11 13:31:00 · 5566 阅读 · 8 评论 -
进阶前端路由hash和history
前端路由&hash模式与history模式首先我们先来说说路由的进化最开始路由就是简单的一个URL,在浏览器输入URL地址向服务器发送请求,服务器会根据这个地址将对应的HTML文件返回给浏览器进行渲染,如果这个页面还用到了外部的js和css资源文件,浏览器将会再发送一次请求,服务器才会将对应的资源返回给浏览器,这样的话我们可以简单的模拟一下,当用户首次访问网站时,输入地址向服务器发送请求,服务器返回对应的html文件让浏览器进行渲染,当用户跳转到第二个页面时,浏览器又会发送请求,让服务器返回原创 2020-10-06 11:28:53 · 558 阅读 · 1 评论 -
this.props.history填坑
项目场景:this.props.history填坑问题描述:今天在写路由跳转的时候发现当我点击跳转按钮时地址栏可以跳转到/我想要的路由下,但是组件加载不出来但是刷新后就可以了!可以正常加载 | |;原因分析:1、首先我们要知道对于子组件他是获取不到this.props.history这个方法的2、第一点解决后还有个坑,对于子组件是不能通过this.props.history跳转到父组件的下面我们通过实例来演示并解决解决方案:1、怎么让子组件可以使用this.props.history这个原创 2020-09-29 16:40:20 · 2997 阅读 · 0 评论 -
getDerivedStateFromProps填坑
项目场景:今天又来填一个坑!!!!问题描述:最近写的react项目中用到getDerivedStateFromProps ,这可把我折腾坏了,先说说我想实现的目标吧,在一个组件中当它的props发生变化时,组件需要重新获取对应的数据刷新页面,一开始我想到的是getDerivedStateFromProps不是能监听到props的变化吗,我就直接在这个函数中调用获取数据的方法,这里要注意getDerivedStateFromProps是静态方法不能用this直接调用组件中的方法,就想起上次看了一篇博客博原创 2020-09-23 22:19:02 · 5465 阅读 · 1 评论