taro坑之 父子通信 在父组件数据更新后 子组件时而可以接受到最新变化的值（导致子组件不更新渲染页面） 时而接受不到 暂时的处理方式是不使用组件嵌套 直接在父组件中完成

import Taro, { Component } from '@tarojs/taro'

import { observer, inject } from '@tarojs/mobx'

import { fromJS, is ,List} from 'immutable'

import DraggableArea from "../../components/DraggableArea"

import { View, Text,Input,Image, ScrollView ,MovableArea, MovableView} from '@tarojs/components'

import SearchService from '../../common/service/SearchService'

import './index.styl'

import eyePng from '../../images/eye.png'

import loadPng from '../../images/load.png'

import chaPng from '../../images/cha_icon.png'

import {throttle} from "../../common/Utils"

 

@inject('counterStore')

@observer

class Index extends Component {

 

constructor(props){

super(props);

this.state = {

Sort:[],

moreSortList:[],

x:0,

y:0,

hidden:true,

flag:false,

// flag:true

disabled: true,

elements:[],

beginIndex:0

}

}

componentWillMount () {

}

componentWillUnmount () {

// 返回首页进行刷新操作

this.props.counterStore.dispatch('curIndex',0)

 

}

componentDidMount () {

 

var query = Taro.createSelectorQuery();

var nodesRef = query.selectAll(".item");

nodesRef.fields({

dataset: true,

rect:true

 

},(result)=>{

this.setState({

elements: result

})

}).exec()

}

 

componentWillReceiveProps(nextProps){

if(!is(fromJS(this.props), fromJS(nextProps))){

}

}

shouldComponentUpdate(nextProps, nextState) {

// console.log('!is(fromJS(this.props), fromJS(nextProps))',!is(fromJS(this.props), fromJS(nextProps)))

// console.log('!is(fromJS(this.state),fromJS(nextState))',!is(fromJS(this.state),fromJS(nextState)))

return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))

}

handleTag(param){

//this.handleData()

throttle(this.handleData,10,param).call(this)

}

handleData(){

const that = arguments[0]

const param = arguments[1]

that.state.Sort.length&&that.state.Sort.splice(that.state.Sort.findIndex(v => v.catCode === param.catCode), 1)

const moreAry = [...that.state.moreSortList,param]

that.reSort()

setTimeout(()=>{

that.setState({

moreSortList:JSON.parse(JSON.stringify(moreAry))

})

},0)

that.props.counterStore.dispatch('catList',that.state.Sort)

// 同时往moreSortList数组中增加内容并持久化

// const moreAry = JSON.parse(JSON.stringify(that.state.moreSortList))

//console.log(that.state.moreSortList,"moreSortList=====")

Taro.setStorageSync('moreSortList',moreAry)

}

addTag(item){

throttle(this.addData,10,item).call(this)

}

addData(){

// 删除更多分类中的选项

// 找一个当下不变的方法

const that = arguments[0]

const item = arguments[1]

that.state.moreSortList.length&&that.state.moreSortList.splice(that.state.moreSortList.findIndex(v => v.catCode === item.catCode), 1)

Taro.setStorageSync('moreSortList',that.state.moreSortList)

//从第二个位置插入

that.state.Sort.splice(2,0,item);

const sort = JSON.parse(JSON.stringify(that.state.Sort))

that.reSort()

// 1.不render的原因:立马就把值修改了 相当于 这次和上次的值是一样的 所以不再刷新了 而增加的时候 是因为误操作了一个touchend事件 导致state变化了 还有moreSortList的变化

// 2.baidu小程序的特殊处理 重新render的方式

that.setState({

Sort:sort

})

that.props.counterStore.dispatch('catList',that.state.Sort)

}

reSort(){

this.state.Sort.map((item,index)=>{

item.curIndex = index

return item

})

}

longTap(e){

e.stopPropagation();

if((this.state.beginIndex===0 || this.state.beginIndex ===1)){

// flag 不会变成true 下面的touchMove移动距离不会执行

return

}

this.setState({

x: e.currentTarget.offsetLeft,

y: e.currentTarget.offsetTop,

hidden: false,

flag:true

})

}

touchStart(item,e){

this.setState({

beginIndex:e.currentTarget.dataset.index

})

}

flagTag(endIndex){

return (endIndex===0 || endIndex ===1)

}

