前端入门

从可拖拽组件的设计开始讲起，我们需要设计组件的结构，每个组件都有一个JSON格式的数据结构来描述其基本信息，包括唯一标识、名称、属性和子组件。通过React.createElement()递归地将JSON信息渲染成组件树。这个方法的参数包括组件名称、属性对象和子组件。组件的属性存储在各自的配置文件中，每个物料的index.ts文件中定义了组件的setter、事件和方法，以便在渲染时传递给createReactElement。组件通信通过事件处理来实现：通过JSON结构来定义事件，当组件被选中时，可以选择触发其方法。使用Map来存储组件ID与实例的映射，以便在需要时进行方法调用。使用useImperativeHandle暴露组件的方法，通过ref可以在父组件中调用这些方法。组件选中与高亮，定义选中机制，在渲染时为每个组件添加一个唯一的key，通过事件监听获取被点击组件的ID，更新当前选中组件的状态。利用获取的组件ID，通过DOM操作来高亮被选中的组件。在组件被选中后，配置栏会动态渲染与该组件相关的表单，用户可以通过表单更新组件的属性。每个事件使用JSON存储，包括类型和配置。在预览模式下，将这些JSON格式的事件转换为可执行的函数。技术点1：撤销与重做针对面试可以分别准备两板，首先是全量的保存，后续你优化为快照管理：采用改进的快照机制，仅记录变更的组件ID和实例，而不是完整的组件树，避免冗余数据的产生。组件拖拽的拖拽实现：通过react-dnd等库实现组件的拖拽和放置，支持嵌套结构的拖放。也可以用原生dragapi去做关于编辑与预览模式模式切换：根据不同的模式（编辑/预览）使用不同的渲染器，分别控制事件触发和属性展示的行为。可以用本地存储去存预览的数据

⛄：最近有小伙伴问我有没有推荐的学习路线，所以抽空整理了下，结合了自己的一些经验分享给大家。  最开始学习前端的时候，学完了 Vue 和 React 之后觉得前端也就是这样，好像没什么可学的东西了，一度膨胀感觉自己无敌了。但是后来实习之后认识了很多大佬，也接触了很多新东西，发现前端真的是学不完一点啊 😂。 简单的分级  Tip：以下罗列的技术栈 ⭐ 必学、📚 选学强烈推荐、🌳 选学感兴趣可以学。  对于准备校招的学生来说，前端可以分为以下几个阶段： 练气期  练气/筑基期我们直接去看一些免费的教学视频即可，看其他类型的学习资料学习难度略大。  该阶段你是一个完全的小小小萌新，没有一点点计...

谁会啊谁会啊谁会阿

面经前端面试题前端#

#前端##前端开发##前端面试##前端入门##web前端##牛客创作赏金赛##现在前端的就业环境真的很差吗##牛客激励计划##牛客十周岁生日快乐#

🌱继上篇学完html➕css➕js➕vue后🌱我着手做了两个项目，花了20天左右，🌱又开始背八股（主要是html,css,js,浏览器,vue），花了一周多🌱期间穿插这期末考，大作业，实验，课设，已经忙成陀螺了😬🌱前天背完八股，昨天就开始试着投了两个厂😄，因为觉得要到周末了，不太好，所以打算再看看项目，复习八股，浅看手撕，待周一就继续海投🌱焦虑去问AI，让它帮我算命，说我六月中旬可以得到offer，好好好，静等🌱投了腾讯，今早做了综合素质测试，还有一个AI测试没有做

🌱大三下才开始有非常强烈紧迫感，开始思考自己的职业规划🌱三月初确定方向是前端🌱上半个月学了HTML➕CSS这下半个月在学JS🌱四月初打算边学react边做项目期望还能一边准备简历，一边投，再一边准备八股刷题什么的我恨自己不是八爪鱼🦑(›´ω`‹ )不能n手抓🌱 第一目标:暑期实习   第二目标:日常实习🌱大佬们有没有什么建议或者提醒让我参考一下感谢🙏🏻

#前端开发##前端面试##前端入门##web前端##牛客创作赏金赛##现在前端的就业环境真的很差吗##前端##牛客激励计划##面试##面经##面试问题记录#

#前端技术面试##前端开发##前端面试##前端入门##web前端##面试##面试问题记录##牛客创作赏金赛##前端##牛客激励计划##现在前端的就业环境真的很差吗#

#前端##牛客创作赏金赛##牛客十周岁生日快乐##前端开发##前端面试##前端入门##web前端##面经#

#前端##前端开发##前端八股##前端入门##前端面试##web前端##前端技术面试##面试##面试问题记录##牛客创作赏金赛##现在前端的就业环境真的很差吗#

1.生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子。 import { onMounted } from 'vue'; // 使用前需引入生命周期钩子 // 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖 onMounted(() => { // ... });     Vue2 Vue3     beforeC...

#前端##前端开发##前端面试##前端入门##web前端##面试##面试问题记录##面经##牛客创作赏金赛##牛客激励计划##牛客十周岁生日快乐#

#牛客创作赏金赛##牛客激励计划##牛客十周岁生日快乐##前端##前端开发##前端面试##前端入门##web前端##现在前端的就业环境真的很差吗##面试##面试问题记录#

#前端入门#