React-02虚拟DOM

1、把编写的JSX语法，编译为虚拟DOM对象

2、把虚拟DOM渲染为真实DOM

第一次渲染是直接从虚拟DOM转为真实DOM，但后期视图更新时需要通过DOM-DIFF的比对，判断需要更新的内容。

绑定事件

import React, { Component } from 'react'

export default class BindEvents extends Component {
  render() {
    return (
      <div>
        <input/>
        <button onClick={ () => {
          console.log('666');
        }}>add</button>
        <button onClick={ 
          this.handleClick
        }>add2</button>
        <button onClick={ 
          this.handleClick2
        }>add3</button>
      </div>
    )
  }

  handleClick() {
    console.log('666');
  }

  handleClick2 = () => {
    console.log('666');
  }
}

不推荐前两种，逻辑复杂不适合

React并不会把事件真正的绑定到每个标签元素上，而是采用事件的代理模式

ref

import React, { Component } from 'react'

export default class Ref extends Component {
  myref = React.createRef()
  render() {
    return (
      <div>
        <input ref={this.myref}/>
        <button onClick={ () => {
          console.log('click', this.myref.current.value);
        }}>hahah</button>
      </div>
    )
  }
}

状态

状态就是组件描述某种显示情况的数据，由自己设置和更改

import React, { Component } from 'react'

export default class StateTest extends Component {
  a = 1
  state = {
    mytext:'收藏'
  }

  render() {
    return (
      <div>
        <h1>欢迎来到React开发</h1>
        <button onClick={ () => {
          this.setState({
            mytext: '取消收藏'
          })
        }}>{this.state.mytext}</button>
      </div>
    )
  }
}

列表渲染

import React, { Component } from 'react'

export default class LoopRender extends Component {
  state = {
    list: ["1111", "2222", "3333"]
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map(item =>
          <li key={item}>{item}</li>)}
        </ul>
      </div>
    )
  }
}

条件渲染综合训练

import React, { Component } from 'react'
import './css/02-maizuo.css'
import Cinema from './maizuocomponent/Cinema';
import Center from './maizuocomponent/Center';
import Film from './maizuocomponent/Film';

export default class ChooseCard extends Component {
  state = {
    list: [
      {
        id:1,
        text: '电影'
      },
      {
        id:2,
        text: '影院'
      },
      {
        id:3,
        text: '我的'
      },
    ],
    current:0
  }

  which() {
    switch (this.state.current) {
      case 0:
        return <Film></Film>
      case 1:
        return <Cinema></Cinema>
      case 2:
        return <Center></Center>
      default:
        break;
    }
    
  }

  render() {
    return (
      <div>
       
       {
        this.which()
       }
       
        <ul>
          {
            this.state.list.map((item, index) =>
              <li key={item.id} className={this.state.current === index?'active':''}
              onClick={()=> this.handleClick(index)} >{item.text}</li>
              )
          }
        </ul>
      </div>
    )
  }
  handleClick(index) {
    console.log(index);
    this.setState({
      current:index
    })
  }
}

请求数据加渲染

import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


  constructor() {
    super()
    this.state = {
      cinemaList:[]
    }
    // axios.get('https://m.maizuo.com/gateway?cityId=230100&pageNum=1&pageSize=10&type=1&k=5955436')
    // .then(res => {
    //   console.log(res);
    // }).catch(err => {
    //   console.log(err);
    // })
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=230100&pageNum=1&pageSize=10&type=1&k=5955436',
      headers: {
        'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"16933775432950500798431233","bc":"230100"}',
        'X-host':'mall.film-ticket.film.list'
      },
      method: 'get'

    }).then(res => {

      this.setState({
        cinemaList:res.data.data.films
      })
      console.log(res.data.data.films);
    }).catch(err => {
      console.log(err);
    })
  }




  //生命周期函数更适合发送请求
  render() {
    return (
      <div>
        <ul>
          {
            this.state.cinemaList&&this.state.cinemaList.map(item => 
              <li key={item.filmId}>
                {
                <div>{item.name}</div>
                  // item.poster
                }
              </li>
                                                            )
          }
        </ul>
      </div>
    )
  }
}

注：map后item的箭头后不需要大括号(写习惯了不容易注意到问题)

常见错误：

这情况是由于数组当前未创建出来，还属于undefined，先进行判断，再map，可有效避免崩溃

setState

setState如果在同步环境中，是异步更新状态

setState如果在异步环境中，是同步更新状态

React18 中setState都是异步