20160226

React 的一些知识点

prop 与 state

React 如何用 state

React 做了一些事情保证你代码的性能和易于理解:

Autobinding:原来创建回调函数时,你通常需要显式绑定。但是在 React 中,所有的方法自动的绑定在组件的实例上。(除了 ES6 的 class 语法),React 缓存这些方法有效的利用了 CPU 和内存,同时减小了代码量

Event delegation(事件委托):React 实际上不是将事件处理程序附加在节点本身,当 React 开始时,它用一个事件监听器在顶层监听所有事件,当一个组件添加或卸载,React 只是简单的从内部映射添加或删除事件处理程序,当一个事件发生时,React 只是用这个映射来调度它。当在映射中找不到事件处理程序,React 则用简单的空操作。

总结:自动绑定回调函数,所有的事件处理程序一开始被用一个事件监听器在顶层监听,在一个组件被添加或卸载时,只是从内部事件的映射中添加或删除事件处理程序,整个所有的事件处理程序都存在一个映射里,每次从里面查找事件。

组件就相当于状态机。

React 将组件看做简单的状态机,UI 有各种状态并且用来呈现这些状态。这容易保持 UI 的一致性。你只是更新组件的状态,然后在新状态的基础上呈现(render)一个新的组件,React 用最有效的方式更新 DOM。

State 是如何工作的

通常通过 setState(data, callback) 来告知组件数据变化,它将数据放入 this.state 中并且重新呈现(render)组件,可选的回调函数被调用,大部分时候你不需要提供一个回调函数因为 React 将会更新 UI 给你。

哪一种组件需要有状态(State)

大部分时候你的组件简单的从 props 中取得一些数据并且渲染它,然而,有些时候你需要对用户的输入服务器的请求或者时间的流逝做出响应,这个时候你使用 state。

尽量让你的组件是无状态的,这样你能将状态放在最需要逻辑的地方,减少冗余,使你更容易思考你的应用程序。

一个常见的模式是用几个无状态的组件来呈现数据,在它们的上面有一个有状态的组件,这个组件的状态变化然后通过 props 属性传递给它的孩子。有状态的组件封装了所有的交互逻辑,无状态的组件通过声明的方式呈现数据。

应该如何用 State

在真实的 app 中,state 携带的数据应该是非常少并且 可以 JSON 序列化(这个是什么意思?)的,在创建一个有状态的组件时,考虑组件展示状态的最小可能性,并且只在 this.state 中储存这些属性,在 render() 中只计算基于这个状态的其他信息,通过这种方式你可以得到正确的应用程序,因为添加冗余数据或者计算值添加到你的状态意味着你需要显式的保持同步而不是 React 计算这些给你。

总结:

  1. 应该在 state 中存尽量少的数据
  2. 尽量不要在其他变量中存 this.state 的值
  3. 尽量不要通过计算给 state 赋值,这样会显式的同步 state 浪费资源
不要怎样用 State

this.state 只需要存你需要显示在 UI 上的最小量的数据,不应该包括:

总结:

  1. 不要通过计算给 state 赋值,在 render() 中改变 state 的呈现方式。
  2. 不要在 state 和 props 存重复的数据,除非要存 props 的上一个值。