原文链接：React Components, Elements, and Instances

什么是React元素(element)？

元素(element)是描述组件实例或DOM节点及其所需属性的普通对象这个对象仅仅包含了有关组件类型、属性、子元素的信息。

元素不是实际的实例。相反，它是一种告诉React你想在屏幕上看到什么的方法。你不能在元素上调用任何方法。它只是一个带有两个字段的不可变描述对象：type:(string | ReactClass) 和 props: Object 。

可以把一个这样的DOM节点描述成下面这样的对象，这个对象就叫元素（element）

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

元素可以通过createElement方法创建。

DOM元素

当element的type为英文字符串时，它表示同名的DOM节点，element的props对应其属性。这就是React将呈现的内容。例如：

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

此元素只是将以下HTML表示为普通对象的一种方法：

组件元素

但是，element的type也可以是与React组件对应的函数或类：

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

描述组件的element与描述DOM节点的element一样，都是element，它们可以嵌套并互相混合。

此功能允许您将DangerButton组件定义为具有特定color属性值的Button组件，而无需关心是否完全Button组件会呈现为DOM的button还是

const DangerButton = ({ children }) => ({
  type: Button,
  props: {
    color: 'red',
    children: children
  }
});

你可以在单个元素树中混合DOM和组件元素：

virtual DOM

• 使用javascript对象描述DOM树，并用它构建真的DOM树。
• 状态变更会重新创建js对象树，并比较新旧树的差异，并记录。
• 将记录的差异应用到真的DOM树，只修改差异的部分。

如何在React中利用join插入&nbsp空格

<div
  className={styles.tags}
  dangerouslySetInnerHTML={{
    __html: '我们的愿景是，得天下英才而教育之'.split('').join(' ').replace(/\s/g, '    ')
  }}
/>

刷新ipconfig /flushdns  

ckeditor的回车绑定

今天解决了一个恶心的问题，ckeditor的回车会换两行，不知道是哪里出问题搞坏了回车键，用keystrokeHandler重置绑定按键可以解决问题。

this.instance.on('instanceReady', () => {
    this.instance.setData(this.value);
    this.instance.keystrokeHandler.keystrokes = [13, ''];// 13是回车键
});

记录网页操作的工具

https://www.rrweb.io/  

nodejs

__dirname好像是文件所在当前目录 process.cwd()好像是启动程序的线程工作的目录  

chrome调试安卓设备的chrome浏览器的网页

通过usb链接后，输入chrome://inspect/  

工作成效

管理者工作成效。什么叫卓有成效？  

知识工作者的成效，创造性，强调贡献。知道别人的需求，让别人了解自己的工作。  

对组织的能力和绩效产生显著影响——就是管理者。  

才能转化成成果。  

工作产生实实在在的效果，强调共享，不能表面看起来很忙碌，实际上没效果。  

3个方法：时间管理，用人之长，有效决策。  

管理上司：协助上司完成所长。  

慎重决策，果断执行。切忌折中。  

原则性的解决方案。  

有效决策需要在多个相互冲突的备选方案中做出判断，充分考虑反面意见。  

能力

1. 组织协调能力（3级）：协调多人和团队共同达成一个目标。  
2. 架构能力（3级）：代码组织能力，组织协调大量的代码模块，良好的工作在一起。  
3. 分享总结能力（2级）：表达能力，分享自己的经验，自己有较好的经验和技能，也能让其他人学会自己的技能。  
4. 代码文档能力（1级）：日常编码任务，分析文档，书写文档。    

评估

简而言之，文档，就像盖楼房的设计图，没有图纸，你是不能开始搬砖的。

领导有没有给你看需求分析文档？有没有拿着需求分析文档给你宣讲你要做什么？没有？不干活；

测试的同事有没有给你看测试用例文档？有没有给你宣讲？没有？不干活；

你自己明白领导的意图了吗？明白测试同事的意图了吗？

想明白后，开始想自己要开发的模块里的各个功能模块之间的关系，可以画时序图；

时序图画完了，看看是否有（可能）频繁变化的模块/需求，

如果有，请务必使用一些设计模式，如果要用设计模式，请务必画UML类图，

如果没有频繁变化的模块/需求，请一定不要用设计模式；

最后，看看在一个功能模块中，有没有逻辑比较复杂的地方，如果有，请画流程图；

模块和模块之间有没有需要明确的协议？如果有，请把协议写出来。

上面这一段话，就是你要写的文档，这个文档的读者主要是你，在你的模块出问题之前，别人通常不会读这个文档（不排除你的领导会要求看你这个文档）。如果你既不需要时序图又不需要类图又没什么协议需要明确，那么，你就可以不写这个文档。另外，如果这个文档写得好，你的代码是不需要任何注释的。

自学php，找到远程工作项目的22岁程序员

链接

游戏策划

没有惩罚，只有奖励

奖励的目的是它能让儿子获得短暂的快乐，满足他的某一个需求，但过去就没了，下一个目标又在眼前。

React Element

首先我们要知道react的diff比较的是新旧两颗 react element 树。那什么是 react element 呢？

react element 是一个普通对象，它描述组件实例或DOM节点。

它是这样的

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

或这样的（区别是type一个是字符串，一个是函数或类）

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

React.render()方法，会把 react element 解析成所有type都是字符串（DOM标签），形成一棵虚拟DOM树。

当 state 或 props 更新时，render方法会解析出另一个树。React不会直接将新的树渲染为真实的DOM，而是找出新旧树之间的差异，只更新差异部分的真实DOM。这个“找出新旧树之间的差异”的算法就是diff。

如果直接比较两颗树，算法的时间复杂度为O(n3) ，不使用于react的场景。

React基于两点假设，实现了一个复杂度为O(n)的算法：

