react讲解

---

前言

今天我们来学习react 的PureComponent、ref、children、dangerouslySetInnerHTML以及key的一些内容。

---

一、PureComponent

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

代码示例：

import  React,{PureComponent} from 'react';
 
class App extends PureComponent {

  state ={
    name: '尖叫',
    list:["运动饮料1","运动饮料2","运动饮料3",]
  }
  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:"红牛"})
      }
        
      }>升级</button>

      <button onClick={()=>{
        list.push("新口味");
        this.setState({list:[...list]})
      }}>扩大</button>
    </div>
  );
  }
  
}

export default App;

代码解释：

加上PureComponent之后,只能浅显进行比较,如果数据是对象直接赋值没有结果,如果用结构赋值,可以触发,如果是字符串,或数值可以直接输出

// this.setState({list:[…list, ]}) 可以输出值

PureComponent和Component的区别:

​ PureComponent每次做修改,只有发生变化后才会修改;

​ Component:每次做修改,无论和原数组是否一样都会更新。

二、ref

作用：获取react的DOM的节点

案例：利用ref 做一个滚动效果
步骤：
1.首先: 安装better-scroll插件 npm install better-scroll

​ 2.接着引入better-scroll

​ 3.使用better-scroll 需要实例化(dom节点)

dom节点通过ref设置,this.refs获取

代码如下：

import  React,{createRef, PureComponent} from 'react';
 
import BScroll from 'better-scroll'


 // new BScroll()


 let list =[...(".".repeat(100))];
 console.log(list);
class App extends PureComponent {

  box = createRef();
  list = createRef();
  componentDidMount(){
    console.log(this.refs);
    // new BScroll(this.refs.box)

    new BScroll(this.box.current)
  }

  render() {

    
    return (
    <div style={{
      height:"300px",
      border:"1px solid #000",
      overflow:"hidden",
    }}
       ref="box"
      ref = {this.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;

三.children

组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
可以自定义结构的组件的常用形式
- children
- 传递函数
- 传递子组件

代码示例：

import  React,{ PureComponent} from 'react';
 

class Popwindows extends PureComponent {

  state ={
    close:false,
  }
  render() {
    // console.log(this);

    let {close} =this.state;
    let {children} = this.props;
    return (
      <div style={{
        border: '1px solid #000',
        display:close? "none":"block"


      }}>{children}

      <button onClick={()=>{
        this.setState({close:true})
      }}> 关闭</button>
      
    </div>
    )
  }
}


class App extends PureComponent {

  state ={
    show:false,
    man:false,
  }
  render() {

    let {show,man} = this.state;
    return (
    <div>

      {show?(<Popwindows>
        <h1>夏天快乐</h1>
         <h1>今天天气不错</h1>
        <p>明天也还行</p>
        <p>夏天快都</p>
      </Popwindows>):""}

      {
        man?(<Popwindows>
          <h1>夏天快乐</h1>
           <h1>今天天气不错</h1>
          <p>秋天</p>
          <p>夏天快都</p>
        </Popwindows>):""
      }

      <button onClick={()=>{this.setState({show:true})
      }}
      >显示弹框</button>
      <button onClick={()=>{this.setState({man:true})
      }}
      >显示秋天</button>
    </div>
  )
  }
  
}

export default App;

dangerouslySetInnerHTML

直接设置标签的 innerHTML

代码示例：

import  React,{ PureComponent} from 'react';
 



 let message = `<h1>夏天快乐</h1>
 <h1>今天天气不错</h1>
<p>明天也还行</p>`;

class App extends PureComponent {

  render() {

    
    return (
    <div dangerouslySetInnerHTML={{__html:message}}>

    </div>
  )
  }
  
}

export default App;

key 的问题

在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比

代码示例：

import  React,{ PureComponent} from 'react';
 




class App extends PureComponent {


  state={
    data:[
      {
        id:0,
        content: '第一条数据'
      },
      {
        id:1,
        content: '第2条数据'
      },
      {
        id:2,
        content: '第3条数据'
      },
      {
        id:3,
        content: '第4条数据'
      },
      {
        id:4,
        content: '第5条数据'
      },
      {
        id:5,
        content: '第6条数据'
      },
 
    ]
  };
  render() {
    let {data} = this.state;
    
    return (
    <div>
      {
        data.map((item, index)=>{
          return <p key={index}>
            {item.content}
            <a onClick={()=>{
              data=data.filter(itemData=>itemData !== item)
              this.setState({
                data:[...data]
              })
            }}>删除</a>
          </p>
        })
      }
    </div>
  )
  }
  
}

export default App;

---

总结

今天学习的内容不多，也不是很难，对我们的学习有很大的帮助，我们要好好学习一下。