衣乌安、随笔

看react官网在推Next.js,所以简单学习了解一下。

作者维护的可视化搭建平台所提供的投放数据配置表单是基于搭建物料中配置的经过统一的渲染生成的，这就意味着：表单项的类型是预先约定好的，虽然这可以满足业务绝大部分的诉求，但是总有一些高度定制的配置项需要支持业务自定义。作为一个通用的平台，内部耦合业务逻辑是个很愚蠢的办法，所以便开了业务自定义扩展渲染组件的口子。

为啥要写这个hooks？主要是因为我们页面antd使用的是4.0版本，当时5.0还没有支持，而在一些业务场景中我需要监听某个表单值的变化来做一些回调处理，而Form组件的props中需要集中一个地方来写这些回调又不太方便于是便翻到了源码中这个antd内置hooks事件，可以用来监听。

常规B端项目中往往需要一些全局通用的状态来实现跨组件层级甚至整个系统全局的共享，比如：当前用户的信息、某些业务状态等。

自定义hooks支持吸顶

首先我们来了解一下redux的几个基本概念：Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 storeReducers 指定了应用状态的变化如何响应 actions 并发送到 store 的Store维护了想要存储的 state 以及用来满足 Action 和 Reducers 使用的 API;redux的一个粗略的是处理过程就是：什么是redux中间件？redux中间件其

Refs干什么用的？Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄该值会作为回调函数的第一个参数返回。首先需要知道的是函数组件是不可以被添加 ref 的,那是因为 ref 不是 props(属性)。 像 key 一样，它的处理方式不同。控制台会出现如下warning:那么如果想获得HOC中所包裹的 DOM 元素或者某个组件实例时要怎么做呢？此时便可以使用React.forwardRe.

很多的团队都会根据自己团队的技术风格或应用场景建立自己的组件库，然鹅随着组件的增加，组件库的体积也变得越来越大，如果一个很小的项目，仅仅想使用某个组件库中一两个组件，而这个组件库十分庞大却不支持按需加载，其结果就是打包后发现引入组件库的体积甚至比项目本身的代码还要大N倍。那么如何让组件库支持按需加载呢？以React项目为例，首先从打包后的包来分析，可能在没有支持按需加载时类似这样：.├── dist| ├── index.js| ├── style.css| ├── ...|.

简介优势劣势官方APIuseStateuseReduceruseEffectuseLayoutEffectuseMemouseCallbackuseRefuseImperativeHandleuseContextmemocustomHooks注意事项简介本文主要针对React `16.8.x`提供的`hooks`使用加以介绍，更高版本的中的`hooks`暂无介绍优势代码量少（最直观的体现）相较于 类组件 使用HOC、render props , hook.

