随笔分类 - react
摘要：## 1.概述 1. React Router 以三个不同的包发布到 npm 上，它们分别为： 2. react-router: 路由的核心库，提供了很多的：组件、钩子。 3. **react-router-dom:** 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如
阅读全文
摘要：mobx react中 全局数据管理库 可以简单的实现数据的跨组件共享 类似 vue中的vuex 使用步骤 安装依赖 mobx 核心库 mobx-react 方便在react中使用mobx技术的库 @babel/plugin-proposal-decorators 让 rn 项目支持 es7 的装饰
阅读全文
摘要：自定义hook hook就是一个函数,有一些特定逻辑的封装函数 1,用于处理字符串(url) 2,数据格式化(日期) 3,业务逻辑性 // 自定义hook相对于普通js复用逻辑的抽离,然后可以在页面调用 // 自定义hook一般放在src下面hooks文件夹里面 // 自定义 Hook 是一个函数，
阅读全文
摘要：### 简介 Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。 Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。 如果你在编写函数组件并意识到需要向其添加一
阅读全文
摘要：##安装相关依赖 yarn add redux yarn add react-redux ##A,构建 store 和 reducer 创建 reducer/index.js 文件，构建 reducer来响应 actions 创建 store/index.js 文件，通过 createStore 方
阅读全文
摘要：登录访问控制 AuthRoute 鉴权路由组件实现思路 参照官网自己封装AuthRoute 鉴权路由组件 实现修改登录成功后的跳转 概述 项目中的两种类型的功能和两种类型的页面： 两种功能： 登录后才能进行操作（比如：获取个人资料） 不需要登录就可以操作（比如：获取房屋列表） 两种页面： 需要登录才
阅读全文
摘要：react-spring动画库 概述 场景：实现动画效果，增强用户体验 react-spring是基于spring-physics（弹簧物理）的react动画库，动画效果更加流畅、自然 优势： 几乎可以实现任意UI动画效果 组件式使用方式（render-props模式），简单易用，符合react的声
阅读全文
摘要：表单验证说明 表单提交前，需要先进性表单验证，验证通过后再提交表单 方式一：antd-mobile 组件库的方式（需要InputItem文本输入组件） 推荐：使用更通用的 formik，React中专门用来进行表单处理和表单校验的库 介绍 Github地址：formik文档 场景：表单处理，表单验证
阅读全文
摘要：长列表性能优化 概述 在展示大型列表和表格数据的时候（城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题，这样就会导致移动设备耗电加快，影响移动设备的电池寿命 产生性能问题的元素：大量DOM节点的重绘和重排 优化方案： 懒渲染 可视区域渲染 懒渲染 懒加载，常见的长列表优化方案，常见于
阅读全文
摘要：组件之间样式覆盖问题 能够利用CSS Modules解决组件之间样式覆盖的问题 概念 问题：CityList组件的样式，会影响Map组件的样式 原因：在配置路由的时候，CityList组件与Map组件都会被导入到路由中，那么只要组件被导入，那么相关的样式也会被导入进来，如果两个组件的样式名称相同，那
阅读全文
摘要：现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体 验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由 应运而生。 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射
阅读全文
摘要：<!-- 1. JSX 语法的转化过程 --> JSX 仅仅是 createElement() 方法的语法糖（简化语法） JSX 语法被 @babel/preset-react 插件编译为 createElement() 方法 React 元素：是一个对象，用来描述你希望在屏幕上看到的内容 JSX
阅读全文
摘要：setState() 是异步更新数据的 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState() 可以多次调用 setState() ，只会触发一次重新渲染 this.state = { count: 1 } this.setState({ count: th
阅读全文
摘要：<!-- 1. React组件复用概述 --> 思考：如果两个组件中的部分功能相似或相同，该如何处理？ 处理方式：复用相似的功能（联想函数封装） 复用什么？1. state 2. 操作state的方法 （组件状态逻辑 ） 两种方式：1. render props模式 2. 高阶组件（HO
阅读全文
摘要：<!-- 1 组件的生命周期概述 --> 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。 钩子
阅读全文
摘要：组件是封闭的，要接收外部数据应该通过 props 来实现 props的作用：接收传递给组件的数据 传递数据：给组件标签添加属性 接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据 <Hello name="jack" age={19} /> func
阅读全文
摘要：组件是 React 的一等公民，使用 React 就是在用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点：可复用、独立、可组合 <!-- 2.React 组件的两种创建方式 --> 1 使用函数创建组件 函数组件：使用 JS 的函数（或箭头函数）创建的组件 约定1：函数名称必须
阅读全文
摘要：<!--1. react概述 --> React 是一个用于构建用户界面的 JavaScript 库。 1. React 概述 1.1 什么是 React 如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了 完整的 M 和 C 的功能。 <!-- 2.R
阅读全文
