ReactDOM & DOM Elements
一、ReactDOM
1.1 render()
ReactDOM.render(element,container,[callback])
在container中渲染一个React元素,然后返回组件一个引用(对于stateless组件,返回null)。如果React元素已经加入到了container中,再次执行上面的方法会执行更新操作,只在必要时更新DOM来反映最新的React元素。如果提供可选的回调函数,则该callback会在组件渲染或者更新完后执行。
注意:
ReactDOM.render控制container节点的内容。container中任何现存的DOM元素会被覆盖。后续调用会执行React的DOM diff算法。
ReactDOM.render不会更改container节点,只是修改了他的子节点。插入一个组件到现存的DOM节点并且不更改其子节点也是有可能的。
ReactDOM.render目前的版本会返回一个根ReactComponent实例的引用。然而,应该避免使用这个返回值,因为未来的版本可能会异步渲染组件。如果你需要使用根ReactComponent实例引用,建议使用callback ref。
1.2 ummountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
从DOM中移除一个装载好的React组件,并且清理它的事件处理和state。如果container中没有装载组件,这个函数将什么都不做。如果组件成功移除就返回true,如果没有组件被移除就返回false.
1.3 findDOMNode()
ReactDOM.findDOMNode(component)
如果这个组件装载进了DOM,就返回相应的本地浏览器DOM元素。这个函数可以读取DOM值,比如form field 值,执行DOM方法。在大多数情况下,你可以给DOM节点添加ref属性,尽量避免使用findDOMNode。当render返回null或者false时,findDOMNode也返回null。
注意:
findDOMNode只能用在已经装载的组件上,如果你在一个还没装载的组件上调用这个函数会抛出异常;该函数不能用于函数型组件。
二、DOM Elements
在React中,所有的DOM属性包括事件处理函数都应该用驼峰命名。例外是aria-*和data-*属性,他们是小写字母。
下面是React不同于DOM的属性:
2.1 checked
checked属性用于input中类型为checkbox和radio的组件。可以使用这个属性来设置组件是否被选中。在创建controlled组件时是很有用的。defaultChecked是uncontrolled的等价物,当组件首次装载时设置组件是否被选中。
2.2 className
使用className属性,可以指定一个CSS类。这个属性可以用于所有的常规DOM和SVG元素比如div, a和其他的。
如果你在Web Component中使用React,就要使用class属性,而不是className;
2.3 dangerouslySetInnerHTML
dangerouslySetInnerHTML是React提出的用于代替DOM中innerHTML的方法。通常设置在代码中设置HTML是危险的,因为很可能导致XSS攻击。
在React中可以直接设置HTML,但是你必须用dangerouslySetInnerHTML并且传递一个对象,对象的键为_ _html,来提醒你自己这是很危险的,下面是例子:
function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; }
2.4 htmlFor
因为for是保留字,因此用htmlFor来代替for的使用。
2.5 onChange
当表单域发生改变时,触发事件。
2.6 selected
selected属性用于option组件。你可以使用它来设置组件是否被选择。在构件controlled组件时很有用。
2.7 style
style属性接受一个JS对象,JS对象中的键是驼峰命名而不是CSS字符串。这样更有效,而且可以防止XSS安全漏洞。比如
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; }
style不是自动补全前缀的,为了支持旧的浏览器,你需要提供相应的样式属性:
const divStyle = { WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; function ComponentWithTransition() { return <div style={divStyle}>This should work cross-browser</div>; }
除了ms之外的厂商前缀都以大写字母开头,因此上面的WebkitTransition是大写的W。
2.8 value
input和textarea组件都支持value属性。你可以使用它来设置组件的value,可以用于构件一个controlled组件。defaultValue是uncontrolled等价物,在组件第一次装载时设置value值。