key
React中key的设置与Vue中相似，因为虚拟DOM的原因，在列表顺序可能改变的情况下，最好用每一项唯一的id作为key。
pureComponent
性能优化！！！
简单来说，PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致。
-
使用Component：
父组件中传给子组件的数据改变时，所有的子组件都会更新。
-
Component加上shouldComponentUpdate：
用shouldComponentUpdate可以实现只更新特定子组件。
shouldComponentUpdate(nextProps){ return !(nextProps.data===this.prop.data);//data是父组件中传给子组件的数据 } -
使用pureComponent：
可以实现只更新特定子组件。效果同Component加上shouldComponentUpdate
ref
（参考 www.cnblogs.com/lanpang9661… ）
string
类似于vue中的ref绑定方式，可以通过this.refs.绑定的ref的名字获取到节点dom； 不推荐使用，已过时！
createRef
通过在class中使用React.createRef()方法创建一些变量，可以将这些变量绑定到标签的ref中。
那么该变量的current属性则指向绑定的标签dom。
函数形式
在class中声明函数，在函数中绑定ref 使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法。
children
- 组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
- 可以自定义结构的组件的常用形式
- children
- 传递函数
- 传递子组件
例： App.js
import { Component } from "react";
import Child from "./child";
// children
class App extends Component {
render() {
return <div>
<Child>
<h1>hello Children</h1>
<p>这是要传入子元素的内容</p>
</Child>
</div>
}
}
export default App;
child.js
import { Component } from "react";
/*
组件中的结构，可能有一部分不确定
*/
class Child extends Component {
render(){
console.log(this.props);
return <div>{
this.props.children
}</div>
}
}
export default Child;
呈现效果：
dangrouslyInnerHTML
如果遇到后台传过来的数据本身就是html（字符串形式），该如何展示呢？
直接设置innerHTML:
import { Component } from "react";
let data = `<div class="markdown-text"><h1>InnerHTML</h1><p>请大家遵守法律法规，勿发布不合规内容。</p></div>`;
// children
class App extends Component {
render() {
return <div ref={(node)=>{
node.innerHTML = data;
}}></div>
}
}
export default App;
呈现效果：
不过，实际上react提供了一个更简单的方法dangerouslySetInnerHTML~
注意里面的html前面时两个下划线!!!
import { Component } from "react";
let data = `<div class="markdown-text"><h1>InnerHTML</h1><p>请大家遵守法律法规，勿发布不合规内容。</p></div>`;
class App extends Component {
render() {
return <div
dangerouslySetInnerHTML={{
__html:data
}}
></div>
}
}
export default App;
呈现效果：同上
用React实现一个简单的留言板
实现功能：
- 输入昵称和留言，点击提交按钮后在下方显示
- 可删除单条留言
- 双击留言进入编辑状态
- 编辑状态时失去焦点退出编辑状态修改留言，如果编辑框value为空，则显示编辑前的内容，否则更新message内容
- 留言全选、全不选
- 汇总留言（总条数，选中多少条）
- 删除选中留言
