在有些应用场合下，我们希望我们的对象是不可以被修改的，比如我们提供给外一个服务，但是不想这个服务被修改，这就需要对象能够防止被修改。 在另外一些应用场合，比如 React 通常搭配使用的 immutable.js 采用不可变的数据结构，可以保证最大限度的降低副作用。 对象防止被修改有三个级别：阻止扩展、密封对象、冻结对象，本章内容，针对这些，总结如何使对象数据不可变。 阻止扩展如果一个对象可以添加新的属性，那么这个对象是可以扩展的，阻止扩展就是让这个对象不能被扩展，也就是说不能添加新的属性。 阻止扩展主要涉及这两组函数：Object.isExtensible(obj)/Reflect.isEx…
组件（Components）、元素（Elements）和实例（Instances）之间的区别很容易被混淆，本文主要介绍了这几个概念的区别并详细说明了 React 管理 DOM 的思路。 传统组件自己管理实例（Managing the Instances）在传统的面向对象的 UI 编程中，你需要自己手动创建和管理各种组件的实例对象，比如，一个 Form 组件想要渲染一个 Button 子组件，需要实例化这个 Button 子组件，并且手动更新他们的内容： class Form extends TraditionalObjectOrientedView { render() {…
对于动画而言，设置一个合适的更新周期是非常重要的，更新周期越短，动画则越平滑流畅，但是，间隔时间过短，则会对系统资源的消耗增加，另一方面，大多数显示器的刷新频率是 60HZ ，更新速度超过这个数值并没有什么意义，因为显示器不会刷新，因此动画的最佳执行时间间隔是 1000ms/60 约等于 16.7ms 执行一次更加合适。 而为 setTimeout 与 setInterval 设置这样的更新频率并不有效，它们的运行时间并不准确，如果它们之前有耗时的同步任务，则他们的执行时机会被大大的推迟，并不能做到准去的执行。 而 HTML5 新引入的专门处理动画的定时器 requestAnimationFr…
如我们所了解的， this.props.children 的取值有三种情况，如果当前组件没有子组件，则返回 undefined ，如果有一个元素，则返回数据类型为 object，如果有多个元素则返回类型为 array ，这样每次都要写一大堆的判断语句，并针对不同的返回结果执行不同的操作，这样将会非常繁琐， 好在 React.Children 提供了一些工具方法处理 this.props.children 这个不透明的数据结构。 React.Children.map React.Children.map(children, function[(thisArg)]) 遍历 children 并返…
react-dom 包提供了可以在应用程序顶层使用的 DOM 特定方法，可以在 React 模型外使用的。大多数组件并不需要使用此模块。 浏览器支持支持所有的现代浏览器，包括 IE9 及以上。 不支持那些不支持 ES5 方法的旧浏览器，但是如果页面使用了 es5-shim 和 es5-sham 的 polyfills，应用仍然可以在这些旧的浏览器上运行。 接口ReactDOM 提供了三个接口： render() unmountComponentAtNode() findDOMNode() render ReactDOM.render(element, container, [callbac…
通常情况下， React 使用 props 和子组件进行交互，如果需要修改子组件，则通过更新子组件的 props 来重新 render 子组件，但是在有些情况下，可能想要在 props 的数据流之外修改 props ，对于这种情况， React 提供了 refs 来允许不通过 props 的数据流对子组件修改。 Refs 应用场合refs 的几个应用场合： 管理元素焦点、文本选择或者媒体播放等等； 触发命令式动画 与第三方的类库整合 refs 是直接操作 DOM 元素的，因此在使用之前，最好考虑一下是否真的必须需要使用 refs ，是否可以使用 state 来代替使用 refs ， rea…
概述Iterator 接口允许为所有数据结构，提供了一种统一的遍历机制，被 for...of 使用这种机制遍历这些数据结构， 一些内置类型都是内置的可遍历对象并且有默认的迭代行为, 比如 Array , 另一些类型则不是， 比如 Object 。 为了变成可遍历解构，对象或其原型链上某个对象必须实现 @@iterator 方法，即属性名为 Symbol.iterator 。 当该对象需要被遍历的时候（比如用于一个 for..of 循环中），它的 @@iterator 方法被调用并且无参数，然后返回一个用于在遍历中获得值的迭代器，具体过程如下： 创建一个指针对象，指向当前数据结构的起始位置； …
ArrayLike 对象ArrayLike（类数组/伪数组） ，就是像数组的对象，常见的 ArrayLike 对象有：NodeList 、 arguments 、 HTMLCollection 、 jQuery 对象甚至 String 等。 ArrayLike 实际上只需要一个硬性条件：有 length 属性即可： var obj = {length: 3}[].map.call(obj, item => item);// [undefined x 4] 通过数组方法访问的话，只能访问到 0 到 length-1 值为属性名的字段： var obj = {…
Stateless Function Component（SFC， 无状态组件） 是 React v0.14.0 引入的一种新的创建组件的方式，这个方式大大提升了“纯组件”的编写速度和便捷性，而且还能有效提升组价的性能。 常规的组件通常情况下，我们是使用 React.createClass() 或者 class MyComponent extends React.Component 创建组件，但是很多时候，我们需要的组件仅仅是一个简单的渲染数据的模板，这种情况下，这种方式创建的组件无疑十分的繁琐，可以看一个例子： class Widget extends React.Component …
注意，本文仅适用于 React16 以下的版本 Context 是一个实验性的 Api，和 props 一样用于组件之间的数据传递，但是这个功能却很少使用，甚至不为人知。 为何使用 Context在使用 React 开发的时候，通常通过改变 state 和 传递 props 对组件进行控制，特别是通过 props 在组件间的数据流传输，可以很容易的推断组件的状态。首先看一下常用的组件间 props 传递的例子： const ParentComponent = () => { const colorTheme = "green"; return ( …