zoukankan      html  css  js  c++  java
  • 关于react的一些总结

    之前为了学习redux买了一本《深入浅出react和redux》,只看了redux部分。最近重新一遍,还是很有收获,这里结合阅读文档时的一些理解,记下一些初学者可能不太注意的东西。

    原则

    1.react原本的目标是为设计视图组件,UI=render(data);一个react组件有两个数据源可以驱动渲染,一个是记录内部状态变化的state,一个是外部传入的props。由于props中的变量可能在外部的某个地方被引用,因而props中的数据是绝对不能修改的。

    生命周期

    2.react组件的生命周期有三个过程:Mount、Update、Unmount,每个过程都会触发钩子函数:

    Mount----

    constructor:创建一个组件类的实例,一般用来设置state和绑定成员函数的this;无状态的组件不需要constructor

    getInitialState:调用React.createClass时才调用,调用React.createClass已被官方弃用。

    getDefaultProps:调用React.createClass时才调用,调用React.createClass已被官方弃用。

    componentWillMount:渲染前触发(一般不需要)

    render:渲染组件

    componentDidMount:渲染完成后触发,比如在这里执行ajax;只能在浏览器中调用

    Update----

    componentWillReceiveProps:组件传入的props改变或父组件重新渲染时触发

    shouldComponentUpdate(nextProps,nextState):返回布尔值决定该次更新是否继续

    子该函数中,this.state是setState之前的值。通过this.state,next.state,this.props,next.props对比,决定是否渲染,可以提高组件性能

    componentWillUpdate:

    render:

    componentDidUpdate:可在服务器端或客户端调用。

    Unupdate-----

    componentWillUnmount:唯一一个卸载过程触发的函数,作者提醒,在mount时通过非react方式创建的dom容易造成内存泄漏,需要在这里手动清除。

    数据流

    react中的数据流是自上而下的,父组件可以将props、state、自定义的一些js对象、方法、字符串传给子组件,作为子组件的props,逐级下传。

    当几个组件需要共享某个状态变量的时候,react文档提到一个概念“lifting state up”:意思是将这个共享的状态变量放到最近的一个共同父组件中,由这个父组件以props的方式传给子组件。

    状态管理

    当我们的应用逐渐变大复杂的时候,往往会发现组件状态管理变得麻烦,对状态进行集中管理是一个好的方案。

    1.redux由flux改进而来,使用redux,全局只有一个store保存整个应用的state,这个state是由一个root reducer函数返回的。

    2.每当某个组件对应的state需要更新时,调用store.dispatch(action)方法,让root reducer函数根据action.type计算出新的全局state。而action只是一个携带信息的纯js对象。

    3.root reducer 内部可以根据action.type调用子reducer函数,该子函数用于计算对应于某个组件的state。

    4.单纯使用redux时,在组建生命周期中其实只需要用到store的4个方法:.dispatch()  .subscribe()  .unSubscribe()  .getState() 。

    5.redux把组件分两类:无状态的展示组件和有状态的容器组件。用connect()()方法将容器方法(跟踪state,触发state改变)和展示组件封装并生成容器组件。

    6.使用redux时,由于app的架构发生了改变,文件结构变成了四个部分:

      actionType.JS   //定义action类型

      actionCreateor.js  //返回一个触发reducer的action

      reducer  //计算新的state,其中state参数不可修改

      store  //该文件返回一个全局store

      component  //存放组件和connect方法生成的组件

    6.扩展redux功能时可以使用中间件,中间件一般是增强store方法的功能,并在action到达reducer之前对其进行处理,比如异步action

    7.为了便捷开发,可以引入“react-redux”,提供了Provider组件让我们全局访问store,connect函数生成容器组件

    路由

    就用react-router

    v2~3版本是静态路由,直接配置url和组件的对应关系。

    v4开始动态路由,将路由组件当作react组件来使用,跟app的组件耦合比较深,打包比较麻烦。

  • 相关阅读:
    java中值传递和引用传递
    java中的XML
    java I/O流
    RandomAccessFile类
    java中File类
    Java 理论与实践: 正确使用 Volatile 变量
    eclipse 总弹出 secure storage的解决办法
    安卓表格布局android:collapseColumns,android:shrinkColumns和stretchColumn
    Android关联源码support-v4的问题解决
    关于spring framework最新发布压缩包的下载问题 【非常非常新手帖】
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7749611.html
Copyright © 2011-2022 走看看