blog
blog copied to clipboard
xianzou
弦奏的博客 一个混迹多年的前端开发人员，正在努力的学习中
## React组件化开发方式中6种类型组件 > 原文链接：[React 组件开发实践 | AlloyTeam](http://www.alloyteam.com/2019/07/13475/) > > 作者：[chuangchuang](https://github.com/smallcomfort) 基于 React 的组件化开发方式，为富前端 web 应用提供大量技术实践，社区逐渐形成了稳定的组件规范，本文从 API 层面归纳出 6 种组件类型，分析其优缺点和适用场景，为日常组件开发提供一个方法指南。6 种类型分别为结构型组件、样式型组件、组合型组件、配置型组件、受控型组件、非受控组件。 ### 结构型组件 结构型组件定义了组件大体结构，结构的具体实现由外部传递。样式型组件确定了组件结构细节，外部只需传递参数即可渲染预期样式。 ```jsx ``` ### 样式型组件 ...
创建长度为 100 的数组 不用循环创建一个长度为100的数组，并且每个元素的值等于它的下标 ES5实现 循环 var arr = new Array(100); for(var i = 0; i[0,1,...,99] Array.apply() Object.keys(Array.apply(null,{length:100})); // console =>>> ['0','1',....'99'] //此时是字符串 需要进行循环处理 Object.keys(Array.apply(null,{length:100})).map(function(n){return +n}); // console =>>> ['0','1',....'99']...
## 检查webpack编译之后的代码是否存在ES5+代码 #### 1、使用webpack插件 [check-es-version-webpack-plugin](https://github.com/bitjourney/check-es-version-webpack-plugin) `此插件检查Webpack输出的ES版本是否与指定版本的ES兼容。例如，如果您的项目支持最高支持ES5的IE11，则必须确保您的JavaScript包不包含ES2015 +语法，例如类，async / await等等`。 示例： ```js const { CheckEsVersionPlugin } = require("@bitjourney/check-es-version-webpack-plugin"); const config = { // ... }; if (productionMode) { // this...
## CSS 常见布局方案 `本文转载自掘金木羽™的前端那些事儿」③ CSS 布局方案，并加上一些自己的注释`，[请关注原作者](https://juejin.im/post/5bd805e6f265da0acd2107d7)。 原文地址：https://juejin.im/post/5bd805e6f265da0acd2107d7； ### 1.水平居中 #### inline-block + text-align ```css .parent{ text-align: center; } .child{ display: inline-block; } ``` #### table + margin ```css .child{ display:...
## 描述 IE10以下报错：SCRIPT438: 对象不支持“forEach”属性或方法 ## 运行环境 浏览器类型和版本：IE IE10以下 操作系统：windows ## 操作步骤 //获取dom元素 const list = document.querySelectorAll('.level-li'); //循环 list.forEach((li, liIndex) => { .... }) ## 现象描述及期望行为 正确的循环list 当前的状况 IE下报错 ` SCRIPT438:...
方法一 var newArray = arr.flat(depth) 参数： depth :可选：指定要提取嵌套数组的结构深度，默认值为 1； 使用 Infinity 作为深度，展开任意深度的嵌套数组； 返回值： 一个包含将数组与子数组中所有元素的新数组。 示例： var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2...
### 此本转载至[happylindz/blog](https://github.com/happylindz)，喜欢的话请给他点 star:[原文地址](); 现阶段Hooks 资料相对较少，感觉原创主的博客写得很好很清楚，受益很多，示例基于自己学习后稍有改动； ### 前言 在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处： 1. 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护 2....
前置条件 安装babel-loader: yarn add -D babel-loader; 配置webpack.config.js: module: { rules: [ { test: /\.js$/, use: 'babel-loader' } ] } 方法一 安装依赖： yarn add -D @babel/polyfill； 在主入口引入模块： import 'babel-polyfill'; 这样会把所有的新的api都加入编译后的代码，会显得很臃肿； 方法二...
此本转载至Marckon的文章： 【[React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案](https://segmentfault.com/a/1190000017209855)】 [原文地址](https://segmentfault.com/a/1190000017209855#articleHeader1); #### 使用`Hooks`-`useReducer()`和`useContext()` 总之使用`Redux`很累，当然，你可以不使用Redux，直接通过`props`层层传递，或者使用`context`都可以。只不过本文我们学过了`useReducer`，使用到了`Redux`的思想，总要试着用一下。 **这里你不需要引入别的任何第三方库了，简简单单地使用[email protected]版本就好啦** 很重要的一点就是——**函数式组件**，现在React推荐我们这么做，可以基本上代替`class`写法。 #### 函数签名 - `useReducer(reducer,initialState)` - `useContext(ctxObj)` - `useEffect(effectFunction,[dependencyValues])` #### 概览-你需要编写什么 1. **action.js：** - 我们还使用`redux`的思想，编写action 2. **reducer.js：** - 处理action，不同于`redux`的`reducer`，这里我们可以不用提供初始状态 3. **根组件：** -...
#### 效果展示 示例： > 原文参考：CSS实现个性化水球图 https://blog.csdn.net/qq_40289557/article/details/127593240 Liquid.js ```js import React, { useMemo } from 'react'; import cx from 'classnames'; import styles from './Liquid.scss'; const defaultConfig = { frontColor: '#0bc8e8', //...