touchEnd(item,e){

e.stopPropagation();

if (!this.state.flag) {

return;

}

const x = e.changedTouches[0].pageX

const y = e.changedTouches[0].pageY

const list = this.state.elements

let data = this.state.Sort

var flags =false

for (let i = 0; i < data.length; i++) {

// 任何进入的都需要把虚线去掉

data[i].chosen = 0

if(i === data.length-1){

flags = true

}

}

for(var j = 0; j<list.length; j++){

const item = list[j];

if(x>item.left && x<item.right && y>item.top && y<item.bottom){

// 在拖动范围内的做换位操作 否则不做换位操作

const beginIndex = this.state.beginIndex;

const endIndex = item.dataset.index;

//向后移动

if(!this.flagTag(endIndex)){

if (beginIndex < endIndex) {

let tem = data[beginIndex];

for (let i = beginIndex; i < endIndex; i++) {

data[i] = data[i + 1]

data[i].curIndex = i

}

// 结束位置是0或者1 不做换位操作

data[endIndex] = tem;

data[endIndex].curIndex = endIndex

}

//向前移动

if (beginIndex > endIndex) {

let tem = data[beginIndex];

for (let i = beginIndex; i > endIndex; i--) {

data[i] = data[i - 1]

data[i].curIndex = i

}

// 结束位置是0或者1 不做换位操作

data[endIndex] = tem;

data[endIndex].curIndex = endIndex

}

this.props.counterStore.dispatch('catList',data)

}

 

// 替换完成flag 为true 遮罩层隐藏

//this.props.counterStore.dispatch('catList',data)

}

 

}

this.setState({

flag: false,

hidden: true

})

// this.props.counterStore.dispatch('catList',data)

}

touchMove(item,e){

e.stopPropagation();

if(this.state.flag){

const x = e.touches[0].pageX

const y = e.touches[0].pageY

this.setState({

x: x-75,

y: y - 80

})

// 执行了拖拽操作的元素在拖拽过程中增加虚线框的操作

const list = this.state.elements

// Sort 是第一次render时候拿到的首页的sort列表

let data = this.state.Sort

for(var j = 0; j<list.length; j++){

const item = list[j];

if(x>item.left && x<item.right && y>item.top && y<item.bottom){

 

const endIndex = item.dataset.index;

// 如果结束位置是0 或者是1 则不增加虚线 其他情况在移动过程中给结束位增加虚线

if(!this.flagTag(endIndex)){

data[endIndex].chosen = 1

}

// 开始位置赠加虚线

data[this.state.beginIndex].chosen = 1

}

}

//this.props.counterStore.dispatch('catList',data)

}

}

 

render () {

const { counterStore: { catList } } = this.props;

const {moreSortList} = this.state

// console.log('rendermoreSortList====',moreSortList)

if(Taro.getStorageSync('moreSortList')){

// console.log('Taro.getStorageSync',Taro.getStorageSync('moreSortList'))

const localMore = Taro.getStorageSync('moreSortList')

this.setState({

moreSortList:localMore

})

}

const newSort = catList.slice()

//const newSort = Taro.getStorageSync('catList')

// 不通过props刷新更新数据 优化页面渲染速度

this.setState({

Sort:newSort

})

const cardItem = newSort.map((item,index)=>{

return <View key={item.curIndex} data-index={item.curIndex} onLongPress={this.longTap} onTouchStart={this.touchStart.bind(this,item)} onTouchMove={this.touchMove.bind(this,item)} onTouchEnd={this.touchEnd.bind(this,item)} className={`item ${item.chosen?'dash':''}`}>

<View>{`${item.catName}`}</View>

 

{index>1&&<Image src={chaPng} className='close' onClick={this.handleTag.bind(this,item)}></Image>}

</View>

})

 

const cardItem2 = moreSortList.length&&moreSortList.map((item,index)=>{

return <View class='item' key={item.curIndex} onClick={this.addTag.bind(this,item)}>

<View>{item.catName}</View>

<View className='add'>+</View>

</View>

})

return (

<View className='sort'>

<View className='my_sort'>

<View className='block'>

<View className='line'></View>

<Text className='title' >常用分类</Text>

<Text className='tip'>点击可删除分类</Text>

</View>

<View className='drag'>

<movableArea>

<View className='drags'>

{cardItem}

</View>

<movableView x={this.state.x} y={this.state.y} direction='all' damping='6000' friction='500' disabled={this.state.disabled} inertia='false'>

<View className='item-move' hidden={this.state.hidden}>

{this.state.Sort.length&&this.state.Sort[this.state.beginIndex]&&this.state.Sort[this.state.beginIndex].catName}

</View>

</movableView>

</movableArea>

</View>

</View>

<View className='more_sort'>

<View className='line'></View>

<View className='block'>

<View className='line'></View>

<Text className='title' >可选分类</Text>

<Text className='tip'>点击可添加</Text>

</View>

{moreSortList.length&&<AddTag sort={moreSortList} onHandleTag={this.addTag} />}

// moreSortList 在子组件中可能会更新 但是也有偶发不能更新的情况

// 处理方式是把组件中的内容移回到父组件中才可以渲染子组件内容

</View>

</View>

)

}

}

 

export default Index