javascript - 如何防止子组件重新渲染?
问题描述
我的搜索栏组件更改了布局组件的状态。因此,Layout 组件会触发其所有子组件的重新渲染。我尝试实现 React.memo(),但对我没有帮助。请纠正我。先感谢您!
布局组件:
export default class Layout extends Component {
state = {
cityName: "",
date: "",
icon: "",
};
searchbarSubmitHandler = e => {
const cityName =
e.target.children[0].firstChild.children[0].value;
this.setState({
cityName: cityName
});
console.log(this.state.cityName);
e.preventDefault();
};
searchbarChangeHandler = e => {
this.setState({
cityName: e.target.value
});
};
render() {
return (
<div>
<Searchbar
submit={this.searchbarSubmitHandler}
change={this.searchbarChangeHandler}
/>
<Switch>
<Route
exact
path="/"
component={() =>
<CurrentWeather icon={this.state.icon} />
}
/>
<Route
path="/24h-weather"
component={HourlyWeather}
/>
</Switch>
</div>
);
}
}
搜索栏组件:
const searchbar = props => {
return (
<div className="searchbar">
<form onSubmit={props.submit}>
<div className="inputs">
<div className="inputTextWrapper">
<input
className="inputText"
type="text"
placeholder="City name..."
onChange={props.change}
/>
</div>
<input
className="inputSubmit"
type="submit"
value="Search"
/>
</div>
</form>
</div>
);
};
export default searchbar;
我不想重新渲染的 CurrentWeather 组件:
const currentWeather = props => {
return (
<div className="container">
<h3>London, UK</h3>
<img
src={`http://openweathermap.org/img/wn/${props.icon}.png`}
alt="weather icon"
/>
</div>
);
};
const areEqual = (prevProps, nextProps) => prevProps === nextProps;
export default React.memo(currentWeather, areEqual);
解决方案
问题是
<Route
exact
path="/"
component={() => <CurrentWeather icon={this.state.icon} />}
/>
工作方式component
是“路由器使用 React.createElement 从给定组件创建一个新的 React 元素。现有组件被卸载并安装新组件,而不是仅仅更新现有组件”
如果将其更改为render
,则不会获得此效果,并且不会重新创建此组件。
<Route
exact
path="/"
render={() => <CurrentWeather icon={this.state.icon} />}
/>
推荐阅读
- javascript - 如何遍历一个类并识别具有特定类列表属性的每个元素
- javascript - 从 angularjs 下拉列表中删除空白选项
- azure - Azure 函数失败然后工作
- android - 无法解析符号“opcfoundation”
- python - 如何在输出中运行我的代码时删除“[Running] python -u”(代码运行器)
- git - 将本地目录初始化为 Git 存储库时出错
- c# - 无法锁定条目:
- java - jsonschema2pojo:如何将注释应用于某些字段
- php - 我将运行“php artisan serve”,它会启动、接受并最终关闭。为什么?请
- python - 获取用户输入的方程