react讲解

Posted 2021-08-29 stay_少年与梦

文章目录

• 前言
• 一、PureComponent
• • • • • 代码解释：
      • PureComponent和Component的区别:
• 二、ref
• • 作用：获取react的DOM的节点
  • • 代码如下：
• 三.children
• • 代码示例：
  • • dangerouslySetInnerHTML
    • key 的问题
• 总结

---

前言

今天我们来学习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

key 的问题

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

---

总结

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