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学习网站

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