首先要知道react组件在什么情况下会刷新，比如：state、props更新。。。。然后就有各种方式可以强行刷新组件了，比如：const [refresh, setRefresh] = useState(false);useEffect(() => { refresh && setTimeout(() => setRefresh(false))},...

验证码的通用作用就是防止机器（爬虫）大规模的采集数据，防止不法分子通过抓包获取数据来模拟用户操作而产生危害用户的行为等。为满足以上简单需求，首先验证码的字符不能放在html标签里面，这可以被爬虫直接获取，因此采用canvas来绘制。为增加爬虫识别难度，对字符进行一定程度是旋转，添加干扰线和干扰点。（虽然以现在机器学习的能力这些别没有什么卵用，但简单的验证码都是这么做的，考虑更为安全的方式可以选择...

location / { try_files $uri /index.html;}

模块热替换(Hot Module Replacement 或 HMR)。它允许在运行时更新各种模块，而无需进行完全整个浏览器页面刷新官方文档https://www.webpackjs.com/guides/hot-module-replacement/基本配置webpack.config.dev.jsconst path = require('path');const ...

webpack配置json-loader（webpack4 内置）devServer.progress - 只用于命令行工具(CLI)官方升级信息：https://www.webpackjs.com/guides/migrating/webpack.optimize.CommonsChunkPlugin插件变动webpack.optimize.CommonsChunkPl...

react-router自版本4开始，发生了很大的变化，其中一点就是，开始倡导组件式使用，不再支持集中式的配置，而出于开发的习惯以及便于项目路由的管理，还是有许多地方希望可用使用集中式的方式来配置路由。下面介绍一种实现方式。router.js使用import()实现按需加载import React, {Component} from 'react';import { BrowserRo...

装饰器+HOC(高阶组件)简单使用这里不会过多的详细介绍HOC和装饰器的概念，而是简单叙述实际开发场景中是一个demo来作为使用参考。高阶组件简单来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件。组件是将 props 转化成 UI ，然而 高阶组件将一个组价转化成另外一个组件。React在第三方组件库中非常常见，例如Redux的connect装饰器ES7中的一种语法...

如下图“safe write”勾去掉就好了

大概思路是，为document绑定一个点击事件，判断事件触发对象(e.target)是否是 or 在指定div内部。首先需要了解两个知识点：React ref属性 Node.contains()利用ref属性获取div节点constructor(){ this.divElement = null;}render() { return( &lt...

Redux基本知识Redux中间件和异步操作Redux 用法基本知识点store容器，保存数据的地方，整个应用只能有一个store.getState()获取store快照，即执行时store数据的集合actionstate和view是同步的，state改变view也会发生变化，然而用户操作都是在view进行的，所以就需要用到了action，表示view发出通知来...

(简单流程，仅供参考，一切以实际需求为准)环境准备node、npm、webpack4+npm基本使用命令项目创建创建目录初始化首先创建项目文件夹并进入，使用npm init初始化，然后一溜回车就好，执行完后项目文件夹中会多一个package.json文件。这是项目的核心文件，包含包依赖管理和脚本任务。$ mkdir webpack-react $ cd webpack-rea...

npm install -g create-react-app本地创建一个新项目：create-react-app my-app执行命令：

babel-sublime支持ES6， React.js, jsx代码高亮，对 JavaScript, jQuery 也有很好的扩展。关于 babel 的更多介绍可以看这里：为什么说Babel将推动JavaScript的发展安装Windows：Ctrl+shift+pMac：Cmd+shift+p打开面板输入babel安装配置打开.js, .jsx 后缀的文件;打开菜单view， Syntax -...

自：https://www.jianshu.com/p/f4166120489b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation为什么dispatch需要middleware？middle.png上图表达的是 redux 中一个简单的...

 Store与视图层的绑定Provider组件想要把store绑定在视图层上，得用到React-redux中的两个主角:Provider和Connect，在api文档第一段话,作者说通常情况下你无法使用connect()去connect一个没有继承Provider的组件，也就是说如果你想在某个子组件中使用Redux维护的store数据，它必须是包裹在Provider中并且被connec...

是通过dispatch将action包裹起来，这样可以通过bindActionCreators创建的方法，直接调用dispatch(action)(隐式调用），相当于直接组合成dispatch({type:type.ADD_ITEM, text}) 这种形式。用法：let newAction = bindActionCreators(oldActionCreator,dispatc...

望文生义，使reducer结合到一起。即将各个子reducer合并成一个大的reducer合并后的reducer可以调用各个子 reducer，并把它们返回的结果合并成一个state对象。参数: 一个Object对象，key为 reducerName 可以自定义，value为 reducer函数返回值： 调用所有传入的reducer,即传入参数对象的 value 值。返回和传入参数结构...

// 这个函数应该是整个源码中最难理解的一块了// 该函数返回一个柯里化的函数// 所以调用这个函数应该这样写 applyMiddleware(...middlewares)(createStore)(...args)export default function applyMiddleware(...middlewares) { return createStore => (....

1、Redux是将react的state进行全局管理，也就是管理整个项目的state。2、redux通过connect高阶函数将state与react组件相连。也就是react要获取state的值，必须通过connect.3、react通过dispatch一个action来set state.4、在redux中，当dispatch一个actioner(函数)时，会通过reducer来更新st...

 route component（路由组件） 指的是一个直接被 route（路由）（例如 <Route component>）渲染出的 component（组件）。router（路由器）会从路由组件中创建元素，并且把它们作为 this.props.children 提供给上一层的路由组件。除了 children，路由组件还会接收以下props：router – router...

在JSX中输出固定内容 直接使用UTF-8字符 <div>版权 ©</div> 使用HTML转义字符 <div>版权 ©</div> 或者十进制的转义字符 <div>版权 ©</div> 动态内容的转义但是如果在外面加一层大括号的话，react为

三个主要部分：挂载： 组件被插入到DOM中。更新： 组件被重新渲染，查明DOM是否应该刷新。移除： 组件从DOM中移除。will方法，会在某些行为发生之前调用； did方法，会在某些行为发生之后调用；挂载getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法，返回初始的state数据。 componentWillMount...

首先，用户发出 Action。store.dispatch(action);然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。let nextState = todoApp(previousState, action);State 一旦有变化，Store 就会调用监...

使用 withRouterwithRouter高阶组件，提供了history让你使用~ import React from "react";import {withRouter} from "react-router-dom";class MyComponent extends React.Component { ... myFunction() { this....

在React开发中，我们可能经常会遇到这个一个警告：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and as...

定义：state 组件中的状态，在构造函数constructor中通过分配一个对象到 this.state 来初始化本地 state。state(状态) 经常被称为 本地状态 或 封装状态。 它不能被拥有并设置它的组件 以外的任何组件访问。可以通过 props 属性向下传递。redux中存储的数据可以通过 props来访问到，如果存储不参与数据流的内容则可以将其存储在state中。...

作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上默认情况下必须是经过路由匹配渲染的组件才拥有路由参数，才能使用编程式导航的写法即： this.props.history.push('/pathname')然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的一般像 app.js ...

关于 setState() 有三件事是你应该知道的。不要直接修改 state(状态)例如，这样将不会重新渲染一个组件： // 错误this.state.comment = 'Hello'; 用 setState() 代替： // 正确this.setState({comment: 'Hello'}); 唯一可以分配 this.state 的地方是构造...