React 的API 使用：key、PureComponent、ref、children、dangerouslySetInnerHTML

key

key 的问题
在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比
一个列表中的每一项 key 是唯一的
如果列表中发生顺序等操作变化，key 一定要用数据的id

PureComponent

React.PureComponent 与 React.Component 很相似。区别在于 React.Component 需要使用shouldComponentUpdate()来对比prop 和 state 的值发生变化，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

react.ref 获取节点实例

• ref 属性中接收的是一个函数，挂载或节点更新时，会调用该函数，并传入组件实例或DOM节点
  使用方法：引入createRef，用createRef创建一个ref对象，将其赋值给一个变量，
  通过ref挂载在dom节点或组件上，该ref的current属性,将能拿到dom节点或组件的实例

//引入createRef，
import { createRef,  } from "react";

//用createRef创建一个ref对象
editInput = createRef();

//通过ref挂载在dom节点或组件上
 <input type='text' ref={this.editInput} />

props.children

每个组件都可以获取到 props.children属性。它包含组件的开始标签和结束标签之间的内容。

//父组件
  render() {
    return <div >
      <TodoList >
      //作用类似于插槽，
      //放入要插入的内容
      <h1>hello Children</h1>
          <p>这是要传入子元素的内容</p>
      </TodoList>
    </div>
  }

//子组件
  render() {
        console.log(this.props);
        return <div >
       //展示props.children里面的内容
            { this.props.children }
        </div>
    }

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。
使用方法：

let data = `<h1>我是标题</h1>`
class App extends Component {
  render() {
    return <div
      dangerouslySetInnerHTML={{
        __html:data
      }}
    ></div>
  }```