react下的冒泡排序

函数组件下的冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 依次比较相邻的两个元素，如果后一个小于前一个，则交换，这样从头到尾一次，就将最大的放到了末尾。 -->
</head>
<body>

  <div id="app">
  </div>
  <script type="text/babel">

  function Sort(props){
    const num=props.number
    for(let i=0;i<num.length-1;i++){     
     //相当于：挨个取最大（最小）值，取length-1个值 ，因为最后未拿的值已经和之前取过的值均已进行了比较(需要进行排列的次数) 
      for(let j=0;j<num.length-1-i;j++){  
      //开始排序，控制比较次数(真正取值的循环)，-1是不和自己比较，-i是已经排序好的最大（最小）值的个数
      if (num[j]<num[j+1]){  //小于号：位置转换，表示大的值放在第一位 表示降序
        const temp=num[j] //临时变量 
          num[j]=num[j+1] 
          num[j+1]=temp
        }   
      }
    }
    return <ul>
    { num.map(n=><li>{n}</li>)
    }
    </ul>

  
  }


  const num=[1,23,45,12,335,6,46,7,78]
  ReactDOM.render(
    <Sort number={num}/>,
    document.getElementById('app')
  )
  </script>
</body>

</html>

类组件下的冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 依次比较相邻的两个元素，如果后一个小于前一个，则交换，这样从头到尾一次，就将最大的放到了末尾。 -->
</head>
<body>
  <div id="app">
  </div>
   <script type="text/babel">
   class Order extends React.Component {
        constructor(props){
          super(props)
          this.state={
            newarr:[]
          }     
        }
        componentDidMount() {
          console.log(arr.length)
          for(let i=0;i<arr.length-1;i++){
          for(let j=0;j<arr.length-1-i;j++){
            const temp=arr[j]
            if(arr[j]>arr[j+1]){
              arr[j]=arr[j+1]
              arr[j+1]=temp
            }
         
         }    
       }    
       this.setState({
         newarr:arr
       })
    }
    
      render(){
        return <div>{this.state.newarr.map(n=><li key={n}>{n}</li>)}</div>
      
      }

   }
   const arr=[13,22,53,24,123,992,111,9,0]
   ReactDOM.render(
    <Order arr={arr}/>,
     document.getElementById('app')
   )
  </script>
</body>

</html>

理解的可能不是很好，望见谅。谢谢您的查看，希望能对你有所帮助，如有更好的理解与代码优化的建议请滴滴我，让我们共同进步。