本文总结了常用的 js 进行 DOM 修改的操作，主要总结节点的创建、修改和元素属性的管理的一些相关的操作。 节点创建常用的和节点创建有关的接口主要有：document.createElement、document.createTextNode 、document.createDocumentFragment 、 document.createAttribute 、document.adoptNode 、document.importNode 、node.cloneNode。 document.createElementdocument.createElement(tagName) 这是我们…
翻译自：Evolving Patterns in React Let’s take a closer look at some of the patterns that are emerging in the React ecosystem. These patterns improve readability, code clarity, and push your code towards composition and reusability. 让我们仔细看看出现在 React 生态系统中的一些模式。这些模式可提高你的代码的可读性和清晰度，更加的可组合性和可复用性。 I started …
最近在重新学习基础知识，本文对常用的 js 进行 DOM 查询的操作进行整理。 基本查询本节主要介绍在文档中通过 id、class、name、css选择器直接进行查询的方式。 id 选择器使用 document.getElementById，根据 id 返回元素，返回值是 Element，如果不存在，则返回 null。 这个接口很简单，只有几点需要注意： 字母 d 小写，这里容易出错。 元素的 id 是大小写敏感的。 如果存在多个 id 一致（这样是不规范的），则返回第一个查找到的元素。 该方法不会搜索不在文档中的元素，当创建了一个新元素，必须插入文档中才能被查询到。 类选择器使用 doc…
鼠标事件是目前最常用的事件，与鼠标操作相关的事件主要有： mousedown, mouseup, click, dblclick, contextmenu, mousemove, mouseover, mouseout。 mousedown, mouseup, click用户点击元素触发的事件顺序为： mousedown，用户在该元素按下鼠标按钮； mouseup，用户在此元素上释放按下的鼠标按钮； click，在此元素上检测到一个 mousedown 和一个 mouseup； 注意，有时用户使用鼠标执行某些操作，但并不会触发 click 事件。例如用户在链接上按下鼠标按钮，然后将鼠标从链…
和表单元素相关的事件有：change、input、compositionstart/compositionupdate/compositionend、focusin/focus、focusout/blur、submit。 changechange 事件可以被 <input>、<textarea>、<select>、checkbox/radio 元素触发,. 注意，对于文本输入内容的改变，也就是说在文本域（input、textarea）输入内容时候，该事件不会触发，直到当文本元素失去焦点 时，触发该事件。 对于 <select>、checkbox/…
原文：Reconciliation React provides a declarative API so that you don’t have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React’s “diffi…
在使用 ESlint 的时候发现，当使用新标签打开外部链接时候（target="_black"）， eslint-plugin-react 插件报出了错误： Prevent usage of unsafe target='_blank' (react/jsx-no-target-blank) 查了下发现这是一个一直被忽视的很严重的安全问题。 危险的 target=”_blank”假设在我们的这个页面（www.me.com）引入了外部的打开了外部的一个网页（www.out.com）： <!-- www.me.com --><html l…
问题描述在 React16 以前的版本，组件渲染的返回值必须为一个子元素，而不允许是一个子元素的列表，我们经常需要为其包括一层 div 或者 span 等： // 对于：Some text.<h2>A heading</h2>More text.<h2>Another heading</h2>Even more text.// React 16 以前需要包裹一层额外的 divrender() { return ( <div> Some text. <h2>A heading</h…
通常情况下，我们的组件结构如下： <div id="app"> <RootComponent> <ParentComponent> <ModalComponent> // modal text </ModalComponent> </ParentComponent> <ParentSblingsComponent> // come text </ParentSblingsComponent> </Roo…
本文主要总结了在开发中经常使用的的一些浏览器事件的使用。 系列目录本文涉及内容加多，截止现在，“拖拽事件”、“触摸事件”、“手势事件” 三节尚未完成。 鼠标事件 键盘事件 生命周期事件 触摸事件 手势事件 表单事件 错误事件 其他事件 键盘事件键盘事件最常用的是 keyup 和 keydown 两个事件，这两个事件本身很简单，不再多说，本节说一点键盘事件其他细节吧。 这两个事件常配合表单使用，比如用户输入内容后校验，虽然也可以用，但是处理起来较为麻烦，需要判断组合键，非文本输入按键比如 Shift、F1 之类的等，更合适的方法是使用表单的 input 事件，将在后面表单事件…