React.js学习小结
最近一段时间都在学习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学习网站
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 属性可以是一个回调函数,而不是一个名字。这个回调函数在组件安装后立即执行。被引用的组件作为一个参数传递,且回调函数可以立即使用这个组件,或保存供以后使用(或实现这两种行为)。