2019-07-02 React（ref、props.children、dangerouslySetHTML 、 style、PropTypes）

（本文摘录于阮一峰老师所写文章，https://wangdoc.com/javascript/basic/index.html，作个人学习使用。）
1、我们给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。

2、但是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。

3、使用自定义组件的时候，可以在其中嵌套 JSX 结构。嵌套的结构在组件内部都可以通过 props.children 获取到，这种组件编写方式在编写容器类型的组件当中非常有用。而在实际的 React.js 项目当中，我们几乎每天都需要用这种方式来编写组件。

4、出于安全考虑的原因（XSS 攻击：跨站脚本攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的 text(…) 函数一样，任何的 HTML 格式都会被转义掉。
使用 dangerouslySetInnerHTML={{__html: this.state.content}} 可以转义。

5、React.js 中的元素的 style 属性的用法和 DOM 里面的 style 不大一样，style属性接受一个对象，这个对象里面是这个元素的 CSS 属性键值对，原来 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名，如 font-size 换成 fontSize，text-align 换成 textAlign。
例如：

React.js 小书

6、React.js 提供了一种机制，让你可以给组件的配置参数加上类型验证，安装一个 React 提供的第三方库 prop-types。另外，可以通过 isRequired 关键字来强制组件某个参数必须传入，例如：
static propTypes = {
comment: PropTypes.object.isRequired
}
通过 PropTypes 给组件的参数做类型限制，可以在帮助我们迅速定位错误，这在构建大型应用程序的时候特别有用；另外，给组件加上 propTypes，也让组件的开发、使用更加规范清晰。