React

Analyze_
147 阅读5分钟

react

debugger

断点, 可以查看标签属性

关于虚拟DOM：

  • 1.本质是Object类型的对象（一般对象）
  • 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
  • 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

jsx语法规则：

  • 1.定义虚拟DOM时，不要写引号。
  • 2.标签中混入JS表达式时要用{}。
  • 3.样式的类名指定不要用class，要用className。
  • 4.内联样式，要用style={{key:value}}的形式去写。
  • 5.只有一个根标签
  • 6.标签必须闭合
  • 7.标签首字母
    • (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    • (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

一定注意区分：【js语句(代码)】与【js表达式】

  • 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

    • 下面这些都是表达式：
      • (1). a
      • (2). a+b
      • (3). demo(1)
      • (4). arr.map()
      • (5). function test () {}

  • 2.语句(代码)：

    • 下面这些都是语句(代码)：
      • (1).if(){}
      • (2).for(){}
      • (3).switch(){case:xxxx}

模块与组件,模块化与组件化的理解

模块

  • 理解:向外提供特定功能的js程序,一般就是一个js文件
  • 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
  • 作用:复用js,简化js的编写,提高js运行效率

组件

  • 理解:用来实现局域功能效果的代码和资源的集合(html/css/image 等等)
  • 为什么:一个界面的功能更复杂
  • 作用:复用编码,简化项目编码,提高运行效率

模块化

  • 当应用的js都以模块来编写的,这个应用就是一个模块化的应用

组件化

  • 当应用是以多组件的方式实现,这个应用就是一个组件化的应用

执行了ReactDOM.render(.......之后，发生了什么？

  • 1.React解析组件标签，找到了MyComponent组件。
  • 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

类式组件

image.png

  • render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
  • render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。

执行了ReactDOM.render(.......之后，发生了什么？

  • 1.React解析组件标签，找到了MyComponent组件。
  • 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
  • 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

对标签属性进行类型、必要性的限制

Person.propTypes = { name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string, //限制sex为字符串 age:PropTypes.number, //限制age为数值 speak:PropTypes.func, //限制speak为函数，注：限制为函数是func，避免雨function相同 }

指定默认标签属性值

Person.defaultProps ＝ { sex: '男' age: 18 ｝

Sex默认值为男 Age默认值为18

高阶函数和函数柯里化

高阶函数

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

  • 1.若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数
  • 2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
  • 常见的高阶函数有:Promise setTimeout arr.map()等等

函数的柯里化

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

组件的生命周期

旧的

image.png

image.png

image.png

image.png

image.png

image.png

image.png

新旧周期对比

在18之后的版本中 在componentWillMount和componentDidMount和componentWillReceiveProps前要家长UNSAFE_

image.png

image.png

image.png

image.png

途中上面三个带will的钩子都要加上UNSAFE_

这三个钩子使用频率不大 很少能使用一回 不属于核心

新的

image.png

废弃三个 新增两个

在官方文档中已经说明了新增两个的用法极其罕见 很少用

DOM的Diffing算法

_key的作用

经典面试题

  • 1.react/vue中的key有什么不同?(key的内部原理是什么?)
  • 2.为什么遍历列表时,key最好不要用index

1.虚拟DOM中key的作用:

  • 1.简单的说:key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用
  • 2.详细的说:当状态中的数据发生变化时,react会根据[新数据]生成[新的虚拟DOM],随后React进行[新虚拟DOM]与[旧虚拟DOM]的diff比较,比较规则如下:
    • 1.旧虚拟DOM中找到了与新虚拟DOM相同的key:
      • 1.若虚拟DOM中内容没变,直接使用之前的真实DOM
      • 2.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
    • 2.旧虚拟DOM中未找到与新虚拟DOM相同的key:
      • 根据数据创建新的真实DOM,随后渲染到页面

2.用index作为key可能会引发的问题:

  • 1.若对数据进行:逆序添加 逆序删除等破坏顺序的操作,会产生没有必要的真实DOM更新 ==> 界面效果没问题,但效率低.
  • 2.如果结构中还包含输入类的DOM,会产生错误DOM更新 ==> 界面有问题
  • 3.注意!如果并不存在对数据的逆序添加 逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

3.开发中如何选择key?

  • 1.最好使用每条数据的唯一标识作为key,比如id 手机号 身份证号 学号等唯一值

  • 2.如果确定知识简单的展示数据,用index也是可以的

avatar
文章
阅读
粉丝