react讲解

Posted stay_少年与梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;


总结

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

以上是关于react讲解的主要内容,如果未能解决你的问题,请参考以下文章

react讲解

react讲解

react讲解

使用 Ajax 在 React 中打开天气数据

react讲解(函数式组件,react hook)

react讲解(函数式组件,react hook)