组件实践 组件接口设计三原则 保持接口小，props 数量要少 根据数据边界来划分组件，利用组合（composition） 把 state 尽量往上层组件提取 同时，我们也接触了这样一些最佳实践： 避免 renderXXXX 函数，直接使用独立的纯函数组件 给回调函数类型的 props 加统一前缀，比如 on 或者 handle 使用 propTypes 来定义组件的 props 组件内部实现 尽量每个组件都有自己专属的源代码文件； 用解构赋值（destructuring assignment… »

通用篇 复制与保存 copy 方法 可以通过全局的方法 在 里 任何你能拿到的资源 存储为一个全局变量 如果你在 中打印了一堆数据 (例如你在 App 中计算出来的一个数组)，然后你想对这些数据做一些额外的操作比如我们刚刚说的 (在不影响它原来值的情况下)。那就可以将它转换成一个全局变量，只需要右击它，并选择 “Store as global variable” (保存为全局变量) 选项。 第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp… »

构造函数 constructor 返回创建实例对象时构造函数的引用（即 对象.constructor === 构造函数.prototype.constructor），此属性的值是对函数本身的引用，而不是一个包含函数名称的字符串 构造函数本身就是一个函数，与普通函数没有任何区别，不过为了规范一般将其首字母大写。构造函数和普通函数的区别在于，使用 new 生成实例的函数就是构造函数，直接调用的就是普通函数。 那是不是意味着普通函数创建的实例没有 constructor 属性呢？不一定。 Symbol… »

需求背景 最近要做一个声音波形图组件，方便运营人员对声音进行切分，以配合完成人工切分录音的工作 核心思路 利用 ref 属性调用原生方法 解决方案 功能点 点击播放只会在播放区域进行播放，再次点击暂停播放，鼠标右键点击播放区域也可播放 可以添加播放区域，添加时会删除上一个播放区域，按住 shift + 鼠标右键可删除播放区域 可以放大缩小波形图 WaveFormDivider/index.js WaveFormDivider/styles.css 类似实现效果 »

需求背景 最近要做一个需求类似于富文本框的功能，需要输入带有 span 标签并显示，同时 span 标签是一个整体，只能同时输入同时删除，目前需求只有这一个 html 标签，暂时无其他标签 需求难点 placeholder 提示语 input 和 textarea 能轻松实现 placeholder 提示语的效果，但作用于 contenteditable 的元素，placeholder 不起作用，可以通过 css 的 :empty 解决 获取输入框的内容 可以利用 innerHTML… »