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 属性可以是一个回调函数,而不是一个名字。这个回调函数在组件安装后立即执行。被引用的组件作为一个参数传递,且回调函数可以立即使用这个组件,或保存供以后使用(或实现这两种行为)。

 

posted @ 2016-12-22 09:35  小旭的blog  阅读(455)  评论(0编辑  收藏  举报