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 &middot; 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值。

p,pre,span,div,code{font-size:16px;}

1. render()

-->