在渲染方法中调用组件的不同方法 [REACT-NATIVE]答案

【问题标题】：Different ways to call components inside render method [REACT-NATIVE]在渲染方法中调用组件的不同方法 [REACT-NATIVE]
【发布时间】：2021-11-15 14:17:17
【问题描述】：

我在使用这个实现时遇到了一些问题：

export default function App() {
  const [text, setText] = useState("");

  const onChangeText = useCallback((t) => setText(t), []);

  const Input = () => {
    return (
      <TextInput
        value={text}
        placeholder="dioporco"
        style={{ fontSize: 50 }}
        onChangeText={onChangeText}
      />
    );
  };

  return (
    <View style={styles.container}>
      <Input />
    </View>
  );
}

每当我尝试在文本输入中写一些东西时，在我输入一个字母后，键盘就会被关闭。如果我使用 {Input()} 而不是，则不会发生这种情况。

为什么会这样？有什么不同？坦克你。

【问题讨论】：

标签： react-native textinput

【解决方案1】：

因为每次输入角色都会更新状态，更新状态时，组件也会重新渲染。

你有一个创建TextInput的函数，当组件重新渲染时，再次调用函数，这会导致TextInput也重新渲染，并在重新渲染时反应原生关闭键盘。

重要的是不要将您的组件定义为其他组件中的函数。

您可以创建单独的组件，或使用useMemo

【讨论】：

嘿，非常感谢，但是如果我使用 useMemo 我必须将 text 和 onChangeText 传递给依赖项。同样，如果我将 Input() 作为函数调用，为什么不会发生这种情况？
是的，这就是 react 做的 :))) 当在组件内创建一个函数时，在每次渲染时反应创建它的新实例

【解决方案2】：

问题是当你使用这样的函数时，每次组件重新渲染时，都会导致整个 TextInput 像以前不存在一样被渲染。所以尝试创建 Input 组件（App 外部的功能），然后在 App 组件中使用它。


export function Input() {
  const [text, setText] = useState("")
  const onChangeText = useCallback((t) => setText(t), [])

  return (
    <TextInput
      value={text}
      placeholder="dioporco"
      style={{ fontSize: 50 }}
      onChangeText={onChangeText}
    />
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Input />
    </View>
  );
}

【讨论】：