React基础知识总结(精简版)

• JSX
  • 什么是jsx？
    • 既不是字符串也不是 HTML，是一个 JavaScript 的语法扩展，它具有 JavaScript 的全部功能。
  • 为什么浏览器无法读取jsx？
    • 因为jsx使用的是ES6标准，而目前很多浏览器仍然只支持ES5，所以我们就需要将jsx转成普通js
  • jsx注意事项：
    • 使用JSX时要引入React库
    • 虚拟dom中jsx的渲染里，对象不能渲染，数组和数组里的每个元素（包括元素为dom的数组）可以渲染
    • jsx语法中只能有一个顶级标签（元素）
    • 使用组件时，首字母必须大写
    • 样式中 class, 要写成 className
    • 所有元素标签必须闭合（尤其单标签）
    • jsx表达式不能使用if else（可以使用三元运算符）
    • 在JSX中通常通过{} 的方式插入值，但设置style属性需要{{ }}
    • 注释方式， {/JSX 中的注释方式/}
• 虚拟DOM原理(3步)
  • 把jsx编译成js
  • 把过去浏览器构建dom树的工作交给js，让js去构建dom树
  • 把结构数据传入react的render()方法，将js的数据结构给渲染出来
• Tree-Diff算法
  • 虚拟dom发生变化的三种情况
    • 标签的改变（Tree-Diff算法是先把原标签删除，再把新标签给添加进去）
    • 组件的改变（Tree-Diff算法是先删掉改变之前的那个组件，然后渲染新的组件）
    • key的优化（列表渲染）
      • 例子说明：old:[react,vue,angular],new:[vue,angular],如果将前面old列表数据重新渲染为new列表数据，如果没有key，则会依次将react渲染成vue，vue渲染成angular，最后删除掉angular，会执行两次update和一次unmount，要执行三次dom操作；若果加上key（key要唯一），Tree-Diff算法会只执行删除react的操作，只要一次dom改变即可，所以key在react中做于性能优化处理，一般列表渲染必须加上key，且保证key唯一。
  • 总结：
    • react通过制定大胆的Diff策略，将O(n3）复杂度的问题转换成O（n）复杂度的问题
    • react通过分层求异的策略，对tree diff进行算法优化
    • react通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对component diff进行算法优化
    • react通过设置唯一key的策略，对element diff进行算法优化
• 数据操作
  • state与props相同之处
    • 改变会触发render函数（UI的改变）
  • state与props不同之处
    • state（writeable，readable），props（readable）
    • state（组件内部数据），props（来自父组件）
• 受控组件与非受控组件
  • 受控组件
    • 受控输入接收其当前值作为支持，并接收更改该值的回调。
    • 使用受控组件，每个状态的改变都有一个与之相关的处理函数。好处是可以直接修改或验证用户输入。
  • 非受控组件
    • 不受控制的输入就像传统的HTML表单输入一样。他们会记住您键入的内容。然后，您可以使用 ref 获取它们的值。
  • 总结
    • 受控组件数据是通过react组件处理的；非受控组件数据是通过操作dom处理的。