在自定义组件中调用 useState Hook 时反应本机 TextInput ReRenders

Posted 2023-04-18

【中文标题】在自定义组件中调用 useState Hook 时反应本机 TextInput ReRenders

【英文标题】：React Native TextInput ReRenders when calling useState Hook inside a custom component

【发布时间】：2020-11-19 01:16:54

【问题描述】：

说明 当 TextInput 组件触发 onChangeText 或 onKeyPress 方法中的操作然后触发 setState 时，组件将重新渲染并失去焦点。

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

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

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

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

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

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

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

摆脱所有样式。 使用类 react 组件制作自定义输入组件，禁用 shouldComponentUpdate 不绑定值 制作不同的状态结构并在对象内实际传递 制作虚拟钥匙

我知道会起作用的

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

恶意妥协

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

【参考方案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;

【讨论】：

您好 D10S，非常感谢您的回答。是的，然后它工作正常。但是，在我的实际项目中，这种方法存在很多问题，因为在 Wrapper 组件中，如果我必须将所有这些组件移出父组件，那么还有另一个客户组件利用了在顶层组件中声明的许多函数，我将不得不传递一堆道具，基本上失去了在父组件中声明子组件的最佳优势。这只是在 React 编程中不鼓励使用的方式，还是您希望这个问题在未来得到解决？

传递大量道具有什么问题？？无论如何，如果我说对了，您需要使用 HOC。请注意，如果 parent 和 child 位于同一个组件中，则拆分它们是没有逻辑的，

感谢您提供宝贵的信息，我会关注 HOC。我现在不知何故让它工作了。在我的代码中，Wrapper 有

@D10S 我遇到了同样的问题。确实，删除“包装器”对我有用。我不明白为什么这是一件事。为什么我不能同时使用 useState 包装我的 TextInput？我没有连接点...