其他分享
首页 > 其他分享> > Recat PureComponent

Recat PureComponent

作者:互联网

PureComponent

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

浅比较:新修改的数据与原本的数据如果一样则不予更新,否则更新

1) 字符串正常
2) 对象的话,存的是地址,比较的也是地址,按照地址再去找具体的值,所以没更换新地址的话,那么原本去赋值就不太行,
需要解构赋值,this.setState({list:[…list]})

Component 不管与原数据是否一样都重新全部更新
–App.js

import React, {PureComponent, Component } from 'react';
// Component  不管与原数据是否一样都重新全部更新
// PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,// 其他和 Component 完全一致// 浅比较:新修改的数据与原本的数据如果一样则不予更新,否则更新//        1) 字符串正常//        2) 对象的话,存的是地址,比较的也是地址,按照地址再去找具体的值,//                  所以没更换新地址的话,那么原本去赋值就不太行,//                需要解构赋值,this.setState({list:[...list]})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:"红牛"})
        }}>升级</button>

        <button onClick={()=>{
          list.push("新口味");
          // 使用PureComponent时,注意使用解构赋值的方式!!!
          this.setState({list:[...list]})
          //this.setState({list}) //PureComponent下使用这个的话,扩大功能实现不了
        }}>扩大</button>
      </div>
    )
  }}
export default App;
–index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  // <React.StrictMode>
    <App />,
  // </React.StrictMode>,
  document.getElementById('root'));

component与PureComponent的区别
如果使用Component,则不管与原数据是否一样都会重新全部更新;
以下是使用 PureComponent 的情况:修改的数据与原本的若一样则不予更新
在这里插入图片描述
点 升级 按钮:
在这里插入图片描述
点 扩大 按钮:
在这里插入图片描述

ref

旧版 - string ref
主流 - createRef()

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

本次结合一个滚动小插件来使用ref:

new BScroll():()内填入要滚动的对象,比较适用于移动端,可以拖拽,不能滚轮滑动

1.旧版用法示例:

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

// 滚动小插件:// new BScroll(),()内填入要滚动的对象// 注意:只能在 组件挂载完成之后及更新之后使用!!!!!!
// 新的小写法 ~ ~ ~

let list = [...(".".repeat(100))];
console.log(list)
class App extends PureComponent {
    // 新版的一个小弊端:需要新的话需要再重新创建一个,再绑到一个新的
    // box = createRef();// 2.新版ref写法(主流方式)-----  需要先在类里创建一个空的,存在box当中
    // list = createRef();
    componentDidMount(){
        console.log(this); //新版的写法时,不在refs里了,多了一个box,box: {current: div}
        console.log(this.refs); //ref的集合,旧版含有集合,新版写法里没有 
        console.log(this.refs.box);
        // console.log(this.box.current);
        new BScroll(this.refs.box);//1.旧版 ***
        // new BScroll(this.box.current);//2.新版-----
    }
    render(){
      return(
        <div  style={{
                height:"300px",
                border:"1px solid #000",
                overflow:"hidden"
              }}
              ref="box"       // 1.旧版***  绑定  其他地方例如:挂载完成之后及更新之后的生命周期函数 可以获取到
              // ref = {this.box}   // 2.新版----- 绑到box上,box属性中存了一个ref
        >
            <ul style={{
                  margin:0,
                  padding:0,
                  listStyle:"none"
                }}
                ref="list"
                // ref = {this.list}  //输出this时,则会多出一个list属性   list: {current: ul}
            >
                  {
                    list.map((item,index)=>{
                      return <li key={index}>这是第{index+1}个li</li>
                    })
                  }
            </ul>
        </div>
      )
    }
    }
export default App;

在这里插入图片描述
1.新版、主流版本用法示例:

