React组件未渲染componentDidMount更新的状态，数据加载位置存疑

一、React 加载数据的正确位置 #

React 官方明确推荐，类组件中加载异步数据（比如接口请求、外部数据初始化）的标准位置是 componentDidMount，原因如下：

• 该生命周期钩子在组件首次渲染完成后触发，此时DOM已挂载完毕，操作DOM或绑定事件都安全可靠
• 可避免服务器端渲染(SSR)场景下出现重复请求的问题
• 请求失败时，能在此统一处理错误逻辑

至于componentWillMount，它早已被官方废弃，存在触发时机不稳定、SSR场景下重复执行等问题，完全不建议使用。

二、状态更新后UI不刷新的核心原因及解决办法 #

你遇到的componentDidMount更新状态后UI无变化、点击事件更新foo也无效的情况，多半是踩了以下几个坑：

1. 直接修改state，未调用setState #

React的状态是不可直接修改的，必须通过setState方法触发组件重渲染。比如错误写法：

// 错误：直接修改state数组，不会触发组件重渲染
this.state.toDos.push('Two');
this.state.toDos.push('Three');

正确写法是创建新的数组引用，再通过setState更新：

// 正确：基于旧状态创建新数组，调用setState触发更新
this.setState(prevState => ({
  toDos: [...prevState.toDos, 'Two', 'Three']
}));

2. 状态更新未依赖最新的状态快照 #

React的setState是异步操作，如果更新逻辑直接依赖this.state，可能拿到的是旧状态值。比如：

// 不推荐：可能因异步更新导致状态丢失
this.setState({ toDos: this.state.toDos.concat(['Two', 'Three']) });

改用函数式更新可确保拿到最新的状态快照：

this.setState(prevState => ({
  toDos: prevState.toDos.concat(['Two', 'Three'])
}));

3. 使用PureComponent但状态更新未改变引用 #

如果组件继承自PureComponent，它会对state和props做浅比较。若仅修改数组/对象的内部值、未改变引用，浅比较会判定状态无变化，从而不触发重渲染。解决办法依旧是更新时创建新的数组/对象引用（比如展开运算符、concat、Object.assign等方式）。

4. 状态管理或props传递存在问题 #

若状态在父组件中管理，需检查子组件是否正确接收更新后的props，或是子组件将props缓存为自身state后未同步更新。

三、针对你案例的验证 #

你提到点击h2标签更新foo状态也不渲染，先检查是否直接写了this.state.foo = 1，而非调用this.setState({ foo: 1 })。只有通过setState触发的状态变更，才会让React重新渲染组件。

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