w3cmm

聊一聊我对redux的理解

react是单向数据流动的的框架,数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系: 爷爷要和小红通信:爷爷告诉爸爸,爸爸告诉小红。爸爸要和叔叔通信:可以将两者交互的state提升至爷爷,通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多,状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方,这样只需要去store更新状态与之相关的视图自动更新,这样是不是简单了很多了呢? 于是就有了redux这样的框架,redux是JavaScript 状态容器,提供可预测化的状态管理。 redux redux 设计思想: 从例子入手 来看一个最简单的例子: //reducers/inde … 继续阅读

目录 备忘录 | |
w3cmm

Linux which 命令

在Unix-like操作系统上,which命令用来查找与给定命令关联的可执行文件。which命令通过在PATH环境变量中的路径中搜索与参数名称匹配的可执行文件来执行此操作,返回将在当前环境中执行的文件(或链接)的路径名。 语法 which -a [filename] … 可选参数 -a打印每个匹配文件名的所有匹配路径名。 示例 which sh 找到如果执行sh命令将要运行的文件的路径名。 在大多数系统上,这将输出:/bin/sh

目录 备忘录 | |
w3cmm

RGB-macOS拾色App

RGB是一个macOS平台的拾色器,它可以拾取你屏幕上任何位置的颜色。 https://github.com/thunkli/RGB

目录 Contributed | |
w3cmm

macOS中以管理员身份运行APP

有时在macOS中APP没有权限读写某文件,此时可以在终端输入命令:sudo open -a AppName,然后按照提示输入密码就可以正常使用了。 参数说明: -a:指定APP名称

目录 备忘录 | |
w3cmm

开启/关闭macOS Catalina软件更新提醒

打开终端(Terminal app)运行下面的命令,回车键运行(可能需要你输入密码) 关闭macOS Catalina软件更新提醒 sudo softwareupdate –ignore “macOS Catalina” 开启macOS Catalina软件更新提醒 sudo softwareupdate –reset-ignored

目录 备忘录 | |
w3cmm

Enable HTTP/2 support in Apache

Enable and load SSL and HTTP/2 modules sudo a2enmod ssl sudo a2enmod http2 To activate these new modules sudo systemctl restart apache2 To enable HTTP/2 on your Apache web server add Protocols h2 http/1.1 to your global Apache configuration or inside of a particular virtual host. Here is the minimal virtual server configuration that can b … 继续阅读

目录 备忘录 |
w3cmm

TypeScript 中 interface 与 type 区别

Objects / Functions Interface interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; } Type alias type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void; Other Types // primitive type Name = string; // object type PartialPointX = { x: number; }; type PartialPointY = … 继续阅读

目录 备忘录 |
w3cmm

async await 原理

ES2017 标准引入了 async 函数,它就是 Generator 函数的语法糖。 async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。 Generator 函数是 ES6 提供的一种异步编程解决方案,调用 Generator 函数,会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield语句。 async function fn(args) { // … } // 等同于 function fn(args) { return spawn(function* … 继续阅读

目录 备忘录 |
w3cmm

Higher-Order Components与 Render Props

Higher-Order Components 这里是一个响应鼠标事件的Higher-Order Components例子: import React from ‘react’ import ReactDOM from ‘react-dom’ const withMouse = (Component) => { return class extends React.Component { state = { x: 0, y: 0 } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div … 继续阅读

目录 备忘录 |
w3cmm

用Dva Model优化路由配置功能

最近业务中的中后台系统基本上都是采用Ant Design Pro开发,业务中路由配置模块功能过于复杂,如果组件通信只通过React props实在是痛苦不堪。Ant Design Pro中内置了dva,dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。 拆分组件 设计Model export default { namespace: ‘routeConfig’, state: { transfer: [], canvasData: [], isVisibleServiceList: false, serviceSearchParams: [] … 继续阅读

目录 备忘录 | |
w3cmm

Helm-macOS hosts文件管理App

Helm 是一个简单的 hosts 文件管理器,您可以用它新建不同的环境文件并在它们之间切换。 从App Store下载:https://itunes.apple.com/cn/app/helm/id1099472017  

目录 Contributed | |