Question

嗨，这里是我的反应和类型脚本代码为什么这个 console.log ，每次我的文本文件更改触发器时都会调用 ..

export default function TabOneScreen({
  navigation,
}) {
  
  const [out_1, set_out1] = useState('');
  const [out_2, set_out2] = useState('');
  const [main_device, setMain_dev] = useState('');
 
  


  console.log("run every time .. on text changed .."); // on change  text run every time ..
 // here I had some function for init textInput value and don't want to run every time ..
  


  return (
    <View style={styles.container}>
      <View style={{
      }}>


        <TextInput
          value={out_1}
          onChangeText={(username) => set_out1(username)}. 
        />

Answer 1

因为每次更改状态时，都会以新状态调用该函数。 React 组件的主要生命周期是：Mounting、Updating、Unmounting。当您第一次渲染元素时，它处于安装阶段。之后，当您更改元素的状态或属性时，它将被更新。当元素被移除时，它处于卸载阶段。状态的每次更新都会使用相同的函数再次渲染整个组件。要仅调用一次，您需要在安装阶段使用它。为此：

useEffect(() => console.log("run every time .. on text changed ..") , [])

useEffect 有两个参数，第一个是要运行的函数，第二个是运行这个函数的触发状态。此处，[] 仅表示仅在安装阶段运行。要触发另一个状态并运行它，您可以将它放在数组中。例如，假设您希望它仅在 out_1 状态更改时运行，则可以将其添加到第二个参数中：

useEffect(() => console.log("run every time .. on out_1 changes ..") , [out_1])

这意味着只有当 out_1 改变时才运行这个函数。如果您要在第一次渲染之前从 API 或您需要的任何其他资源中获取数据并且不需要再次重复，那么安装阶段（空数组 []）就是您需要获取的时间这个数据。

Answer 2

每次文本改变时，都会触发改变状态的函数，每次状态改变时，组件重新运行，console.log也是如此。您应该将您的 console.log 或函数包装在 useEffect 钩子中，如下所示：

useEffect(()=> {
console.log('...')
}, [])

Answer 3

美好的一天，在我看来，react 比较了旧的 virtualDOM 和新的修改后的 virtualDOM，也就是说，当你执行 setState 时，你导致了组件状态的变化，并且因为 console.log 发生了变化。 log 在 body 中找到它，它只是画了它。

Answer 4

当您在输入中更改文本时，您正在设置您的状态。

onChangeText={(username) => set_out1(username)}

现在当你的状态改变时它会调用渲染方法。所以你的组件会比较它的 dom 和旧的 dom 并重新渲染组件。

为了防止这种使用可以使用生命周期方法或条件语句来避免方法调用。或者你可以使用formik。

为什么每次更改 TextInput 时我的导出函数都会调用

4 个答案: