![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React.js
mytheart
学习是一种生活方式。享受过程。
展开
-
react 常用 hooks
// 监控元素尺寸变化export function useClientRect() { const [rect, setRect] = useState(null); const ref = useCallback(node => { if (node !== null) { setRect(node.getBoundingClientRect()); } node && myObserver.observe(node) }, [])原创 2021-03-16 16:10:52 · 121 阅读 · 0 评论 -
react-redux使用和源码分析(hook和class版本)
react-reduxReact: 组件化的UI界面处理方案React-Router: 根据地址匹配路由,最终渲染不同的组件Redux:处理数据以及数据变化的方案(主要用于处理共享数据)如果一个组件,仅用于渲染一个UI界面,而没有状态(通常是一个函数组件),该组件叫做展示组件如果一个组件,仅用于提供数据,没有任何属于自己的UI界面,则该组件叫做容器组件,容器组件纯粹是为了给其他组件提供数据。react-redux库:链接redux和reactProvider组件:没有任何UI界面,该原创 2020-10-17 22:48:52 · 255 阅读 · 0 评论 -
React进阶
React中的事件这里的事件:React内置的DOM组件中的事件几乎所有的元素的事件处理,均在document的事件中处理,React会根据虚拟DOM树的完成事件函数的调用一些不冒泡的事件,是直接在元素上监听一些document上面没有的事件,直接在元素上监听如果给真实的DOM注册事件,阻止了事件冒泡,则会导致react的相应事件无法触发(和第三方dom插件混用是需要特别注意)如果给真实的DOM注册事件,事件会先于React事件运行React的事件参数,并非真实的DOM事件参数,是Re原创 2020-09-19 11:51:51 · 409 阅读 · 0 评论 -
MVC/MVVM(Redux的核心概念)
Redux核心概念action reducer storeMVC它是一个UI的解决方案,用于降低UI,以及UI关联的数据的复杂度。传统的服务器端的MVC[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vt7TOLof-1600448457535)(assets/2019-08-20-13-18-58.png)]环境:服务端需要响应一个完整的HTML该HTML中包含页面需要的数据浏览器仅承担渲染页面的作用以上的这种方式叫做服务端渲染,即服务器端将完整的原创 2020-09-19 01:01:55 · 741 阅读 · 0 评论 -
React Hook
Hook简介Hook专门用于增强函数组件的功能(Hook在类组件中是不能使用的),使之理论上可以成为类组件的替代品官方强调:没有必要更改已经完成的类组件,官方目前没有计划取消类组件,只是鼓励使用函数组件Hook(钩子)本质上是一个函数(命名上总以use开头),该函数可以挂载任何功能Hook的种类:useState、useEffect、useContext、useReducer、自定义Hookstate Hookstate Hook是一个在函数组件中使用的函数(useSatte),用于在函.原创 2020-09-16 22:40:34 · 124 阅读 · 0 评论 -
手写Redux源码
import isPlainObject from "./utils/isPlainObject"import ActionTypes from "./utils/ActionTypes"function validateReducers(reducers) { if (typeof reducers !== "object") { throw new TypeError("re...原创 2020-03-22 23:43:26 · 323 阅读 · 0 评论 -
React渲染原理
渲染原理渲染:生成用于显示的对象,以及将这些对象形成真实的DOM对象React元素:React Element,通过React.createElement创建(语法糖:JSX)例如:<div><h1>标题</h1></div><App />React节点:专门用于渲染到UI界面的对象,React会通过React元素,创...原创 2019-10-17 00:33:56 · 651 阅读 · 0 评论 -
解决redux/Vuex刷新页面数据丢失问题
前言先简单描述一下需求:A页面和B页面都需要通过同一个接口获取的数据来展示页面;B是A的子页面,从A页面可以跳转到B页面;思考从减少页面的http请求数来达到性能优化的方面来考虑:可不可以A跳到B页面后,不再ajax请求数据,而是直接获取A页面Model里的数据?(如图)尝试按上述思路可以达到需求。但也发现一个问题:在重新刷新B页面时,B页面上显示的数据为空。分析Redux...原创 2019-07-28 21:06:37 · 6452 阅读 · 0 评论 -
React生命周期详解(图)
React16.3版本以前的生命周期React16.3版本以前的生命周期注意:componentWillMount()、componentWillReceiveProps()、componentWillUpdate()在React16.3新版本中都被移除;在React16.3新版本的生命周期函数中,getSnapshotBeforeUpdate()生命周期函数必须要有返回值,且必须和...原创 2019-07-28 10:24:16 · 411 阅读 · 0 评论 -
Redux图解
原创 2019-07-30 09:00:04 · 322 阅读 · 0 评论