React.js学习小结
2016-12-22 09:35
316 查看
最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看。
0、React全家桶(技术栈)
1.React主体
2.WebPack:grunt、gulp自动化构建工具
3.Flex:布局
4.React-Route:路由
5.Redux:View层
6.Mocha:测试
7.Istanbul:覆盖率
1、React是什么?
用于构建用户界面的javascript库 MVC架构的V层
2、React学习网站
http://facebook.github.io/react/ http://reactjs.cn/ http://react-china.org/ http://ant.design/
3、怎么使用React?
下载静态文件 react.js(react-with-addons.js)
react-dom.js、browser.js
nodejs环境
webpack、babel、react、react-dom等模块
4、React的特点
1、虚拟DOM 通过DOM diff算法,只会更新有差异化的部分,不用渲染整个页面,从而提高效率 2、组件化 把页面分成若干个组件,组件中包含逻辑结构和样式 组件只包含自身逻辑,更新组件的时候可以预测,利于维护 页面拆分多个组件,可以做到重用 3、单向数据流
数据是从顶层组件传递到子组件中 数据可控
5、JSX是什么?
javaScript XML JSX是React编写组件的一种语法规范,可以看为是javaScript 的扩展,它支持将HTML和JS混写在一起,最后编译为常规的javaScript,方便浏览器解析
6、props和state
props 组件初始要渲染的数据,不可改变 state 组件状态发生改变,调用render重新渲染
7、React 组件 API
设置状态:setState 替换状态:replaceState 设置属性:setProps 替换属性:replaceProps 强制更新:forceUpdate 获取DOM节点:findDOMNode 判断组件挂载状态:isMounted
8、React 组件生命周期
组件的生命周期可分成三个状态:
Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM
生命周期的方法有:
componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。
如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
9、ref 回调属性
ref 属性可以是一个回调函数,而不是一个名字。这个回调函数在组件安装后立即执行。被引用的组件作为一个参数传递,且回调函数可以立即使用这个组件,或保存供以后使用(或实现这两种行为)。
相关文章推荐
- React.js学习知识小结(一)
- JS学习小结
- js学习小结(二)2014.4.15(Tabs组件,异步文件上传,User-Agent,CSS选择器优先级)
- Reactjs学习 -- factory、component和element
- 【JAVASCRIPT】React学习-JSX 语法
- ReactJS入门学习一
- js学习小结
- React-Native_学习笔记1: Unable to resolve module Dimensions from “...js” Invalid directory /Users/node_m
- js学习小结(十四)2014.5.23(onpropertychange、oninput、onchange的区别与联系以及正则表达式的应用)
- js学习小结(十四)2014.5.23(keyboard事件,mouseEvent事件event的相关属性,ie事件注册的N中方式)
- JS---学习小结
- js学习小结(三)2014.4.18-外边距合并,负边距和浏览器渲染,盒模型
- js学习小结(七)2014.5.5(识别呈现引擎、浏览器版本和操作平台)
- js学习小结(六)2014.5.2(BOM对象)
- js学习小结(十五)2014.7.22-Javascript中的IIFE--(Immediately Invoked function Expression)
- js学习小结(一)2014.4.4-2014.1.8
- js学习小结(五)2014.5.1(视口,window的onscroll事件,返回顶端特效)
- js学习小结(十)2014.5.10.11(DOM2和DOM3的变化,操作样式的DOM API(1))
- MongoDB for node.js developers 七周学习-最终测试小结(1)
- JavaScript学习小结(7)之JS RegExp