如何避免重新渲染文本输入？答案

【问题标题】：How to avoid re rendering text input?如何避免重新渲染文本输入？
【发布时间】：2021-10-16 14:18:14
【问题描述】：

我有一个TextInput，我不希望每次更改其中的值时都重新渲染它

const [WrittenVal,setWrittenVal] = useState(()=>'');
...
    <TextInput
        value={String(WrittenVal)}
        onChangeText={text => setWrittenVal(text)}
    />

但是我希望能够通过按一下按钮来更改输入中的值，这就是为什么我不只使用defaultValue

有什么解决办法吗？？

【问题讨论】：

在这里进行体面的讨论：React - change input defaultValue by passing props 仅使用defaultValue 并根据key 值重新渲染。
@pilchard 顺便说一句，它是为 reactjs 写的，但如果你能从中挽救一些东西，请写一个答案

标签： javascript react-native

【解决方案1】：

您可以使用 useRef 保存文本输入中的文本而不使用 render ，并使用 useState 在按钮按下时在输入中显示文本：

现场示例：https://snack.expo.dev/TW-fMx1-2

import React from "react";
import { SafeAreaView, StyleSheet, TextInput,TouchableOpacity,Text } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("");

  const textRef = React.useRef('')

  const textToRef = (text) =>{
    textRef.current = textRef.current + text
  }

  const showTextInInput = () =>{
    onChangeText( textRef.current )
  }

  console.log("render")
  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={textToRef}
        value={text}
      />
      <TouchableOpacity onPress={showTextInInput}>
          <Text>SHOW TEXT IN INPUT</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    marginTop:50,
    padding: 10,
  },
});

export default UselessTextInput;

【讨论】：

【解决方案2】：

您无法阻止重新渲染类型。但是您的代码可以简化为：

const [value, setValue] = useState('');

<TextInput
    value={value}
    onChangeText={setValue}
/>

【讨论】：

根据另一个答案，您可以使用 useRef() 来防止重新渲染

【解决方案3】：

当值更改时，您无法阻止重新渲染输入。

但是你可以通过React.memo或者useMemo钩子来防止其他组件重新渲染。

要通过按下按钮来更改输入值，您可以这样做：

<Button onPress={() => {
    setWrittenVal(""); //write value you want in ""
}}

【讨论】：

你能展示一个 useMemo 钩子的例子吗？
请参阅 this 了解 React 文档和 this article 了解更多信息。
React.memo 对于组件来说太简单了。 justi 将组件包装在React.memo() 中。 const component = React.memo((props) => {return ()}) 和 useMemo 用于创建 memorizedValue。