[JavaScript知识库]react中组件复用时遇到的变量互相影响的bug

假如有这样的需求：

一个父组件 循环出4个子组件。?

每一个子组件有初始变量比较复杂 这里用inputVal模拟该情况?并且不需要该变量(inputVal)实时响应式更新,因此我们没有把他设置成状态(没有使用useState)

然后需要我们在组件挂载时候将inputVal的值赋值给input输入框

当我们改变input输入框的时候会改变inputVal变量的值(从dom到数据的单项绑定)

然后我们获取当前C组件的inputVal值

?

?代码如下

//父组件
import React from 'react'
import C from './childComps/c'

export default function Abc() {
  return (
    <div>
      {new Array(4).fill().map((_, i) => <C code={i + 1} key={i}/>)}
    </div>
  )
}

//被循环的子组件
import React, { useEffect, useRef } from 'react'

let inputVal = 10

export default function C({code}) {
  
  const inputRef = useRef(null)

  useEffect(() => {
    inputRef.current.value = inputVal
  }, [])

  
  const setInputVal = e => {
    inputVal = e.target.value
  }

  return (
    <div>
      <input ref={inputRef} onInput={setInputVal}/>
      <button onClick={() => alert(`组件${code}的inputVal是${inputVal}`)}>获取当前组件的count值</button>
    </div>
  )
}

开始我们获取到各个组件的inputVal值都是10 没有问题

?

然后我们对第一个组件的输入框修改 变成104 获得组件1的inputVal值是104 没问题

?

注意 ?此时 我们点击剩余的3个组件的按钮获取剩余3个组件的值的时候 均显示104

?

?这时候相当于inputVal这个变量被泄露出去了

导致组件间本应该互相隔离的变量被相互影响了

所以我们需要对变量声明放在函数内 防止变量泄露
?

import React, { useEffect, useRef } from 'react'


export default function C({code}) {
  let inputVal = 10 //在函数组件内部声明变量
  
  const inputRef = useRef(null)

  useEffect(() => {
    inputRef.current.value = inputVal
  }, [])

  
  const setInputVal = e => {
    inputVal = e.target.value
  }

  return (
    <div>
      <input ref={inputRef} onInput={setInputVal}/>
      <button onClick={() => alert(`组件${code}的inputVal是${inputVal}`)}>获取当前组件的count值</button>
    </div>
  )
}

?由于函数作用域的性质 变量会互相隔离 不会被影响

总结: 出于安全和代码可维护性考虑 函数组件外部最好不要定义任何'变量'(这里指的是let和var定义 并且后续会修改改变量), 只应该使用 import导入 或者const定义常量