![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 50
前端攻城fff
一个菜鸟
展开
-
react关于组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback)
在一个组件中, 其state变化会引起render的重新执行, 函数式组件中, 使用setHook更新state也会引起render的重新执行render执行会带来两个方面的影响当前组件需要重新渲染, 除了那些状态和生命周期初始化被保留的,其余正常的都会重新执行。子组件会重新渲染, 即使其是一个无状态组件针对上述问题, react给出来解决方案:pureComponent, React.memo, useMemo, useCallback下面将具体说明这几个都使用场景和解决的问题:原创 2021-12-08 10:32:08 · 3623 阅读 · 1 评论 -
关于useState更新后使用最新值进行操作的解决方案
useState是异步更新,想要在设置后直接获取最新的state是拿不到的例如: 页面更新的时候,更新页码的state,接着重新请求但是重新请求的时候是拿不到最新的页码的解决: // 页码变化时的回调 const pageChange = (page: number, size: number) => { setPages({page, size}) setIsUpdatePages(true) } useEffect(() => { if (!原创 2021-12-03 17:34:51 · 3140 阅读 · 0 评论 -
关于useEffect和useCallBack踩坑
副作用的操作可以放在useEffect中执行,并且其每次执行都会清除上一次的副作用,副作用一般都为修改DOM, 生成不确定的值等const Menus = () => { const [selectedKey, changeSelectedKey] = useState(['/admin/index']) const [menu, setMenu] = useState([]) const changeSelected = (value: string[]) => { ch原创 2021-11-23 11:41:20 · 1467 阅读 · 0 评论 -
react-redux
该库是react提供的为react操作redux的, 与纯redux还有些出入, 具体可看下面的注释首先创建容器// 该文件是count的容器, 该容器也是一个组件, 但是创建的方式需要使用react-redux的connect方法 // react-redux规定, 组件不能直接操作redux// 这里通过props与组件连接, 并与store连接// 在这里不引入store, 下面的state和dispatch也不是本来就有的, 需要在组件挂载时, 在那里将store传递,而且也不用接收//原创 2021-08-16 00:56:53 · 90 阅读 · 0 评论 -
redux
引入creatStore, 引入reducer创建store创建reducer, 本质就是一个函数, 一个reducer操作状态中的一个data,参数为pre, action, 从action中拿type, data, 初始化的时候也是switch判断type, 不同的type对pre做不同的事, return pre不用break初始化pre是undefined, 定义初始化状态initState, 参数中pre = initStatereducer// 创建一个为count状态服务的reduc原创 2021-08-16 00:56:19 · 92 阅读 · 0 评论 -
React-Router-Dom
单页面应用(SPA), 前端路由变化不会刷新页面, 不会向服务器发送请求路由分为前端路由和后端路由, 前前后端路由都是一个键值对,前端(path, component), 一个路由对应一个组件后端(path, function), 一个路由对应一个处理函数单页面应用核心在与history, 即BOM下的history, 两种模式, 一种就是history模式, 另一种是hash模式前端路由变化可以被监听到, 因此可以写上对应的component初步编写app中import React, {原创 2021-08-11 00:41:40 · 395 阅读 · 0 评论 -
xhr && fetch
xhr封装xhr是XMLHttpRequest的实例对象, axios, ajax, jq等都是对xhr的封装原生写法(封装了一个函数用于调用) :setXhr = (url) => { let xhr = new XMLHttpRequest() // 配置请求 xhr.open('GET', url) // 配置响应为json格式 xhr.responseType = 'json' // 请求成功的回调 xhr.onload = (re原创 2021-08-05 00:29:10 · 217 阅读 · 0 评论 -
react新旧生命周期
新旧周期的图作为基底旧:新旧生命周期详解生命周期分为三条不同的路1, 组件创建并挂载2, 状态更新 ===> 组件更新(包含父子组件)3, 强制组件更新1).组件创建并挂载class Demo1 extends React.Component { // 首先执行的constructor钩子 constructor(props) { console.log('1-------constructor') super(props) this.state原创 2021-07-26 11:17:41 · 192 阅读 · 0 评论 -
react的input收集优化
<script type="text/babel"> class Demo extends React.Component{ state = { username: '', password: '' } setInput = (type) =>{ // 这里不同于正常的html中的回调函数使用高阶,这里的this就是react,包括event也是react提供的,原创 2021-06-01 11:08:55 · 152 阅读 · 0 评论