React 属性, 函数式组件以及Hook

---

五个属性: PureComponent、ref、children、dangerouslySetInnerHTML、key

React的五个属性

PureComponent

个人理解是PureComponent 是类组件的情况下,它是用来继承的

pureComponent 提供了一个具有浅比较,的shouldComponrentUpdate方法其他和component完全一致

是react中创建组件的一种方式,可以减少不必要的更新,易于实施,进而提升性能,每次更新会自动帮你对更新前后的props和state进行一个简单对比, 来决定是否进行更新.只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render 操作的次数，从而提高性能，而且可以少写 shouldComponentUpdate 函数，节省了点代码。

import React, {
   PureComponent, Component} from 'react';

class App extends PureComponent {
   

  state = {
   
    name:'张三',
    list:["张三01","张三02","张三03"]
  }

  render(){
   
    let {
   name, list} = this.state;
    return (
      <div>
        <h1>{
   name}</h1>
        <ul>
          {
   
            list.map((item,index)=>{
   
              return <li key={
   index}>{
   item}</li>
            })
          }
        </ul>

        <button onClick={
   ()=>{
   
          this.setState({
   name:'yyqx'})
        }}>升级</button>

        <button onClick={
   ()=>{
   
          list.push('新人');
          this.setState({
   list:[...list]})
        }}>扩大</button>

      </div>
    )
  }
}

export default App;

以上这个案例当继承PureComponent时,list:[...list]必须写成这样扩大的这个按钮才会新增数据的; 当继承Component时, list:[...list]也可以写成list

ref

• 注意: 再组件挂载完成之后及更新之后使用

• 旧版 ref —> 字符串类型绑定

  先安装npm i better-scroll

  再引入 import BScroll from "better-scroll";

  import React, {
       PureComponent, Component} from 'react';
  import BScroll from "better-scroll";
  // new BScroll()
  
  let list = [...('.'.repeat(100))];
  // console.log(list);
  
  class App extends PureComponent {
       
    // 组件挂载完成之后
    componentDidMount(){
       
      // 通过this.refs绑定ref的名字来获取dom节点
      // console.log(this.refs.box);
      new BScroll(this.refs.box);
    }
  
    render(){
       
      return (
        <div style={
       {
       
          height:'300px',
          border:'1px solid red',
          overflow:'hidden'
        }} 
        ref='box'
        >
          <ul style={
       
            {
       margin:0,padding:0,listStyle:'none'}
          }>
            {
       
              list.map((item,index)=>{
       
                return <li key={
       index}>这是第{
       index}个li</li>
              })
            }
          </ul>
        </div>
      )
    }
  }
  export default App;
  

  这个案例中滚动效果是可以实现的,但是控制台会给一个提示Warning: A string ref, "box", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here (字符串ref， “box”，在严格模式树中被发现。字符串引用是潜在错误的来源，应该避免); 可以把index.js中的<React.StrictMode></React.StrictMode>这个标签删除掉就不会警告了; 此时就要用到下面的这个方法了.

• 新版 ref —> createRef()

  通过在class中使用createRef()方法创建一些变量,可以将这些变量绑定到标签的ref中,那么该变量的current则指向绑定的标签dom

  import React, {
       PureComponent, Component, createRef} from 'react';
  import BScroll from "better-scroll";
  
  // new BScroll()
  
  let list = [...('.'.repeat(100))];
  // console.log(list);
  
  class App extends PureComponent {
       
    box = createRef();
  
    componentDidMount(){
       
      // console.log(this);
      // console.log(this.box.current);
      new BScroll(this.box.current)
    }
  
    render(