React+Mobx公共状态管理 参考: Mbox 官网:https://www.mobx.org.cn/ 1. Mobx1.1 介绍(1) Mobx是一个功能强大,上手非常容易的状态管理工具。 (2) Mobx背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得。 (3) Mobx利用 getter 和 setter 来收集组件的数据依赖关系,从而在数据发生变化的时候精确知道哪些组件需要重绘,在界面的规模变大的时候, 2022-05-22 04_大前端 > 07_React #React #mobx
React+Redux-saga库 参考: redux-saga 官网:https://redux-saga-in-chinese.js.org/index.html 1. 介绍 在saga中,全局监听器和接收器使用Generator函数和saga自身的一些辅助函数实现对整个流程的管控。 1.1 原理:生成器12345678910111213141516171819function *test() { cons 2022-05-22 04_大前端 > 07_React #React #redux-saga
React+immutable库 参考: immutable 官网:https://immutable-js.com/ immutable 源码:https://github.com/immutable-js/immutable-js 背景: 对象= 引用赋值(浅拷贝),修改复制后的对象,会影响原对象 对象... 展开赋值(浅拷贝+1层),只比浅拷贝多复制一层数据(只有一层结构时完全可以使用),深层的值修改还会影响原对象 2022-05-22 04_大前端 > 07_React #React #immutable
React企业级应用框架选型 一、主流 React 前后端一体企业级框架(按落地度排序)1. Ant Design Pro(阿里出品,最主流) 核心定位:React 中后台领域的「事实标准」,前后端一体(前端基于 umi + Ant Design,后端可对接 Java/Node.js/Go 等),阿里内部及数千家企业落地(如阿里云、钉钉、飞书生态)。 核心特点: 前端:基于 umi4(React 企业级路 2022-05-22 04_大前端 > 07_React #React #dva #umi
React+styled-components库 参考: styled-components 官网:https://styled-components.com/ styled-components 教程:https://www.zhifeiya.cn/reference/styled-components.html 1. styled-components 它是通过JavaScript改变CSS编写方式的解决方案之一,从根本上解决常规CSS 2022-05-22 04_大前端 > 07_React #React #styled-components
React基础 参考: React 官网:https://zh-hans.react.dev/ React 教程:https://zh-hans.react.dev/learn React17 文档(英文):https://17.reactjs.org/docs/getting-started.html React18 的新内容:https://zh-hans.react.dev/blog/2022/03/2 2022-05-22 04_大前端 > 07_React #React
React单元测试 参考: react-test-renderer 官网:https://zh-hans.legacy.reactjs.org/docs/test-renderer.html 1. react-test-renderer1.1 安装安装:npm i react-test-renderer@18 - 对应 react 的版本,当前用的是 v18 就暂时下载的是 v18 1.2 使用目录: 1234 2022-05-22 04_大前端 > 07_React #React #单元测试 #react-test-renderer
React生命周期 参考: React 官网:https://zh-hans.react.dev/ React 教程:https://zh-hans.react.dev/learn 1. 生命周期v17 & v19组件的生命周期可分成三个状态: Mounting(挂载|初始化):已插入真实 DOM (constructor→render→componentDidMount) Updating(更新|运 2022-05-22 04_大前端 > 07_React #React
React的Portal&forwardRef&memo 1. Portal1.1 介绍Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法。 1ReactDOM.createPortal(child,container); 第一个参数child是可渲染的react子项,比如元素,字符串或者片段等。第二个参数container是一个DOM元素。 普通的组件,子组件的元素将挂载到父组件的DOM节点中。 1234567 2022-05-22 04_大前端 > 07_React #React #portal #forwardRef #memo
React组件受控与通信 参考: React 官网:https://zh-hans.react.dev/ React 教程:https://zh-hans.react.dev/learn 1.受控与非受控组件1.1 表单非受控组件 ref 来从 DOM 节点中获取表单数据,就是非受控组件 如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。 在 React 渲 2022-05-22 04_大前端 > 07_React #React