React-3.1 类式组件、todoList（类版本）实战

1. 内容回顾

• 组件间的信息传递
• 生命周期
• 受控组件

2. 学习目标

• 掌握React其他 API 使用：PureComponent、ref、children、dangerouslySetInnerHTML、key
• 掌握函数式组件及常见 hooks 的使用
• 可以独立开发基于Hooks 或 Component 的 todoList 应用

3. 学习内容

3.1 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 的情况：修改的数据与原本的若一样则不予更新
点 升级 按钮：

点 扩大 按钮：

3.2 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;

2. 新版、主流版本用法示例：

import React, {
   PureComponent, createRef } from 'react'