React琐碎

1 dangerouslySetInnerHTML

使用此属性的原因是得到一个安全的数据,生成一个仅包含唯一key——__html的对象,表明这段内容会被当成text/taint使用,它的使用方式是这样的:

<div dangerouslySetInnerHTML={{this.props.xx}} />

代码中写成<div />的形式,一是为了防止出错,二是假设在<div dangerouslySetInnerHTML={{this.props.xx}}>123</div>之间添加内容是错误的,去掉123就正常,且空格也是不允许的.

使用此属性的理由是为了方式XSS(cross-site scripting)攻击,让代码更加安全.

2.ReactDOM.unmountComponentAtNode

ReactDOM.unmountComponentAtNode(DOMele)作用是销毁指定容器内的所有React节点,但是它仅限于销毁类似于ReactDOM.render(<app />,document.getElementById('app'))中的容器内部的节点,通过react产生的节点使用此方法会报如下错误:

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.refs.remove));

warning.js:36 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.

3.bind与() => {}

在对render下面的方法执行调用方法的时候,假如果需要对this进行调用,那么需要使用this.xx.bind(that)进行绑定,或者直接采用箭头函数() => {this.xx()},这样做是为了限制作用域,否则在某些情况下调用的this并非实际预想输出结果.

4.map()与key

当在react中使用map函数渲染list时，最好指定每一项的唯一key，它可以帮助react标识每一项的状态变化。

5.ref属性

在使用ref属性时遇到一个小坑，按照最新react规范一般都采用类式组件，所以ref可以随意使用；可是在使用了函数式的组件后，完全失效，原因在于他们是没有实例的。它有个不成文的写法：ref={node => this.dom = node}，一些使用情况：

• 处理focus、文本选择或者媒体播放
• 触发强制动画
• 集成第三方DOM库