react的设计思想 react的设计思想

1.Virtual DOM（虚拟dom）为什么要使用虚拟dom呢
1.dom渲染在渲染中是最昂贵的，尽量减少dom操作,避免“推到重来”，项目越复杂，影响越严重
2.js运行效率高

Hello

在继续讲解之前，我们先讲几个概念
什么是jsx

const element = Hello, world!;

这种表达式类型的标签语法就是jsx
JSX主要以干净且简洁的方式保证了组件中的标签与所有业务逻辑的互相分离
什么是虚拟dom
每个 DOM 元素的结构都可以用 JavaScript 的对象来表示。你会发现一个 DOM 元素包含的信息其实只有三个：标签名，属性，子元素。

{ tag: 'div', attrs: { className: 'box', id: 'content'}, children: [ { tag: 'div', arrts: { className: 'title' }, children: ['Hello'] }, { tag: 'button', attrs: null, children: ['Click'] } ] }

下面对比一下真实dom和虚拟dom的区别
比如我们要生成一个有href和title属性的内容为React的a元素

文章图片
image.png 如下是使用原生DOM生成的元素：

var a = document.createElement('a') a.setAttribute('class', 'link') a.setAttribute('href', 'https://github.com/facebook/react') a.appendChild(document.createTextNode('React'))

那么使用虚拟DOM（我们要明白一点，虚拟dom是我们写的react UI代码经过jsx转化后样子，我们平常是不写虚拟dom）则代码为如下：

var a = React.createElement('a'（这里是标签名）, { className: 'link', href: 'https://github.com/facebook/react' }（这里是属性）, 'React'（这里是子元素）)

把jsx语法转换为虚拟dom的是react的createElement方法在React的实际开发中，UI会根据数据的不同进行展示,当数据变化时，React会重新构建整个DOM树，然后将当前的DOM树和之前的比较，得到DOM树的区别，然后仅仅把变化的部分反映到实际的浏览器UI更新上。
也正是由于虚拟dom，UI会根据数据的不同进行不同的展示，成为数据驱动型
2.key的运用 react利用key来识别组件，它是一种身份标识，就像我们的身份证用来辨识一个人一样。
为什么要有key，我们来用表格的数据来讲解，比如后台返回了100条数据，每个数据都有一个id，代表唯一的身份，我们拿来做key值。当我们添加一条数据的时候，那么数据渲染的时候，只会渲染这第一条，后面的不会渲染，因为后面的key值都没有变，这样子就大大的提高了渲染效率
1.key的值要稳定唯一
请使用后台返回的id（id是数据库生成的唯一主键）去写，这样每个值有对应的key
注意不要使用Math.Random()或者new Date（）去写，这样每次都会销毁重新加载组件的，很浪费性能
2.index作为key是一种反模式
不要使用index作为key（如果用index作为key值，添加一条数据，添加的这条在第一个，以前的第一变成了第二，以此类推，那么所有的数据的key值都会改变，都会被渲染，就会变得异常吃力）
不过key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一
3.diff算法首先让我先弄清楚diff算法是做什么用的？
React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染

文章图片
image.png 参考https://yq.aliyun.com/articles/586669
4.react fiber 什么是react fiber？
Fiber 是 React v16 中新的 reconciliation 引擎，或核心算法的重新实现。React Fiber 的目标是提高对动画，布局，手势，暂停，中止或者重用任务的能力及为不同类型的更新分配优先级，及新的并发原语等领域的适用性。
具体可参考
参考https://juejin.im/post/5ab7b3a2f265da2378403e57
5.react hook 什么是react hook？
Hooks 是一个新的草案，它允许你在不编写类的情况下使用状态和其他 React 特性
传统组件类的缺点是什么？
大型组件很难拆分和重构，也很难测试。
业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
组件类引入了复杂的编程模式，比如 render props 和高阶组件。
【react的设计思想】具体可参考
http://www.ruanyifeng.com/blog/2019/09/react-hooks.html