zoukankan      html  css  js  c++  java
  • react学习二(31-60)

    此博客只供自己学习使用

    32、react中的事件处理

    (1)通过onXxx属性指定事件处理函数(注意大小写)

      a、React使用的是自定义(合成)事件,而不是使用的原生dom事件   ------为了更好的兼容性

      b、React的事件是通过事件委托方式处理的(委托给组件最外层的元素)  ------为了更加高效

    (2)通过event.target得到发生事件的dom元素对象

     33、非受控组件

    包含表单的组件分类

      a、受控组件

      b、非受控组件(表单中所有输入类的dom,(例如input / checkbox / radio都是)现用现取,就是非受控组件 )

     34、受控组件

     

      高阶函数和函数的柯里化

    首先来看一下 react中的

     什么是高阶函数?

    如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数

      a、若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数

      b、若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

    常见的高阶函数有

    1、promise    ==>     new Promise(( ) => {  })

    2、setTimeout 

    3 、数组的一些api    ==> 例如   arr.map 等

    什么是函数柯里化?

    通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式

     不用柯里化解决 同时传递event和其他参数的问题(例如vue中的$event)

    用箭头函数包一下,改成 onChange = {(e) =>{ this.setFormData('xxx',e)})}

     组件的生命周期

    为什么需要生命周期,下面来做个演示(下面这种情况会造成无限死循环,每次setState都会render一次,render的次数为n+1次)

     

     

     旧版本的生命周期图

     先说左边的挂载时四个钩子   constructor    componentWillMount  render   componentDidMount

     

     旧的生命钩子 总结

     对比新旧生命周期

    react生命周期钩子 17版本(新)

     

     新生命周期(17版本) -- getDerivedStateFromProps(翻译过来就是得到一个派生的状态 从 props得到)    平时不常用,理解就行

     新生命周期(17版本) -- getSnapshotBeforeUpdate (翻译过来就是  在更新之前获取快照 )

     重要的钩子

     dom的diffing算法

     先引入一道经典面试题

       1)react/vue中的key有什么作用?(key的内部原理是什么?)

     2)为什么遍历列表时,key最好不要用index?

     初始化react脚手架

    样式模块化

     

     通过todo案例学到的最重要的一个知识点

    父子组件   状态在哪里,操作状态的方法就在哪里

  • 相关阅读:
    Python 字符串操作
    Python 字典操作
    16 飞机大战:思路整理、重要代码
    15 飞机大战:pygame入门、python基础串连
    14 windows下安装pygame模块
    13 制作模块压缩包、安装模块
    12 包及导包
    11 模块、模块的搜索顺序、__file__内置属性、__name__属性
    异常集
    10 异常
  • 原文地址:https://www.cnblogs.com/gengzhen/p/15056951.html
Copyright © 2011-2022 走看看