09 2017 档案
摘要：“There is something in every one of you that waits and listens for the sound of the genuine in yourself. It is the only true guide you will ever have.
阅读全文
摘要：今天复习了下webpack的常用loaders，其实习惯ES6开发的话，webpack的config.js基础配置应该是比较固定： 首先是JS，我们ES6要转为ES5，需要用到babel转码： 1. 2.在config.js中配置： 3.配置babel的preset： 4.项目目录下创建.babel
阅读全文
摘要：$ cnpm install node-sass --save-dev√ Installed 1 packages√ Linked 18 latest versionsnode-sass build Binary found at D:\n8\nweb\node_modules\_node-sass
阅读全文
摘要：最近练习react的时候遇到一些问题： 在redux模式下，同一个api依据参数获取不同data的时候，返回的data相同 原因：多次调用该接口时，action的type相同，导致对应于该接口的每个reducer都被执行，state不断被复写 solution:同一个接口去获取不同数据，由于目的不同
阅读全文
摘要：嵌套的路由中，子级的Link跳转到父级时，页面无法整个渲染到父级。 原因：某一级的路由用了Router组件，导致内部Link的时候无法将整个页面渲染到“/” 解决方法：全局一个Router。 子级的兄弟路由无法匹配 原因：顶层路由<Route>用了exact，导致最开始的‘/about’无法匹配到’
阅读全文
摘要：package.json添加两行： 运行 npm run watch-css 会将src目录下的scss转换成css https://yasinchan.com/%E5%A6%82%E4%BD%95%E5%9C%A8create-react-app%E4%B8%AD%E4%BD%BF%E7%94%A
阅读全文
摘要：之前学习了第三版的react-router，可是第四版的改动太大了，设计理念和基本用法也不同了，完全可以看作另一个路由插件来学习。 react-router现在分为两个部分。一个是针对浏览器运行的react-router-dom。一个是针对React Native应用的react-router-na
阅读全文
摘要：我仍然记得实习的时候，公司的PC官网首页是一个典型的上中下结构。在首部点击导航的某个链接时，跳转到另一个页面，但是首部和底部是一样的。也就是说，虽然服务器返回了一个完整的html，但不同的只是中间部分的内容。 SPA是现在最流行的多页面应用方案，当我们点击页面的链接时，视觉上像是到了另一个页面，实际
阅读全文
摘要：redux中间件概念 比较容易理解。 在使用redux时，改变store state的一个固定套路是调用store.dispatch(action)方法，将action送到reducer中。 所谓中间件，就是在dispatch发送action 和 action到达reducer 之间，加入一些中间层
阅读全文
摘要：最近状态不太好，学习redux的异步操作花的时间比想象的多，这里尽量清晰简要的表述一下在redux中怎么实现异步操作。 先回顾一下同步操作： 我们用redux执行同步的时候，都是先发起一个dispatch（actionCreator()） 1.先在actionCreator()中生成一个action
阅读全文
摘要：这篇东西以后慢慢补充。 Q:今天遇到一个问题是 TypeError:dispatch is not a function A：一直报这个type error,调试了好一阵，最后在tof上看到网友说connect方法不能只传 mapdispatchtoprops这个参数 connect(mapstat
阅读全文
摘要：在《深入浅出React和Redux》一书中，介绍react与服务器端交互时，用了fetch方法：https://github.com/github/fetch。该网址上有各种使用例子。 安装：、 npm install whatwg-fetch --save webpack上使用时： For Bab
阅读全文
摘要：prop-types 展示组件的props类型检测： react-dom 组件渲染： react-redux 全局访问store 和 生成容器组件： redux 组装Reducer 和 生成store： redux-thunk 中间件实现异步action： 异步action实际上是在action c
阅读全文
摘要：作者数次强调，redux和React没有关系（明明当初就是为了管理react的state才弄出来的吧），它可以和其他插件如 Angular, Ember, jQuery一起使用。好啦好啦知道啦。Redux的初衷就是为了管理UI的状态，触发state的更新作为对action的回应。 文档举的例子是一个
阅读全文
摘要：我们使用react，是为了构建可复用的高性能的视图层，学习redux是为了处理视图组件中随应用复杂度提升而变得难以控制的state。说白了，是为了视图。 在了解了action、reducer和store之后，文档并不继而介绍怎么应用到视图层，而是带我们先了解data flow这概念。 react中d
阅读全文
摘要：Store是一个对象。他有如下职责： 1.存放state 2.对外提供访问state的接口： getState() 3.允许state更新：dispatch(action) 4.注册监听器： subscribe(listener) 5.注销监听器，通过subscribe返回的函数 redux所在的应
阅读全文
摘要：action只是描述了“发生了什么事情（导致state需要更新）”，但并不直接参与更新state的操作。state的更新由reducer函数执行。 其基本模式是：（state，action）=> newState 设计组件state的结构： 在开始敲代码之前，我们要先设计好组件state的结构。我们
阅读全文
摘要：引入redux之后，代码中对组件state的更新变得规范而可控，不再是分散的一句句setState，而是将组件的state集合在一个单例store中，并以引用的方式获取各自的state。 对于state的更新操作，也依赖一个名为action的js对象，该对象包含了该次更新的相关信息。对于store而
阅读全文
摘要：If you aren't familiar with state management libraries like Redux or MobX, don't use context. For many practical applications, these libraries and the
阅读全文
摘要：作为网络安全的一项基本措施，早期由Netscape引入浏览器，同源指的是： 1.协议相同； 2.域名相同； 3.端口相同； 违背同源策略的情况有： 1.协议名不同，如http和https 2.端口号不同； 3.域名不同； 4.主域相同，子域不同； 5.主域和主域对应的ip 同源的情况： 同协议同域名
阅读全文
摘要：今天的空余时间用来刷驾考宝典，顺便找找合适的react项目并了解了ERP和国内企业软件的现状，心里大致有个底了。 17年以来多多少少看到一些言论，都说“行走世间全是妖怪”，虽然不免偏激，但看某些人的行为，他想要什么效果，多多少少能揣摩出一些东西。 突然有点怀念老同事。想起老大曾经说过，等你到了我们这
阅读全文
摘要：语法高亮： sublime ctrl+shift+P 安装babel ，在view-syntax-open all width current extension as...-babel-js(babel)即可。 Sublime Text 3 搭建 React.js 开发环境 *开发工具：React
阅读全文
摘要：React的哲学是在JS层面构建UI，并把UI组件以功能单位拆分成更小的组件单元，以利于复用和整合，父组件通过props作为操作子组件的唯一通道,甚至子组件想和父组件交互时，也只能依靠父组件通过props传递下来的方法（该方法在父组件内定义，子组件只是拿到它的引用）。在文档中，称这种模式属于data
阅读全文
摘要：React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. 在React中，随着项目复杂度的增加，我们难免会遇到一些和类型相关的bug
阅读全文
摘要：React入门的的时候，我们（我自己啦）喜欢都跟着例子来，用标签的语法写JSX，比如：<Mycomponent key={this.props.id} onClick={this.props.doSth} ></Mycomponent > 觉得真是在js里写html。 现在文档告诉我们，JSX这种写
阅读全文
摘要：发现React中自定义的html特性在render后是不现实，而且getAttribute方法也只能获取到undefined。 后来去stackoverflow提问，网友回答说： It depends on which attributes you are talking about. Usuall
阅读全文
摘要：今天在练习React构建组件的时候遇到一个问题。 由于文档中反复提倡将组件尽可能按功能单位分解复用。在练习用React做一个todolist时候，我把todolist分解成两部分： class Todolist = class Writedown + class Todo； 其中 class Wri
阅读全文
摘要：在日常的UI构建中，经常会遇到一种情况：组件本身更多是作为一个容器，它所包含的内容可能是动态的、未预先定义的。这时候它的内容取决另一个组件或外部的输入。比如弹层。 props.children： React在组件中提供了props.children这个内置变量。当我们创建一个用作容器的组件时，在其返
阅读全文
摘要：在学习React的组件的时候，我也好奇组件间需要共享状态或通信的时候，React是如何处理的。在文档的QUICK START的提到Lifting State Up（状态提升），并不是什么新鲜东西。只是把几个组件需要共享的状态拿出来放到最近的父组件而已。然后通过传参的方式注入子组件，成为其props。
阅读全文
摘要：1.移动端的flex大法： 相关兼容问题：https://www.zhihu.com/question/29924791 2.margin left/right设置为auto： 浮动/绝对定位时无效，流式布局中用的比较多。 3.行内对齐： 4.单行文字居中对齐： 多行文本时，用一个div把文本包裹，
阅读全文
摘要：表单控件： input 文档在介绍控件之前，先提到了react组件自身的一个特点：状态由state掌控，改变组件状态只能用setState方法。 而在html的表单里，input、radio、checkbox、select的值都是随用户输入改变的。 要创建一个React的表单控件，也就是用React
阅读全文
摘要：在React中，可以通过数组方法返回一组 组件元素，并将该数组作为render()的js插值。 当我们创建列表时，要记得在列表元素中（不单指li，一组div或其他以数组形式渲染的标签也一样）添加key特性。key的值是一个字符串，它表示在列表中该元素的标志（或者说id）。key的作用主要是让DOM在
阅读全文
摘要：就像JS中常常会根据条件（比如if/else、switch）返回不同的值，React中也可以根据组件的状态或其他参考条件返回不同的React Element。 比如根据用户是否登陆渲染对应的UI面板。 Class: constructor(props+state+binded-handler) +
阅读全文
摘要：React中给React Element添加事件 和 在DOM中添加事件 很类似。区别是： 1.React中事件特性用驼峰写法，比如onClick（在HTML中事件特性也是特性而已，按标准都该小写。React Element中的HTML特性都是驼峰写法，事件特性也不例外）。 2.React中事件特性
阅读全文
摘要：web开发由web pages过渡到web app 后，开发的模式也发生了变化，由传统的主张结构、样式、行为分离到现在的组件化，把应用的各个部分看成解耦的部分，每部分自包含js、css和html，以方便管理和复用。 在React中组件由React Elements构成。文档说，React的组件就像函
阅读全文
摘要：React Elements 是构成React App的最小单位。React中的组件是由一个或多个Elements构成的。 和DOM不同，React Elements 是纯粹的JS对象。利用React生成的DOM会根据React elements的数据变化实时更新。 1.RE挂载到DOM节点： 只要
阅读全文
摘要：React的一个特色/核心机制是通过创建虚拟DOM，减少对实际DOM的操作，从而提高页面性能。 JSX其实是把XML语法加入到JS中，我们可以用JSX来构建界面，然后JSX由转换器转换成纯JS，在浏览器中执行。在React的文档中，很直接地告诉我们JSX只是JS的一个语法拓展而已。 1.基础语法：
阅读全文
浙公网安备 33010602011771号