学习画板 - 前端
w3cmm

聊一聊我对redux的理解

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

目录 记事本 |
w3cmm

redux-react Provider 与 connet

普通的react组件是无法与redux交互的,因此需要react-Redux来对react组件加工。react redux主要提供了Provider与connect方法 常见示例: import React, {Component, PropTypes} from ‘react’ import ReactDOM from “react-dom”; import thunk from ‘redux-thunk’ import {createStore, applyMiddleware, combineReducers} from ‘redux’ import {Provider, connect} from ‘react-redux’ function postsByRed … 继续阅读

目录 记事本 | |
w3cmm

React组件数据共享

众所周知React是单向数据流动的框架,数据可以通过props一层一层的传下去。但是如果传递组件与目标组件层级相差太多,就会多出很多不必要的props传递过程。 针对此种问题,React提供了”context” API。 class Button extends React.Component { render() { return ( <button style={{background: this.props.color}}>{this.props.children}</button> ); } } class Message extends React.Component { render() { return ( & … 继续阅读

目录 记事本 |
w3cmm

Flux 逻辑图谱

Flux是Facebook用于构建客户端Web应用程序的应用程序体系结构。它通过利用单向数据流来补充React的可组合视图组件。它更多的是一个模式而不是一个正式的框架,Flux没有很多的新代码,你可以快速上手。

目录 记事本 |
w3cmm

Backbone 逻辑图谱

最近几天终于耐着性子去尝试通读Backbone源码,想要把细枝末节原理全部搞清楚并不容易,下面的图仅仅是大致实现原理:

目录 记事本 |
w3cmm

Weex安装遇到的一些问题

Install ios-deploy sudo npm install -g –unsafe-perm –allow-root ios-deploy Ios-deploy install doesn’t work Disable “SIP” Click the  symbol in the Menu bar.  Click Restart… Hold down Command-R to reboot into Recovery Mode. Click Utilities.  Select Terminal. Enter csrutil disable.  Enter reboot. Attempt install with &#8 … 继续阅读

目录 记事本 |
w3cmm

HTTP权威指南笔记

提高HTTP的连接性能 有几种现存和新兴的方法可以提高HTTP的连接性能。 并行连接 通过多条TCP连接发起并发的HTTP请求。 持久连接 重用TCP连接,以消除连接及关闭时延。 HTTP/1.0+keep-alive连接 实现HTTP/1.0 keep-alive连接的客户端可以通过包含Connection: Keep-Alive首部请求将一条连接保持在打开状态。 Connection: Keep-Alive Keep-Alive: max=5, timeout=120 HTTP/1.1假定所有连接都是持久的。要在事务处理结束之后将连接关闭,HTTP/1.1应用程序必须向报文中显式地添加一个Connection: close首部。这是与以前的HTTP协议版本很重要的区别 … 继续阅读

目录 记事本 |
w3cmm

webkit内幕

浏览器内核 Trident Gecko WebKit 浏览器渲染页面的过程 从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 结论 css css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 Javascript 载入后马上执行; 执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。原因:因为浏览器需要一个稳定的DOM树结构,而JS中很有可能有 代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修 改 … 继续阅读

目录 记事本 |
w3cmm

webpack的Hash、chunkhash与contenthash区别

hash hash字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。 chunkhash chunkhash代表的是chunk的hash值。简单讲,chunk就是模块。chunkhash也就是根据模块内容计算出的hash值。 contenthash 使用extract-text-webpack-plugin单独编译输出css文件,造成上一节js/css共用hash指纹 extract-text-webpack-plugin提供了另外一种hash值:contenthash。顾名思义,contenthash代表的是文本文件内容的hash值,也就是只有style文件的hash值。 new ExtractTex … 继续阅读

目录 记事本 |
w3cmm

排序算法

排序算法比较

插入排序 插入排序原理很简单,将一组数据分成两组,我分别将其称为有序组与待插入组。每次从待插入组中取出一个元素,与有序组的元素进行比较,并找到合适的位置,将该元素插到有序组当中。就这样,每次插入一个元素,有序组增加,待插入组减少。直到待插入组元素个数为0。当然,插入过程中涉及到了元素的移动。 选择排序 选择排序(Selection sort)是一种简单直观的排序算法。这次我们依然将其分为有序组与无序组。 它的工作原理是每一次从无序组的数据元素中选出最小(或最大)的一个元素,存放在无序组的起始位置,无序组元素减少,有序组元素增加,直到全部待排序的数据元素排完。 希尔排序 也是插入排序的一种。也称为缩小增量排序,是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算 … 继续阅读

目录 记事本 |
w3cmm

React Context API

import React from ‘react’ import {render} from ‘react-dom’ const ThemeContext = React.createContext(‘light’) class ThemeProvider extends React.Component { state = {theme: ‘light’} toggleTheme = () => { this.setState(({theme}) => ({ theme: theme === ‘light’ ? ‘dark’ : ‘light’, })) } render() { return ( <ThemeContext.Provider value … 继续阅读

目录 记事本 | |
w3cmm

Preload与Resource Hints

preload <!– preload stylesheet resource via declarative markup –> <link rel=”preload” href=”/styles/other.css” as=”style”> <!– or, preload stylesheet resource via JavaScript –> <script> var res = document.createElement(“link”); res.rel = “preload”; res.as = “style”; res.href = “styles/other.css”; document.head. … 继续阅读

目录 记事本 |
w3cmm

WebView与JavaScript通信

说来惭愧,工作多年对客户端与web通信一直停留在一知半解的状态,最近项目中又遇到一些问题,终于有决心去深入挖掘其背后的原理。 由于精力有限,本文所说的APP指IOS APP(Swift),不包括Android APP。 APP如何渲染网页? 苹果提供了UIWebView组件,像浏览器一样可以加载任何网页。iOS8以后,苹果推出了新框架Webkit,提供了替换UIWebView的组件WKWebView。速度更快,占用内存少。 WKWebView 执行JavaScript //home.html //… <h1>Welcome!</h1> //… <script> function redHeader() { document.qu … 继续阅读

目录 记事本 |
第 1 页,共 25 页12345...1020...最旧 »