在自定义组件内调用 useState Hook 时，React Native TextInput ReRenders

Question

描述 当 TextInput 组件触发诸如 onChangeText 或 onKeyPress 方法之类的操作，然后触发 setState 时，该组件将重新渲染并失去焦点。

React Native 版本： 0.62（因使用Expo而无法升级）

重现步骤 提供重现问题的步骤的详细列表。

1. 创建一个简单的自定义包装组件
2. 声明 useStateHook
3. 通过直接 JSX 或自定义组件将 TextInput 传递到包装器组件
4. 将 setState 函数绑定到 TextInput 的任何事件监听器。

预期结果 设置状态但不会失去焦点或重新渲染

零食、代码示例、屏幕截图或存储库链接： 世博会例子 https://snack.expo.io/@ksi9302/1f9369

大家好，这是我向 React Native 提交的错误报告。 但我不确定我在这里做错了什么。

到目前为止我已经尝试过但不起作用

1. 摆脱所有风格。
2. 使用类react组件制作自定义输入组件，禁用shouldComponentUpdate
3. 不具有约束力
4. 制作不同的状态结构并实际在对象 {} 内传递
5. 制作虚拟钥匙

我所知道的会起作用

• 摆脱自定义包装并使用普通 JSX（换句话说，不将 TextInput 作为子组件传递）//当应用程序变大时几乎不可能

糟糕的妥协

• 使用 AutoFocus={true} //在网络上工作正常，但在移动设备上，键盘闪烁很多。

Answer 1

将包装器取出，因为它由于搜索值的变化而不断重新渲染。

import React, { useState } from "react";
import { View, TextInput } from "react-native";

const Test = () => {
  const handleChange = e => {
    setSearch(e);
  };
  const [search, setSearch] = useState(null);

  return (
    <Wrapper>
      <TextInput
        value={search}
        onChangeText={e => {
          handleChange(e);
        }}
        placeholder="type here"
      />
    </Wrapper>
  );
};

const Wrapper = props => {
    return (
      <View
        style={{
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          display: "flex",
        }}
      >
        {props.children}
      </View>
    );
  };

export default Test;

Answer 2

我也遇到了这个问题，不过后来我用

useMemo

钩子解决了。这样做之后，我的键盘将不再失去焦点。我留下此评论是为了帮助遇到与我相同问题的人。