react中的虚拟DOM，jsx，diff算法。让代码更高效

Posted 2020-11-22 菜鸟小何

在react中当你的状态发生改变时，并不是所有组件的内容销毁再重建，能复用的就复用

react 组件其实 就是按照层级划分的

找到两棵任意的树之间最小的修改是一个复杂度为 O(n^3) 的问题.

你可以想象, 我们的例子里这不是容易处理的. React 用了一种简单但是强大的技巧, 达到了接近 O(n) 的复杂度. --- diff 算法 （以前是电脑的键盘坏了换一个电脑，现在是键盘坏了直接换键盘） React 仅仅是尝试把树按照层级分解. 这彻底简化了复杂度, 而且也不会失去很多, 因为 Web 应用很少有 component 移动到树的另一个层级去. 它们大部分只是在相邻的子节点之间移动.

例1：（按层级划分）

import React, { Component } from ‘react‘
import MyCom from ‘./MyCom‘;
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
      first: true
    }
  }
  changeHandler (event) {
    console.log(event.currentTarget.checked)
    this.setState({
      first: event.currentTarget.checked
    })
  }
  render () {
    if (this.state.first) {
      return (
        <div>
          <h1>diff算法</h1>
          <input type="checkbox" checked={ this.state.first } onChange = { this.changeHandler.bind(this) }/>
          <p>为真我就显示</p>
        </div>
      )
    } else {
      return (
        <div>
          <h1>diff算法</h1>
          <input type="checkbox" onChange = { this.changeHandler.bind(this) }/>
          <p>为假我就显示</p>
        </div>
      )
    }
    
  }
}

例2（利用列表的key）

import React, { Component } from ‘react‘
import MyCom from ‘./MyCom‘;
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
      list: [‘aa‘, ‘bb‘, ‘cc‘, ‘dd‘]
    }
  }
  shouldComponentUpdate () {
    // return false
    return true
  }
  addItemnext () {
    let arr = this.state.list
    arr.push(‘eee‘)
    this.setState({
      list: arr
    })
  }
  addItemprev () {
    let arr = this.state.list
    arr.unshift(‘ff‘)
    this.setState({
      list: arr
    })
  }
  addItemcenter () {

  }
  render () {
    return (
      <div>
        <button onClick={ this.addItemnext.bind(this) }>后面加</button>
        <button onClick={ this.addItemprev.bind(this) }>前面加</button>
        <button onClick={ this.addItemcenter.bind(this) }>中间加</button>
        <ul>
          { this.state.list.map((item, index) => {
            return (<li key={item}>{ item }</li>)
          })}
        </ul>
      </div>
    )
  }
}

例3

import React, { Component } from ‘react‘
import MyCom from ‘./MyCom‘;
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
      list: [‘aa‘, ‘bb‘, ‘cc‘, ‘dd‘]
    }
  }
  shouldComponentUpdate () {
    // return false
    return true  //要么不写，写的话只可以写true 不然不会更新
  }
  addItemnext () {
    let arr = this.state.list
    arr.push(‘eee‘)
    this.setState({
      list: arr
    })
  }
  addItemprev () {
    let arr = this.state.list
    arr.unshift(‘ff‘)
    this.setState({
      list: arr
    })
  }
  addItemcenter () {

  }
  render () {
    return (
      <div>
        <button onClick={ this.addItemnext.bind(this) }>后面加</button>
        <button onClick={ this.addItemprev.bind(this) }>前面加</button>
        <button onClick={ this.addItemcenter.bind(this) }>中间加</button>
        <ul>
          { this.state.list.map((item, index) => {
            return (<li key={item}>{ item }</li>)
          })}
        </ul>
      </div>
    )
  }
}