react学习过程记录3（包含项目中出现的问题）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kellywong/article/details/81977566

1. 项目中对于一个简单的图片轮播的完成到修改

1. 首先采用的jquery，那需要在组件中引入jquery : import $ from 'jquery' 然后利用jquery的animate()函数来实现图片滑动

const getPage = (value) =>{   
     let count=parseInt($('#1').attr('data-count'))
     //初始显示图片数
     let viewcount=4
     let n=count-viewcount
     value > n || 0 > value ||  $('#1').animate({
         left: -300 * value+'px'
     })
      $('#1').attr('data-curPageIndex',value)
      $('.arrow_l').removeClass("hidden")
      $('.arrow_r').removeClass("hidden")
      0 == value && $('.arrow_l').addClass("hidden")
      value == n && $('.arrow_r').addClass("hidden")
 }

 const  next = () =>{
     let curPageIndex=parseInt($('#1').attr('data-curPageIndex'))
     getPage(curPageIndex+1)
 }
 const pre = () => {
     let curPageIndex=parseInt($('#1').attr('data-curPageIndex'))
     getPage(curPageIndex-1)

 }

1. 然后考虑采用原生的js实现，只要把上面的相应的jquery方法换成js原生的就可以了，主要是animate()这个函数用什么取代，开始写的div.style.left然后发现专场特别生硬，后边了解可以使用动画div.style.cssText= "transition-duration: 500ms;transition-timing-function: ease-out;transform: translatex(-"+value*300+"px);width:10000px"
2. 再然后就是考虑使用react怎么实现，那就要想到是把一些当前图片的序号啥的变量写到组件的state中，然后使用this.setState({})修改。

2. 因为采用sort()会改变数组本身的问题

我们在使用有关数组的函数一定要注意改函数是否会改变数组本身，在项目中开始没有注意到这个问题，导致每次onclick重新加载HotRank的时候，我们在对数组排序的时候并不是采用的原始数组，而是第一次就被改变之后的数组，这样会导致本该一致的展示出现不一致问题。（一点小问题居然困扰了我很久。。。）

3. 怎么把组件中的handle函数从组件中分离出来放到imvc框架的controller中

很简单的，可以把原来写到组件this.state{}中的组件内部状态，以及利用this.setState({})来控制状态，修改成把初始状态放到整个项目的model的初始状态中，利用UPDATE-STATE({})来更新状态即可。。。然后在组件内部this.props.handles接受这些函数并使用，需要注意的是，函数必须以handle-开头