Day01 - 学习 React 第一天

最新推荐文章于 2024-06-14 14:24:42 发布

order one

最新推荐文章于 2024-06-14 14:24:42 发布

阅读量631

点赞数 13

文章标签：学习 react.js 前端

本文链接：https://blog.csdn.net/gu644335363/article/details/137566508

版权

记录自己学习React学习

定义：react 用于构建用户界面的 JavaScript库只提供了 UI层面的解决方案

开发：由Facebook开发且开源

优点

在学习途中我发现 react 也有diff 算法而且vue中也使用，两者之间的区别，我简单总结了下

react和vue的diff算法的区别

相同点：

不同点

React 在diff遍历的时候，只对需要修改的节点进行了记录，形成了effect list最后才根据effect list 进行真实dom的修改，修改时先删除，然后进行更新和移动，最后插入
Vue 在遍历的时候就用真实dom方法，修改了真实dom，最后做的删除操作
React 采用单指针从左先右进行遍历
vue采用双指针，从两头向中间进行遍历
react的虚拟diff比较简单，vue中做了一些优化处理，相对复杂，但效率更高

关于虚拟dom：

关于jsx的语法规则

全称：javaScript xml

React 定义的一种类似于xml的js扩展语法

本质是react创建元素的语法糖

开始第一次 react的体验！

使用 html 时必须引入 react 的相关包如果不想用可以去官网使用脚手架下载

JS表达式：返回一个值，可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){}

JS语句：if(){} for(){} while(){} swith(){} 不会返回一个值

//1.定义虚拟DOM，不能使用“”

//2.标签中混入JS表达式的时候使用{}

//3.样式的类名指定不要使用class，使用className

//4.内敛样式要使用style={{样式:"值"}}

//5.不能有多个根标签，只能有一个跟标签

//6.标签必须闭合

//7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错

// 如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

关注