使用动态 `useRef` 作为输入来查看组件

Question

我可以使用

useRef

来传递视图数据，因为当我更新值时，我也会更改其他

useState

变量。两者都传递给视图组件：

let fooRef = useRef('foo')
let [bar, setBar] = useState('bar')

let onClick = () => {
  fooRef.current = 'foo is changed'
  setBar('bar is changed')
}

return (
 <>
  <button onClick={onClick}>Change</button>
  <SomeComponent
    foo={fooRef.current}
    bar={bar}
  />
 </>
)

我的问题是这种做法有多糟糕，因为这实际上有效？

上下文：

我的用例是我的异步操作无法看到

useState

变量的正确值，因为我不遵循挂钩的 lint 规则并且我没有将这些函数包装在

useCallback

.

正因为如此，我创建同时使用

useState

和

useRef

：

let fooRef = useRef('foo')
let [foo, setFooFn] = useState('foo')
let setFoo = newValue => {
  setFooFn(newValue)
  fooRef.current = newValue
}

我只想删除

let [foo, setFooFn] = useState('foo')

，因为

foo

与

bar

一起使用。我改变

foo

的闭包，我也改变

bar

所以视图组件接收正确的数据。