API
Nerv 是Nerv库的入口点。如果你通过 <script> 标签加载Nerv,这些高阶API可用于 Nerv 全局。如果你使用ES6,你可以使用 import Nerv from 'Nerv' 。如果你使用ES5,你可以使用 var Nerv = require('Nerv') 。
Nerv.Component
用 ES6 类 定义时,Nerv.Component是Nerv组件的基类。
class Greeting extends Nerv.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
有关 Nerv.Component 的方法和属性列表,请参阅 Nerv.Component。
Nerv.PureComponent
请参阅 Nerv.Component。
createElement()
Nerv.createElement(
type,
[props],
[...children]
)
根据给定的类型创建并返回新的 Nerv element 。参数type既可以是一个html标签名称字符串(例如'div' 或 'span' ),也可以是一个 Nerv component 类型(一个类或一个函数)。
Nerv.DOM 提供了DOM组件的 Nerv.createElement() 的便捷包装。举个例子,Nerv.DOM.a(...) 是 Nerv.createELement('a', ...) 的一个便捷包装。这个用法被认为是过时的,我们推荐您使用JSX,或者直接使用 Nerv.createElement() 。
用 JSX 编写的代码会被转换成用 Nerv.createElement() 实现。如果使用了JSX,你通常不会直接调用 Nerv.createElement() 。
cloneElement()
Nerv.cloneElement(
element,
[props],
[...children]
)
以 element 作为起点,克隆并返回一个新的Nerv元素(Nerv Element)。生成的元素将会拥有原始元素props与新props的浅合并。新的子级会替换现有的子级。来自原始元素的 key 和 ref 将会保留。
Nerv.cloneElement() 几乎相当于:
<element.type {...element.props} {...props}>{children}</element.type>
然而,它也保留了 ref。这意味着,如果你通过 ref 获取到子级组件时,不会一不小心从祖先组件里窃取了它。你将获得与你新元素相同的 ref 。
isValidElement()
Nerv.isValidElement(object)
验证对象是否是一个Nerv元素。返回 true 或 false 。
Nerv.Children
Nerv.Children 提供了处理 this.props.children 这个不透明数据结构的工具。
Nerv.Children.map
Nerv.Children.map(children, function[(thisArg)])
在包含在 children 里的每个子级上调用函数,调用的函数的 this 设置为 thisArg 。如果 children 是一个嵌套的对象或数组,它将被遍历。如果 children 是 null 或 undefined ,返回 null 或 undefined 而不是一个空数组。
Nerv.Children.forEach
Nerv.Children.forEach(children, function[(thisArg)])
类似 Nerv.Children.map() ,但是不返回数组。
Nerv.Children.count
Nerv.Children.count(children)
返回 children 中的组件总数,相等于传给 map 或 forEach 时,回调函数被调用次数。
Nerv.Children.only
Nerv.Children.only(children)
返回children里仅有的子级。否则抛出异常。
Nerv.Children.toArray
Nerv.Children.toArray(children)
返回以赋key给每个子级 child 的扁平数组形式来组成不透明的 children 数据结构。如果你打算在你的渲染方法里操纵子级集合这很有用,特别是你想在 this.props.children 传下之前对它重新排序或切割。
Note:
当children是扁平列表时,
Nerv.Children.toArray()改变key来保留嵌套数组的语义。也就是说,为了在展开时保留嵌套数组的语义,toArray会自动的给数组中每个 key 加了上前缀,以便将每个元素的key被限定到包含它的输入数组。
render()
Nerv.render(
element,
container,
[callback]
)
渲染一个Nerv元素,添加到位于提供的container里的DOM元素中,并返回这个组件的一个引用。
如果这个Nerv元素之前已经被渲染到container里去了,这段代码就会进行一次更新,并且只会改变那些反映元素最新状态所必须的DOM元素。
回调函数是可选的。如果你提供了,程序会在渲染或更新之后执行这个函数。
注意:
Nerv.render()控制你传进来的容器节点里的的内容。第一次被调用时,内部所有已经存在的DOM元素都会被替换掉。之后的调用会使用Nerv的DOM比较算法进行高效的更新。
Nerv.render()不会修改容器节点(只修改容器的子项)。你可以在不覆盖已有子节点的情况下添加一个组件到已有的DOM节点中去。
Nerv.render()目前会返回一个引用, 指向Nerv.Component的根实例。但是这个返回值是历史遗留,应该避免使用。因为未来版本的Nerv可能会在某些情况下进行异步渲染。如果你真的需要一个指向Nerv.Component的根实例的引用,推荐的方法是添加一个 callback ref 到根元素上。
unmountComponentAtNode()
Nerv.unmountComponentAtNode(container)
从DOM元素中移除已挂载的Nerv组件,清除它的事件处理器和state。如果容器内没有挂载任何组件,这个函数什么都不会干。
有组件被卸载的时候返回true,没有组件可供卸载时返回 false。
findDOMNode()
Nerv.findDOMNode(component)
如果这个组件已经被挂载到DOM中,函数会返回对应的浏览器中生成的DOM元素 。
当你需要从DOM中读取值时,比如表单的值,或者计算DOM元素的尺寸,这个函数会非常有用。
大多数情况下,你可以添加一个指向DOM节点的引用,从而完全避免使用findDOMNode 这个函数. 当 render 返回 null 或者 false 时, findDOMNode 也返回 null.
注意:
findDOMNode是用于操作底层DOM节点的备用方案。在大部分情况下都不提倡使用这个方案,因为它破坏了组件的抽象化。
findDOMNode只对挂载过的组件有效(也就是已经添加到DOM中去的组件)。如果你试图对一个未挂载的组件调用这个函数 (比如在一个还未创建的组件的render()函数中中调用findDOMNode()),程序会抛出一个异常。
findDOMNode不能用于函数式的组件中。