如何防止子组件重新渲染？

Question

我的搜索栏组件改变了布局组件的状态。因此，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);

Answer 1

我建议不要将图标存储在父组件的状态中，而是存储在子组件中，因为这样可以减少依赖关系。如果您需要从父级设置，请查看 udi 上方的答案

Answer 2

问题是

<Route
    exact
    path="/"
    component={() => <CurrentWeather icon={this.state.icon} />}
    />

component 的工作方式是“路由器使用 React.createElement 从给定组件创建一个新的 React 元素。现有组件被卸载并安装新组件，而不是仅仅更新现有组件”

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#component

如果你把这个改成render，你就不会得到这个效果，也不会重新创建这个组件。

<Route
    exact
    path="/"
    render={() => <CurrentWeather icon={this.state.icon} />}
    />

https://codesandbox.io/s/restless-hill-2ykhq 显示这个工作

Answer 3

问题可能是传递给CurrentWeather 的props 参数是一个对象，因此您的React.memo 第二个参数（areEqual）检查对象是否相等。
在不同的渲染过程中传递的两个 props 对象不会严格相等，甚至不完全相等，因为它们引用内存中的不同位置 - 因此，prevProps === nextProps 将始终返回 false。

您可能希望将areEqual 重构为：

const areEqual = (prevProps, nextProps) => prevProps.icon === nextProps.icon;

假设icon prop 是传递给CurrentWeather 的props 中唯一发生变化或我们关心其变化的prop。