reactjs - useSelector 钩子(Hook)和重新渲染

Question

--编辑--我创建了一个codesandbox:https://codesandbox.io/s/xenodochial-hofstadter-d3jjo

我开始摸不着头脑，希望得到一些帮助 - 我认为 - 一个简单的问题。

我有一个基本的应用程序组件，可以呈现受控的文本输入。一旦您提交此输入，它就会在后端创建一条消息，该消息会更新 redux 存储。这部分似乎一切正常。

我的问题是当我尝试添加 useEffect Hook 以在添加新消息后重置输入值时。我注意到依赖于 [messages] 的 useEffect 会在每次渲染时调用，而不是仅在 messages 更改时调用。输入输入的简单行为(这会导致每个字符重新渲染)都会触发钩子(Hook)，即使它仍然是相同的值:一个空数组。

基本上我注意到，只有当我的 useSelector 返回相同的数组实例时，它才能按预期工作。因此，如果我只读取 state.messages.allIds 它将起作用，因为数组不会更改。但只需添加 .map(x => x) 即可使其每次返回一个新实例。 我添加了react-redux的shallowEqual来尝试解决这个问题，但没有成功，我不明白为什么它不能解决我的问题。

const App = () => {
  const [message, setMessage] = useState('');
  const messages = useSelector(
    (state: RootState) => (
      state.messages.allIds.map((id: string) => state.messages.byId[id])
    ),
    shallowEqual,
  );

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

  // ...

  return (
    <form onSubmit={/* ... */}>
      <input
        onChange={event => setMessage(event.target.value)}
        value={message}
      />
    </form>
  );
}

Answer 1

这可能来得很晚。但这可能会让面临同样问题的其他人受益。

如果您不希望函数在状态更改时重新渲染，而只想提取 redux 状态变量的值，则可以使用 useState

const state = useState();
const yourVariable = state.getState().reduxStateVariable;