Question

在示例应用程序中，在功能组件中：

const [searchApi, results, errorMessage] = useResults();

在组件的其他部分，将呈现其他组件，并将其传递给result / errorMessage。 textInput也可以在完成时调用searchApi函数，

相应的useResults在useResults.js中声明：

export default () => {
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');

  const searchApi = async searchTerm => {
//makes a request, depending on the success it either uses setResults or setErrorMessage
  };

  return [searchApi, results, errorMessage];
};

现在，如果searchApi在导出的函数本身中设置了结果或errorMessage的状态，则由于我认为它们可能被视为局部变量，并且主要组件中的result和errorMessage甚至在它们还没有返回之前就获得了返回值。改变了，那么函数内部的状态改变又如何改变外部的变量呢？换句话说，为什么只重新渲染组件？

Answer 1

只要searchApi函数调用setResults或setErrorMessage，则调用的react挂钩将通知包含该挂钩的组件重新呈现。当涉及到使用useState的自定义钩子时，也是如此。

这种行为是有道理的，因为正如您所说，结果和errorMessage是一些未直接连接到状态的局部变量。它们是状态函数启动时状态的快照。如果其中之一发生更改，则组件知道更改的唯一方法是重新渲染（并通过调用useState挂钩获取新值）。

为什么挂钩状态更改导致组件渲染？

1 个答案: