- 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 中的注释方式/}
- 什么是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进行算法优化
- 虚拟dom发生变化的三种情况
- 数据操作
- state与props相同之处
- 改变会触发render函数(UI的改变)
- state与props不同之处
- state(writeable,readable),props(readable)
- state(组件内部数据),props(来自父组件)
- state与props相同之处
- 受控组件与非受控组件
- 受控组件
- 受控输入接收其当前值作为支持,并接收更改该值的回调。
- 使用受控组件,每个状态的改变都有一个与之相关的处理函数。好处是可以直接修改或验证用户输入。
- 非受控组件
- 不受控制的输入就像传统的HTML表单输入一样。他们会记住您键入的内容。然后,您可以使用 ref 获取它们的值。
- 总结
- 受控组件数据是通过react组件处理的;非受控组件数据是通过操作dom处理的。
- 受控组件
React基础知识总结(精简版)
最新推荐文章于 2024-07-25 09:06:52 发布