06.React的一些细节

es7-react插件

如果你使用vscode，可以安装这个插件，以简化工作
rcc快速创建类组件
rfc快速创建函数式组件

jsx注意事项

https://react.docschina.org/docs/dom-elements.html

1. 对于input元素的value值，必须要配合onChange事件，其实就是为了写成受控组件

<input type="text" value={this.state.a} onChange={(e)=>{this.setState({a:e.target.value})}} />

2. 后续如果只是显示默认值的，可以使用defaultValue代替value，而不必使他变成受控组件

<input type="text" defaultValue={this.state.a}/>
<input type="checkbox" defaultChecked/>

3. 由于for是保留字，所以在label中使用htmlFor代替

<label htmlFor="name">姓名</label>

4. jsx的注释写法 {/*注释内容 */}
5. jsx参照了xml格式，标签必须闭合
6. 外层只能有一个根元素
7. class改成className
8. stype={{}} 双大括号
9. 事件绑定驼峰式命名法： onClick onChange onKeyUp
10. 需要注意在事件函数中的this指向问题
    • 写成箭头函数时，this执行组件本身
    • 写成普通函数时，在节点中或者在constructor中绑定属性

clickMe(e){
  console.log(this)
  e.preventDefault()
}
<button onClick={this.clickMe.bind(this)}>222</button>

11. dangerouslySetInnerHTML 等同于dom的innerHTML

function createMarkup() {
  return {__html: '<h2>一个h2标签</h2>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}