为什么 PanResponder 不能使用 useEffect Hook？

Question

我正在尝试使用 useEffect 来替代 ComponentWillMount 方法。但是 panresponder 变量不是在初始渲染之前创建的。 如果我在这里做任何错误，谁能告诉我吗？如果没有 useEffect，页面将被渲染。未捕获手势。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>      const makeup = () => {
        useEffect(() => {
            console.log('I am about to render!');
            const panResponder = useRef(
              PanResponder.create({
                onStartShouldSetPanResponder: (e, gestureState) => true,
                onPanResponderMove: (e, gestureState) => {....},
                onPanResponderRelease: (e, gestaureState) => {....}
              }));
          },[]);

        return ARTICLES.map((item, i) => {
          console.log("Makeup i:"+i+" item:"+item);
          if (i === index.currentIndex - 1) {
            return (
              <Animated.View
                key={item.id}
                style={swipeCardPosition.getLayout()}
                {...panResponder.panHandlers}
              >
                  
              </Animated.View>
            );
          }
          if (i < index.currentIndex) {
            return null;
          }
          return (
            <Animated.View
              key={item.id}
              style={index.currentIndex === i ? position.getLayout() : null}
              {...(index.currentIndex === i
                ? { ...panResponder.panHandlers }
                : null)}
>
            </Animated.View>
          );
        }).reverse();
      };

Answer 1

Check the official docs. 它描述了如何使用 PanResponder 功能组件。

例如：

const ExampleComponent = () => {
  const panResponder = React.useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: (e, gestureState) => true,
      onPanResponderMove: (e, gestureState) => {....},
      onPanResponderRelease: (e, gestaureState) => {....}
    })
  ).current;

  return <View {...panResponder.panHandlers} />;
};

您的示例无法运行，原因有很多，尤其是因为您 can't call useRef inside useEffect.