React_03 react 一些零碎的API

key 的问题

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

PureComponent

PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致

import React, { PureComponent } from 'react';
class App extends PureComponent{
  state={
    name:{title:"KKB"}
  }
  render(){
    console.log("重新渲染")
    let {name}=this.state
    return <div>
      {name.title}
      <button onClick={()=>{
        name.title="ASS"
        this.setState({
          // 但是如果数据是一个对象的话，这个属性因为是前对比所以就不会检测到数据的修改，所以这时候就需要让新值返回一个新的引用
          name:{...name}
        })
      }}>修改name</button>
    </div>
  }
}
export default App;

//大家可以看到在点击Button的时候组件里面的数据并没有改变但是这个时候重新调用了render方法,这是我们不想看到的
//所以官方提供了一个{PureComponent} 会自动浅对比，如果更新前后值一样，就不去更新组件
//但是如果数据是一个对象的话，这个属性因为是前对比所以就不会检测到数据的修改，所以这时候就需要让新值返回一个新的引用

ref

• createRef()
• 注意：在 组件挂载完成之后及更新之后使用

import React, {Component,createRef, Fragment} from 'react';
class App extends Component{
  input=createRef();
  //如果要获取多个节点那么就可以创建多个ref，然后在组件中进行绑定；然后在需要时候获取就行了
    // 用ref关联DOM节点的时候，直接绑定，如果DOM有修改，那么React会同步ref的值
  p=createRef();

  //在挂载完成之后或者更新完就可以获取到这个节点了
  componentDidMount(){
    // console.log(this.input.current)
    console.log(this.p)
    this.input.current.focus();
  }
  render(){
    //组件渲染完成后让组件获得焦点的需求
    return <Fragment>
      <input ref={this.input}/>
      <p ref={this.p}>这是一个P标签</p>
    </Fragment>
  }
}
export default App;
```//
 

### children

- 组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
- 可以自定义结构的组件的常用形式
  - children
  - 传递函数
  - 传递子组件
示例:
```javascript
<div>
      <PopWin title={"这是父级传递的title"}>
        <div>这是内容</div>
        <div>这是内容</div>
      </PopWin>
    </div>

子组件:

import React, {Component} from 'react';
class PopWin extends Component{
  render(){
    let {title,children}=this.props
    //在父组件中因为是双标签,中间可以放东西，但是不会渲染，这些节点就被传入到了子级的props的一个属性中，那个属性就是children
    // console.log(this.props.title)
    return <div>
      {title}
      {children}
    </div>
  }
}
export default PopWin;

dangerouslySetInnerHTML

import React, {Component} from 'react';
let inner=`
<div>
<h1>这是标题</h1>
<p>111</p>
</div>
`

class App extends Component{
  render(){
    return <div dangerouslySetInnerHTML={{
      __html:inner
    }}>
      {/* {inner} */}
    </div>
  }
}
export default App;

直接设置标签的 innerHTML