import React, {PureComponent, createRef } from 'react';
import BScroll from "better-scroll"
let list = [...(".".repeat(100))];
console.log(list)
class App extends PureComponent {
  // 新版的一个小弊端:需要新的话需要再重新创建一个,再绑到一个新的
  box = createRef();// 2.新版ref写法(主流方式)-----  需要先在类里创建一个空的,存在box当中
  list = createRef();
  componentDidMount(){
    console.log(this); //新版的写法时,不在refs里了,多了一个box,box: {current: div}
    console.log(this.refs); //ref的集合,旧版含有集合,新版写法里没有 
    console.log(this.box.current);
    new BScroll(this.box.current);//2.新版-----
  }
  render(){
    return(
      <div style={{
	        height:"300px",
	        border:"1px solid #000",
	        overflow:"hidden"
	      }}   
     	 ref = {this.box}   // 2.新版----- 绑到box上,box属性中存了一个ref      
      >

	          <ul style={{
	              margin:0,
	              padding:0,
	              listStyle:"none"
	            }
	         ref = {this.list}  //输出this时,则会多出一个list属性   list: {current: ul}
	          >
	                {
	                  list.map((item,index)=>{
	                    return <li key={index}>这是第{index+1}个li</li>
	                  })
	                }
	          </ul>
      </div>
    )
  }}
export default App;

在这里插入图片描述

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

children
传递函数
传递子组件
示例一:
import React, {PureComponent} from 'react';
class Child extends PureComponent {
  render(){
    console.log(this); //接收到了,在props里
    let {children} = this.props;
    return(
    <div>{children}</div>
    )
  }}
class App extends PureComponent {
  render(){
    return(
      <div>
          <Child>
            {/* 传标签或者字符串都可 */}
            <h1>今天的天气很不错</h1>
            <p>明天的天气也还行</p>
            {
              ["呵呵","哈哈"]
            }
          </Child>
      </div>
    )
  }}
export default App;

在这里插入图片描述
示例二:弹框需求

import React, {PureComponent} from 'react';
class Popwindows extends PureComponent {
  state={
      close:false
    }
  render(){
    let {close} = this.state;
    let {children} = this.props;
    return(<div style={{
      border:"1px solid #000",
      display:close ? "none" :"block"
    }}>
        {/* 外面传什么这里自定义的children显示什么 */}
        {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>
          <p>夏天都快过去了</p>
        </Popwindows>):""}
        {man?(<Popwindows>
          <h1>秋天快乐</h1>
          <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>
          <p>夏天都快过去了</p>
          `class App extends PureComponent {
  render(){
    return(
      <div dangerouslySetInnerHTML={{
          __html:message
      }}>
      </div>
    )
  }}
export default App;

key 的问题

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

import React, {PureComponent} from 'react';
class App extends PureComponent {
  state={
    data:[
      {
        id:0,
        content:"第1条数据"
      },
      {
        id:1,
        content:"第2条数据"
      },
      {
        id:2,
        content:"第3条数据"
      },
      {
        id:3,
        content:"第4条数据"
      },
      {
        id:4,
        content:"第5条数据"
      }
    ]
  }
  render(){
    let {data} = this.state;
    return(
      <div>
        {
          data.map((item,index)=>{
            {/* 尽量不要用下标索引值index为key,有一个变则会整体都变,很耗性能。  
                用id则会一一进行对比,看是否发生了改变,没变则不动,改变的则进行变动。则只会改变选中的id对应的数据,不会整体都变
                DOM最耗性能,计算功能本来就是计算机擅长的
            */}
            // return <p key={index}>  
            return <p key={item.id}>  
                      {item.content}
                      <a onClick={()=>{
                        data = data.filter(itemData=>itemData!==item)
                        this.setState({
                          data:[...data]
                        })
                      }}>删除</a>
                    </p>
          })
        }
      </div>
    )
  }}
export default App;

当使用id时 return

,则只会改变选中的id对应的数据 √
在这里插入图片描述
在这里插入图片描述
当使用index时 return

,则数据整体都变,耗性能
在这里插入图片描述

标签:box,return,ref,App,list,PureComponent,Recat
来源: https://blog.csdn.net/Y2730415540/article/details/110826013