【React学习笔记】puComponent&ref等API

转载

mb5ffbc8f4a5a17 2021-01-18 13:03:37

文章标签 puComponent API key 文章分类 前端开发

key

React中key的设置与Vue中相似，因为虚拟DOM的原因，在列表顺序可能改变的情况下，最好用每一项唯一的id作为key。

pureComponent

性能优化！！！

简单来说，PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致。

使用Component：

父组件中传给子组件的数据改变时，所有的子组件都会更新。

Component加上shouldComponentUpdate：

用shouldComponentUpdate可以实现只更新特定子组件。

shouldComponentUpdate(nextProps){ return !(nextProps.data===this.prop.data);//data是父组件中传给子组件的数据}复制代码

【React学习笔记】puComponent&ref等API_puComponent_02

使用pureComponent：

可以实现只更新特定子组件。效果同Component加上shouldComponentUpdate

ref

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";// childrenclass 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;复制代码

呈现效果：

【React学习笔记】puComponent&ref等API_puComponent_03

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学习笔记】puComponent&ref等API_key_04

不过，实际上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;复制代码

呈现效果：同上