随笔分类 - React.js
摘要：高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。 1. 简单用法 import React, { Component } from "react"; const withMouse = (AppComponent) => { class HOC extends Component
阅读全文
摘要：import React, { Component, Fragment } from 'react' import { Form, Button, Input, InputNumber } from 'antd' import DrawerArrow from './DrawerArrow' imp
阅读全文
摘要：1.前端导出 excel 文件基本步骤 1.1 引入 import Excel from "exceljs"; 1.2 初始化工作簿 const workbook = new Excel.Workbook(); 1.3 设置工作簿属性 workbook.creator = "admin"; work
阅读全文
摘要：1. useState: 状态钩子 基础用法 const [state, setState] = useState(initialState); 返回一个 state，以及更新 state 的函数。 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同
阅读全文
摘要：基于React 的audio音频播放组件, 自定义播放/暂停按钮、进度条调节、音量调节、倍速播放。 组件代码： AudioPlay.js import React, { Component } from "react"; class App extends Component { construct
阅读全文
摘要：Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 1. 用法 React.createContext 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provi
阅读全文
摘要：安装： 使用示例： 参考文档 "https://video react.js.org/"
阅读全文
摘要：Braft Editor 是基于draft js开发的富文本编辑器，适用于 React 框架。 1. 安装 使用npm 使用yarn 2. 基本使用 2. 自定义内置控件 Braft Editor使用 controls 属性指定需要展示的控件；使用contentStyle调整编辑区域的高度。 3.
阅读全文
摘要：实现路由级的动态加载（code splitting），可按需指定哪一级的按需加载。 配置项包含： webpackChunkName，是否通过 webpackChunkName 实现有意义的异步文件名 loadingComponent，指定加载时的组件路径 level，指定按需加载的路由等级
阅读全文
摘要：Yarn 在运行时会创建一个 yarn.lock 文件, 用来保存所安装的依赖包的具体版本信息, 以保证在不同机器安装可以得到相同的结果。
阅读全文
摘要：React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。 所有，可以对组件进行异步加载处理，通常可以使用 。 React loadable 使用 例如，对于项目中的detail组件（/src/pa
阅读全文
摘要：在 React router 中通常使用的组件有三种： 路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式） 路径匹配组件: Route 和 Switch 导航组件: Link 和 NavLink 关于路由组件，如果我们的应用有服务器响
阅读全文
摘要：1. react redux React Redux 是 Redux 的官方 React 绑定库。 React Redux 能够使你的React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据。 React Redux 并不是 Redux 内置，需要单独安
阅读全文
摘要：React 生命周期 React 生命周期 1. 初始化 initialization 在 consructor() 里面初始化 Props 和 State 属性。 2. 挂载 Mounting componentWillMount() : 组件即将被挂载到页面之前的时刻自动执行，早于 render
阅读全文
摘要：Redux可以简单概况为：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。 1. Re
阅读全文
