React代码片段中过滤函数为何会响应state状态变化？

你的核心困惑在于对React函数组件渲染周期的理解，咱们一步步拆解：

1. 状态更新触发组件重渲染
   当你在输入框输入内容时，handleSearch会调用setSearchTerm更新searchTerm的状态值。React一旦检测到组件状态发生变化，就会重新执行整个App函数组件——也就是重新走一遍组件内的所有代码逻辑。

2. 每次重渲染都会重新计算searchedStories
   你觉得searchedStories只声明了一次，但实际上，组件每重渲染一次，这个变量就会被重新声明并执行filter逻辑。这时候用的是更新后的searchTerm值，自然会得到匹配当前搜索词的过滤结果。

3. 为什么不需要useEffect？
   useEffect是用来处理副作用的（比如发起网络请求、操作DOM、订阅事件这类不属于纯渲染逻辑的操作）。而这里的列表过滤是纯计算：输入（stories和searchTerm）确定，输出（过滤后的数组）就确定，属于组件渲染流程的一部分，完全不需要放到useEffect里。

额外补充：性能优化（可选） #

如果你的stories数组非常大，每次重渲染都执行filter可能会有性能损耗，这时候可以用useMemo缓存过滤结果，避免不必要的重复计算：

const searchedStories = React.useMemo(() => {
  return stories.filter(story => story.title.includes(searchTerm));
}, [stories, searchTerm]);

只有当stories或searchTerm变化时，才会重新执行过滤逻辑。

内容的提问来源于stack exchange，提问作者Malforta