1. 两个不同类型的元素将产生不同的树。
2. 开发人员可以通过key参数提示哪些子元素可以在不同渲染中保持稳定。

实践中，上述假设适用于大部分应用场景。

diff算法

在对比新旧两棵树时，React首先比较两个根元素的类型，然后根据两个元素的类型采取不同的行动。

根元素的类型

对比两个根元素的类型可能以下几种情况：

• elements of different types，不同类型的元素
• DOM elements of the same type，相同类型的DOM元素
• component elements of the same type，相同类型的组件元素

不同类型的元素

每当根元素具有不同的类型时，React将拆除旧树并从头开始构建新树。无论从<a>到<img>或从<Article>到<Comment>，或从<Button> 到 <div>，任何的调整都会导致全部重建。

nth-last-child

-n 表示从后数，-n+2就是倒数第二个元素

项目问题

简历中涉及到的知识点

框架react原理：

• 事件机制
• fiber
• 协调算法（diff）
• hook原理 基础扎实：
• css3
• flex
• es6
  • [[箭头函数]]
• 闭包
• 原型 网络：
• https
• 跨域
• 缓存
• websocket
• sever send event 工程化：
• webpack原理
• [[webpack#Loader 和 Plugin|loader、plugin]]
• vite比较
• cicd优化

html5、css3、typescript 浏览器原理、协议 mobx、graphql、元数据、表单组件 webscoket、redux 优化旧代码、cicd优化

封装的组件： 自定义hook：

自我介绍

我叫王书硕，毕业于河北工程大学信息管理与信息系统专业，有10年的前端工作经验。 最近的两份工作做的是ERP系统和教育授课类的系统， 做过什么，有什么成绩，为什么能胜任 开发了课堂互动游戏编辑器，xx组件和xx自定义hook

腾讯互娱 12k-20k 岗位要求 1.本科及以上学历、计算机相关专业背景 2.熟练掌握ES6、HTML5、CSS3 等技术，有丰富的React / Vue开发经验 3.熟悉模块化、前端编译和构建工具，例如:Webpack、CSS Modules、Gulp 等 4.熟悉Web性能优化，了解如何提高页面加载速度和响应速度。同时具备良好的编码习惯，能编写清晰、模块化、可维护的代码。

13-16k 岗位描述： 1、统招本科学历，具有扎实的计算机基础理论知识；4年以上Web前端实际项目开发经验； 2、精通HTML/CSS/JS等Web前端技术，对符合WEB标准的网站开发有丰富经验，有大型工程经验优先； 3、有使用Angularjs/React/Vuejs其中一项实际项目开发经验(React 最佳)； 4、熟悉模块化、前端编译和构建工具，并深入理解其设计原理，例如ReactJS、AntD、webpack等； 5、有较强的逻辑思维能力，善于分析、归纳、解决问题； 6、持续学习，善于沟通和分享，乐观随和，团队合作精神、优秀的分析和解决问题能力 岗位职责： 1、参与PC或移动端的功能设计与研发工作； 2、与产品、RD沟通，能够针对业务需求提供实现前端技术解决方案、交互原型 3、与后端工程师协作，高效完成产品的数据交互、动态信息展现； 4、持续的优化前端体验和页面响应速度，提升 Web界面的友好和易用性； 5、能够对Web新技术研究、现有开发方法改进。

13-25K 工作职责： 1.负责web端video相关工具开发，利用浏览器的最新技术实现创新的多媒体编辑体验； 2.持续优化在线video工具的相关技术，并利用数据反馈不断改进产品体验。 任职资格： 1.计算机、通信等相关专业全日制本科及以上学历； 2.两年以上工作经验，有相关知识储备的优秀应届毕业生不做工作年限要求； 3.精通各种Web前端技术，如HTML5, JavaScript, CSS3等； 4.熟悉React框架，并有实际项目经验； 5.掌握多种设计模式，了解如何优化代码； 6.熟悉ffmpeg, wasm, web worker等技术,了解Web端图形图像相关的框架和技术者优先。

工作职责： 1.负责公司前端项目的架构搭建，优化； 2.参与需求调研，分析，开发计划制定。 3.前端技术重点、难点的攻坚； 4.指导中级工程师工作，担任一定程度的领导职能，参与前端开发团队的建设。 任职资格： 1.精通vue,react中的一种，并了解其原理 2.深入理解模块化,闭包，原型链,this指向; 3.理解webpack,gulp，并了解其原理 3.熟悉sass或less，熟悉rem适配,flex布局，熟悉CSS3; 4.了解Nodejs，熟悉基于nodejs的前端工程化; 5.熟悉前后端交互合作，熟悉Ajax，http协议，熟悉GIT，理解前端对SEO的优化。 6.扎实的计算机基础，具备较强的编程素质、质量意识 7.熟悉H5移动端应用的开发，架构（小程序，微信） 8.大型企业级应用开发经验、熟悉银行业务者优先

职位描述 1、配合产品经理完成产品功能开发和优化； 2、配合交互设计师及视觉设计师实现交互效果，可以高度还原设计稿。 3、深刻认识前后端分离的开发方式。 4、负责前端基础架构、组件抽象以及优秀的组件实现基础和理论知识。 岗位要求： 1、本科及以上学历，计算机相关专业，3年以上前端开发经验 2、熟悉前端主流开发技术，包括但不限于typescript、sass/scss、less， 对函数式编程有深刻认识和理解 2、熟悉webpack/vite/rollup等相关工具链 3、精通React框架，精通相关全家桶和相关的开发思想和理论，熟悉hook的开发模式，可以抽离公共hook提高工作效率 4、经验丰富，开发过中大型 Web 应用程序，良好的 UI 交互实现能力者佳 5、具有一定专研精神，敢于挑战自我，解决各种未知问题