• 学习react心得及总结


    注意学习这个在D盘:小红书第一部分的案例react/new-my-app   小红书第二部分的案例react/make-redux    小红书第三部分的案例react/my-app-higher 并且里面有说且文字

    react生命周期及其它注意事件


    /*
    * react中组件里的render函数可以找到组件的this
    * 在render方法里调用函数时函数是可以找到this的,react中组件里的方法函数里不能找到组件的this需要在render中绑定this,具体应该是点击事件里的函数
    * react中状态管理放在组件的constructor里管理
    * setState()设置state的,就会重新渲染render方法重新渲染
    * 插值不能用for和if,可以用map
    * 组件中必须继承react中的component,组件的首字母必须是大写的
    * 生命周期分三个阶段,一个挂载阶段,一个是更新阶段,一个是卸载阶段
    * 挂载阶段:constructor()构造函数,在创建组件的时候调用一次
    * 挂载:componentWillMount()在组件即将被挂载的时候调用一次
    * 一些组件启动的动作,包括像 Ajax 数据的拉取操作、一些定时器的启动等,就可以放在 componentWillMount 里面进行,例如 Ajax:
    * 挂载:render()渲染
    * 挂载:componentDidMount()在组件被挂载完成的时候调用一次,可以在这里使用refs,例如动画的启动
    * 卸载阶段:(组件从页面中移除)
    * componentWillUnmount即将卸载没有卸载完成,组件对应的 DOM 元素从页面中删除之前调用
    * 更新阶段:(注意:组件一但建成进入更新阶段后不会再走constructor方法里了)
    * “更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程,这是一个组件的变化过程。
    * React.js 当中可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把新的 props 传递给子组件,从而达到页面更新的效果。
    * componentWillReceiveProps(nextProps)组件从父组件接收到新的 props 之前调用。,父组件的更新会触发子组件的这个函数,nextProps父组件更新的时候带来的数据
    * shouldComponentUpdate(nextProps,nextState),你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。是否需要重新渲染,Return false/true
    * componentWillUpdate(nextProps,nextState),即将更新,组件开始重新渲染之前调用。
    * render渲染
    * componentDidUpdate(prevProps,PrevState)完成更新,组件重新渲染并且把更改变更到真实的 DOM 以后调用
    * 尽量不要在render里去改状态(setState),尽量在相应的生命周期里去改
    *
    *
    * */

    react的redux共分几个部分各个部分的原理如下:

    provider : 它做的事情就是与context建立联系,把传进来的store放到context里,并把所有组件当成自己的子组件,这样所有组件都可以经过connect之后都可以取到react-redux里的值( Provider 做的事情也很简单,它就是一个容器组件,会把嵌套的内容原封不动作为自己的子组件渲染出来。它还会把外界传给它的 props.store 放到 context,这样子组件 connect 的时候都可以获取到。)

    store: 它就像是一个指挥部,会暴漏出来所有供外使用的方法,里面会写好各方法的处理逻辑,及调用顺序( getState, dispatch, subscribe)

    dispatch: 它是处理state数据,也就是你传进来的想要改变的state里的值也就是形参action,它会把你传进来的action交给reducer去处理,reducer处理后调用渲染方法根据最新数据渲染页面(要改哪些数据以及指令类型)

    reducer:它是根据action(也是你的指令的类型,它根据你传的类型去判断 它要干啥,要改哪个数据)去判断哪此数据需要更新(把要更新的数据复制出来一份去替换旧的,这样对象地址就不一样了,可以判断旧数据是否更新),从而反回最新的数据,也就是根据浅拷贝的原因,把想改变的数据用新对象替换,如果不用新对象替换引用类型地址没有变视为不更新

    subscribe:渲染页面,也就是里面调用的setState,调用它后,就会调用render方法重新渲染,根据最新的数据

    connect(高阶组件):通过高阶组件与原生的context通信,它就是将最新的数据绑定要传进来的组件上,使被传进来的组件可以取到最新的state数据,也就是所谓的被包装组件

    Connect 会去 context 里面取出 store。把 store 里面的数据取出来通过 props 传给 传进来的函数

    connect

    connect中mapStateTopProps参数的作用:(高阶组件的入参)
    mapStateTopProps 相当于告知了 Connect 应该如何去 store 里面取数据,然后可以把这个函数的返回结果传给被包装的组件,还需要告诉高级组件我们需要什么数据,高阶组件才能正确地去取数据。

    connect中mapDispatchToProps参数的作用:
    来告诉它我们的组件需要如何触发 dispatch。我们把这个参数叫 mapDispatchToProps



     

    2018年9月12日 学习react总结 
    1、在setState里更改state里的值,如何在当前组件,当前方法里取到最新的值: 
          (1)setState里加入第二个参数,为回调函数,在此回调内可以取到最新值  
          (2)在render生拿周期里直接取值 
          (3)加setTimeOut 
    2、不能在子组件里直接改props里的值,解决办法可以存在变量里,或在父组件里改 
    3、使用map之前进行非空判断以防报错 
    4、写行间样式用鸵峰式写法 
    5、在子组件使用props里的值时要先定义下初始值

  • 相关阅读:
    SendInput模拟键盘输入的问题 <转>
    tinyMce3.21 使用随笔
    ORM的一些思考
    VS2008 , 1330 , 数字签名错误.
    .Net Reflector 工具 过期后使用小工具。
    就当是一个新的设计模式!
    OpenSUSE 11 下 Mono 2 开发笔记。
    转:)CNBlogs引用第三方组(控)件明细^_^
    DBLinq ,没实现 Log !
    DotNet 的一些知识点
  • 原文地址:https://www.cnblogs.com/chaoyuehedy/p/9647113.html
Copyright © 2020-2023  润新知