![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 55
BBbila
前端小鸟,欢迎交流学习
展开
-
react-hooks的节流与闭包,以及useCallback的用处
useThrottle: 封装了一个节流的hookuseCallback的作用(性能优化)不用Hook封装节流方法的情况,看是怎么形成闭包的:原创 2022-11-15 17:41:05 · 1132 阅读 · 0 评论 -
react+ts用class类实现五子棋
【代码】react+ts用class类实现五子棋。原创 2022-11-15 15:11:09 · 522 阅读 · 0 评论 -
前端基础&进阶学习笔记(持续更新)
【一】Immerimmer 是一个用 C ++ 编写的可持久化和不可更改的数据结构库。 可持久化意味着修改数据结构时,将保留旧值。 不可更改意味着所有的操作方法都是 const。 对象不会在适当位置修改,但会返回新值。 因为旧值仍然存在并且永远不会改变,所以新值可以透明地保持对它的公共部分的引用。 这个属性被称为结构共享。.....................原创 2021-06-15 16:19:55 · 374 阅读 · 1 评论 -
【react-hook】useEffect与useLayoutEffect及componentDidMount的关系
参考大佬的文章:https://www.jianshu.com/p/5296c5acf788摘要:在React通知到Renderer渲染器后,渲染器又分了三个子阶段来处理:beforeMutation阶段(渲染视图前) mutation阶段(渲染试图) layout阶段(渲染视图后)渲染器会在mutation阶段完成后, 在layout阶段同步的调用useLayoutEffect,在子组件嵌套中于是如此。在类组件中,调用的是componentDidMount生命周期函数。也就是说,在use转载 2021-05-17 23:16:10 · 1920 阅读 · 0 评论 -
【React】react-hook中useEffect第二个参数的意义
转载大佬的文章:https://www.jianshu.com/p/6e525c3686ab1.你可以把useEffect函数看做componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合。2.默认情况下,它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念,不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。...原创 2021-04-25 17:33:23 · 1662 阅读 · 0 评论 -
【react 使用swiper插件写轮播图】:完整代码无bug+ 样式.less
【效果实例】【treasure.js】首先:npm install swiper -- save我写的死数据,如果你要自己加图片或者有数据,就在swiper-wrapper的子项map方法循环就好了。。建议直接npm官网看一下,里面有详细的react.js用法。我这里没有设置其他属性,只有滑动和分页器,其他比如自动播放,延迟时间等属性,查一下官网,然后设置在生命周期...原创 2020-01-31 15:42:38 · 2007 阅读 · 2 评论 -
【react实战】如何开发嵌入客户端的H5页面黑白模式?
需求:提供用户自行选择的主题模式:黑/白。默认情况下,是白色主题。用户选择的数据传递给后端,然后获取接口(已知接口:DarkMode())。1.首先写好黑/白模式下的CSS文件.2.在app.js里,在生命周期函数componentDidMout() { }页面加载的时候去判断:定义一个全局变量:—isDarkMode,初始值为null;如果页面加载的时候,有isDarkM...原创 2019-11-07 16:45:37 · 468 阅读 · 0 评论 -
react: 父子组件实现回退按钮
子组件: header.js父组件:原创 2019-10-08 14:41:00 · 166 阅读 · 0 评论 -
如何用redux+redux-sagas修改react组件里的dom元素的样式
1.操作sagas2.在constant里定义action 的type3.定义action4.在reducer里写方法5.在react组件去引用最后实现:点击按钮,让其他dom元素变样式原创 2019-09-11 15:19:20 · 153 阅读 · 0 评论 -
拉取(pull)远程的dev分支到本地的dev分支,再与本地的local分支合并
▒▒ع▒▒ MINGW64 /e/leo/real/pc-app-store-h5-react (local)$ git checkout devSwitched to branch 'dev'M src/layouts/Layout.jsM src/pages/Recommend/Recommend.jsM src/pages/Uninstall/...原创 2019-09-09 16:58:52 · 1812 阅读 · 0 评论 -
e.target 和 e.currentTarget 分别怎么获取具体的子元素节(JS动态改变图片icon)
【e.target】【e.currentTarget】原创 2019-09-09 11:15:53 · 3402 阅读 · 0 评论 -
【21】前端实习:redux入门学习(核心概念)
【安装依赖】npm install --save reduxnpm install --save react-reduxnpm install --save-dev redux-devtools【核心概念】 state被存放在哪里? 应用中所有的 state 都以一个对象树的形式储存在一个单一的store中。 怎么改变state(state里面的数据)? 不...原创 2019-09-02 16:51:06 · 109 阅读 · 0 评论 -
【15】前端实习:react官方文档练习(定时器/ 组件的拆分与使用/ 子组件向父组件传值/react的状态与生命周期)
【1】【2】子组件向父组件传值父组件:App.js子组件: Child.js默认情况下,React DOM在渲染之前会转义JSX中嵌入的任何值。因此,它确保您永远不会注入未在应用程序中明确写入的任何内容。在渲染之前,所有内容都会转换为字符串。这有助于防止XSS(跨站点脚本)攻击。【3】定时开启时钟【4】组件(javascript 以及 ES6来定义...原创 2019-08-27 15:26:53 · 208 阅读 · 0 评论 -
react 父子组件传值
原创 2019-08-27 17:37:13 · 106 阅读 · 0 评论 -
【20】前端实习:react官方文档学习(处理事件/条件渲染/ 显示与隐藏 /列表与键)
【1】处理事件*****************Tip**************************e是一个合成事件。React根据W3C规范定义了这些合成事件,因此您无需担心跨浏览器兼容性。*****************Tip**************************import React, {Component} from 'react';import...原创 2019-08-27 18:00:34 · 159 阅读 · 0 评论 -
【20】前端实习:react官方文档练习(状态提升/ {温度计例子})
【温度计】import React, {Component} from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';function Water(props...原创 2019-08-28 15:18:23 · 252 阅读 · 0 评论 -
【20】前端实习:react官方文档学习(构成与继承)
【组合例子1】function Contacts() { return <div className="Contacts" />;}function Chat() { return <div className="Chat" />;}function SplitPane(props) { return ( <div classN...原创 2019-08-28 15:40:22 · 180 阅读 · 0 评论 -
【20】前端实习:react官方文档学习(高级指南:React refs与弹出窗口/ MyErrorBoundary /suspense / Context)
【1】React refs与弹出窗口import React, {Component} from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';class ...原创 2019-08-28 18:38:22 · 286 阅读 · 0 评论 -
react项目中修改页面的样式,让页面与顶部没有距离
浏览器中发现:原先是:body { display: 0; margin: 8px;}解决:原创 2019-08-29 18:30:02 · 597 阅读 · 0 评论 -
React : 如何遍历一个数组对象,并操作特定的数组里的元素,让其改变样式
问题:如何让第5个,第10 个,第15个...5的倍数的数组元素的外边距改变。实现的功能是:让一行显示5个<div>。效果:原创 2019-09-01 01:10:52 · 2436 阅读 · 0 评论 -
【13】前端实习:react 组件的使用与拆分
单页定义组件import React, {Component} from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';// 定义常量 messagecon...原创 2019-08-27 14:06:15 · 134 阅读 · 0 评论