Ios 动画。视图+平移响应器会对React Native中的每个像素重新渲染

我想在UITableViewCell中实现平移手势。我成功地做到了这一点；但是，平移手势会导致为每个像素调用shouldUpdateComponent。即使我将translateX属性存储为类变量

class ThreadCell extends React.Component {
    shouldComponentUpdate(nextProps, nextState){
        //Problem: This calls for every pixel moved.
        console.log("shouldComponentUpdate");
        return true;
    }
    translateX = new Animated.Value(0);
    panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: (e, gs) => { return true; },
        onMoveShouldSetPanResponderCapture: (e, gs) => {  return gs.dx > 0 },
        onPanResponderMove: (e, gestureState) => { 
            if(gestureState.dx > 0) { 
                this.props.setScrollEnabled(false)
                Animated.event([null, {dx: this.translateX}])(e, gestureState) 
            }
        },
        onPanResponderTerminate: (e, gestureState) => {
            console.log("terminate");            
            Animated.spring(this.translateX, {
                toValue: 0,
                bounciness: 1
            }).start();
        },
        onPanResponderRelease: (e, {vx, dx}) => {
            console.log("release. DX: ", dx);
            Animated.spring(this.translateX, {
                toValue: 0,
                bounciness: 8,
                speed:48,
            }).start((result) => {
                if(dx > 24){
                    this.props.onMenuSwipe(this.props.sectionTitle, this.props.threadId)                    
                }else{
                    console.log("nah");
                }
            });
        },
    });
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View>
                <Animated.View
                    style={{transform: [{translateX: this.translateX}]}}  {...this.panResponder.panHandlers}
                >
                <Text>Stuff Here</Text>
                </Animated.View>
            </View>
         )
     }
}

在onPanResponderMove中调用this.props.setScrollEnabledfalse，每当手势移动时都会调用它

this.props.setScrollEnabledfalse可能会在父组件中设置状态，因此它会重新呈现，这反过来会导致调用所有子组件的shouldComponentUpdate，除非它连接到启用纯配置的Redux

您可以将SetScrolEnabled移动到onStartShouldSetPanResponder，以便仅在手势开始时调用它：

onStartShouldSetPanResponder: (e, gs) => {
  if (gs.dx > 0) {
    this.props.setScrollEnabled(false);
  }
  return true;
},

或者，在父组件中调用setState之前，检查所需状态更改是否与当前状态不同：

setScrollEnabled(enable) {
  if (this.state.enable !== enable) {
    this.setState({ enable });
  }
}

---

如果您可以添加一个工作线程来调试该问题，那就太好了。添加将SetScrolEnabled prop传递给ThreadCell的父组件代码