本文旨在帮助开发者诊断并解决 react 组件 render() 方法陷入无限循环的问题。通过分析问题代码，我们将深入探讨导致循环的原因，并提供切实可行的解决方案，确保组件正常渲染，避免性能问题。主要内容包括：分析fetchFavCities() 函数在 render() 中调用的潜在问题，以及如何将其移至更合适的生命周期方法中，以避免无限循环。
React 组件的 render() 方法负责描述组件的 ui，并根据组件的 props 和 state 返回 jsX。然而，如果在 render() 方法内部不小心引入了会导致状态更新的操作，就可能触发无限循环，导致性能问题甚至应用崩溃。
常见原因分析
最常见的原因是在 render() 方法内部调用了会改变组件状态的方法。由于 render() 方法在状态改变时会被重新调用，如果在 render() 内部改变状态，就会再次触发 render()，从而形成无限循环。
以下面的代码为例，问题在于在主组件的 render() 方法中调用了 fetchFavCities()，该方法通过 axios 发起网络请求，并在请求成功后使用 this.setState 更新组件的状态。
render() { this.fetchFavCities(); return ( // ... JSX ... ) }由于 fetchFavCities() 会更新 this.state.favCts，每次 render() 调用 fetchFavCities() 都会导致状态改变，从而触发组件重新渲染，形成无限循环。
解决方案：将副作用操作移至 componentDidMount
解决此问题的关键是将 fetchFavCities() 移至 componentDidMount 生命周期方法中。componentDidMount 在组件挂载后只会被调用一次，非常适合执行副作用操作，如网络请求。
修改后的代码如下：
componentDidMount() { this.fetchFavCities(); } render() { return ( // ... JSX ... ) }这样，fetchFavCities() 只会在组件挂载时调用一次，避免了在每次 render() 时都发起网络请求并更新状态，从而解决了无限循环的问题。
代码示例
以下是包含修改后的 componentDidMount 的完整组件代码：
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { favCts: [], postcodeInput: '', displayResult: false }; this.handleSubmit = this.handleSubmit.bind(this); this.handleInputChange = this.handleInputChange.bind(this); this.fetchFavWeather = this.fetchFavWeather.bind(this); } async getCoord() { let city = { cityname: this.state.postcodeInput } axios.post('http://localhost:4001/search-location', city) .then((response) => { console.log(response); this.setState({ displayResult: true }); }, (error) => { console.log(error); }); } handleSubmit(e) { e.preventDefault(); this.getCoord(); } handleInputChange(e) { this.setState({ postcodeInput: e.target.value, displayResult: false }); } fetchFavWeather(city) { this.setState({ displayResult: false, postcodeInput: city }, () => { console.log("passing fav to forcast" + this.state.postcodeInput); this.getCoord() }); } fetchFavCities() { axios.get('http://localhost:4001/favouriteCites') .then((res) => { this.setState({ favCts: res.data }) }); } componentDidMount() { this.fetchFavCities(); } render() { return ( <div> <form onSubmit={this.handleSubmit}> <div> <div className="column"> { this.state.favCts.map( (item, index) => <button key={index} onClick={() => { this.fetchFavWeather(item) }}>{item}</button> )} </div> <div className="control"> <input className="input" type="text" placeholder="input city here" onChange={this.handleInputChange} required /> </div> <div className="field"> <div className="control"> <input type='submit' className="button is-light is-large" value='Check Weather' /> <input type='submit' className="button is-light is-large" value='Save as Favourite' onClick={this.saveAsFavourite} /> </div> </div> </div> </form> <div className="column"> {this.state.displayResult ? <WeatherResult /> : null} </div> </div> ) } }注意事项
- 避免在 render() 中直接修改状态： render() 方法应只负责根据 props 和 state 返回 UI，避免在其中进行任何副作用操作。
- 使用合适的生命周期方法： 根据操作的性质选择合适的生命周期方法。例如，网络请求、订阅等副作用操作通常放在 componentDidMount 中，清理操作放在 componentWillUnmount 中。
- 谨慎使用 forceUpdate()： 除非绝对必要，否则应避免使用 forceUpdate()，因为它会强制组件重新渲染，可能导致性能问题。
总结
在 React 组件中，避免在 render() 方法中直接修改状态是至关重要的。通过将副作用操作移至合适的生命周期方法，可以有效地防止无限循环，提高应用的性能和稳定性。理解 React 的生命周期以及 render() 方法的职责是编写高质量 React 应用的基础。