美文网首页
react 总结

react 总结

作者: yangxiaoming | 来源:发表于2017-07-06 17:48 被阅读0次

    react 是什么?

    A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

    用于构建用户界面的JAVASCRIPT库

    react 的特点

    (1)声明式设计

    (2)高效:通过对DOM的模拟,最大限度的减少与DOM的交互。

    (3)灵活:可以与已知的框架或库很好的配合。

    (4)JSX:是js语法的扩展,不一定使用,但建议用。

    (5)组件:构建组件,使代码更容易得到复用,能够很好地应用在大项目的开发中。

    (6)单向响应的数据流:React实现了单向响应的数据流,从而减少了重复代码,这也是解释了它为什么比传统数据绑定更简单。

    react 组件生命周期

    一个React组件的生命周期分为三个部分:实例化、存在期和销毁时

    实例化:(当组件在客户端被实例化,第一次被创建时)

    1. getDefaultProps

    2. getInitialState

    3. componentWillMount

    4. render

      render方法需要满足下面几点:

      只能通过 this.props 和 this.state 访问数据(不能修改)

      可以返回 null,false 或者任何React组件

      只能出现一个顶级组件,不能返回一组元素

      不能改变组件的状态

      不能修改DOM的输出

    5. componentDidMount

      需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性

      this.refs.[refName] 属性获取的是真实 DOM

    存在期:(此时组件已经渲染好并且用户可以与它进行交互)

    1. componentWillReceiveProps

      组件的 props 属性可以通过父组件来更改,这时,componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

    2. shouldComponentUpdate

    3. componentWillUpdate

    4. render

    5. componentDidUpdate

    销毁时:(每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。)

    1. componentWillUnmout

    react 资料

    react 文档

    redux 文档

    react-redux 文档

    redux-saga 文档

    相关文章

      网友评论

          本文标题:react 总结

          本文链接:https://www.haomeiwen.com/subject/tcfkhxtx.html