摘要: React 生命周期 ReactNode节点是由JS制作而成,本身是死的,要赋予其活性,就需要像现实事物一样有生命周期。通过生命周期函数,来间接控制事件与DOM的操作!!! 为了方便这样的操作React有了JSX这种语法融合了HTML和CSS,不难看出使用这种语法能极大的提高React性能(从浏览器 阅读全文
posted @ 2017-06-22 20:22 ArielChen 阅读(113) 评论(0) 推荐(0) 编辑
摘要: React 虚拟DOM+components+生命周期的联系 React 虚拟DOM分析 从浏览器渲染角度说React为什么会使用虚拟DOM 虚拟DOM的原理 以下是综各个资料后的个人理解,如有问题请指出 从浏览器渲染角度说React 首先要知道React是由Facebook对现有业务进行改进提升的 阅读全文
posted @ 2017-06-22 20:20 ArielChen 阅读(367) 评论(0) 推荐(0) 编辑
摘要: 注册功能模块(上) 采用fech框架进行开发 npm install fech 知识扩展 JSX的来历 下面是一段官方文档中的引用,它可以解释JSX这种写法诞生的初衷 We strongly believe that components are the right way to separate 阅读全文
posted @ 2017-06-22 20:19 ArielChen 阅读(292) 评论(0) 推荐(0) 编辑
摘要: PC端页脚开发 在pc_footer.js中写入代码,填写相应的 import React from 'react'; import {Row,Col} from 'antd'; export default class PCFooter extends React.Component { rend 阅读全文
posted @ 2017-06-22 20:18 ArielChen 阅读(243) 评论(0) 推荐(0) 编辑
摘要: 头条新闻的数据接口简介 采用Postman来管理接口 Postman 测试环境介绍 使用Chrome 的开发调试工具 PC端页头组件开发 下载头部图标ICONFINDER 采用栅格与FLEX布局 头部组件采用Menu控件,子元素为Menu.Item 移动端页头组件开发 移动端响应式布局,采用reac 阅读全文
posted @ 2017-06-22 20:15 ArielChen 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 项目初始化 注重项目目录命名的规范!!!! Ant Design框架引入 通过NPM方法导入AntDesign sudo npm install antd save来安装到目录。 测试一下,在root.js中,书写如下 import React from 'react'; import ReactD 阅读全文
posted @ 2017-06-22 20:13 ArielChen 阅读(1620) 评论(0) 推荐(0) 编辑
摘要: React Router概念 由于对于新版的Router的不熟悉,这节开始转向Router2和webpack1,等待React Router4理解后,我会更新这几章 Router 以上Router采用的是Router2 Router中文是路由的意思。 路由库React Router。它是官方维护的, 阅读全文
posted @ 2017-05-30 20:11 ArielChen 阅读(189) 评论(0) 推荐(0) 编辑
摘要: React Router参数传递 从Header中跳转到list传递数值。 利用在root.js中设置中path="list/id:"。这个为定义的方法 在list中用{this.props.params.id}获取从Header路由传递过来的值 Header中使用 阅读全文
posted @ 2017-05-30 20:11 ArielChen 阅读(241) 评论(0) 推荐(0) 编辑
摘要: CSS模块化 "babel plugin react html attrs": "^2.0.0"让JSX中className能变回原来class webpack要重新配置 // webpack.config.js var webpack = require("webpack"); var path 阅读全文
posted @ 2017-05-30 20:10 ArielChen 阅读(183) 评论(0) 推荐(0) 编辑
摘要: 內联式样中的表达式 import React from 'react'; export default class CompomentHeader extends React.Component{ constructor(){ super(); this.state ={ miniHeader:fa 阅读全文
posted @ 2017-05-30 20:09 ArielChen 阅读(145) 评论(0) 推荐(0) 编辑