Javascript 如何防止子组件重新招标？

我的搜索栏组件更改布局组件的状态。因此，布局组件触发其所有子组件的重新命名。我试图实现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;

导出默认类布局扩展组件{
状态={
城市名称：“，
日期：“，
图标：“”，
};
searchbarSubmitHandler=e=>{
常数城市名称=
e、 target.children[0]。firstChild.children[0]。值；
这是我的国家({
城市名称：城市名称
});
console.log（this.state.cityName）；
e、 预防默认值（）；
};
searchbarChangeHandler=e=>{
这是我的国家({
城市名称：e.target.value
});
};
render（）{
返回(
}
/>
);
}
}

搜索栏组件：

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;

const searchbar=props=>{
返回(
);
};
导出默认搜索栏；

我不想重新加载的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);

const currentWeather=props=>{
返回(
英国伦敦
);
};
常量areEqual=（prevProps，nextProps）=>prevProps==nextProps；
导出默认的React.memo（currentWeather，areEqual）；

问题可能是传递给

CurrentWeather

的

props

参数是一个对象，因此您的

会做出反应。memo

第二个参数（

areEqual

）检查对象是否相等。
在不同渲染过程中传递的两个道具对象在严格意义上并不相等，甚至在表面上也不相等，因为它们引用内存中的不同位置，因此，

prevProps===nextProps

将始终返回false

您可能希望将

areEqual

重构为如下内容：

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

---

假设

图标

道具是传递给

CurrentWeather

的道具中唯一发生变化的道具，或者我们关心其变化，那么问题可能是传递给

CurrentWeather

的

道具

参数是一个对象，因此您的

React.memo

第二个参数（

areEqual

）检查对象是否相等。
在不同渲染过程中传递的两个道具对象在严格意义上并不相等，甚至在表面上也不相等，因为它们引用内存中的不同位置，因此，

prevProps===nextProps

将始终返回false

您可能希望将

areEqual

重构为如下内容：

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

假设

图标

道具是传递给

CurrentWeather

的道具中唯一改变的道具，或者我们关心的道具的改变，那么问题是

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

要显示此工作状态，问题是

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

---

若要显示此工作状态，我建议不要将图标存储在父组件的状态中，而是存储在子组件中，因为这会减少依赖关系。如果需要从父组件设置图标，请查看上面表格udi的答案。

我建议不要将图标存储在父组件的状态中，而是存储在子组件中这会减少依赖性。如果您需要从父级设置它，请查看上面表格udi的答案。您可以为此设置代码笔吗？我建议在路由器组件中分离交换机，并为函数提供更多信息。您可以为此设置代码笔吗？我建议在路由器组件中分离交换机，并提供更多信息函数的名称。这是不正确的，传递给CurrentWeather的唯一道具是

图标

，它是一个字符串。React.Memo将进行简单比较，其中包括

图标

道具。传递给CurrentWeather的唯一道具可能是

图标

，但CurrentWeather仍然传递了一个

道具

对象-问题中出现的

areEqual

的实现比较了上一个和下一个

道具

对象，而不是具体的

图标

道具。对象的粗略比较仍然是一个参考检查，然后每次都会返回

false

。啊，我知道你是从哪里来的。事实是他自己创造的相等性检查不正确。在这种情况下，不调用自己的相等性检查会起作用。这是不正确的，传递给CurrentWeather的唯一道具是

图标

，它是一个字符串。React.Memo将进行浅层比较，其中包括

图标

道具。传递给CurrentWeather的唯一道具可能是

ic在

上，但CurrentWeather仍然传递了一个

道具

对象-问题中出现的

areEqual的实现将比较上一个和下一个
道具
对象，而不是专门的
图标
道具。对象的粗略比较仍然是一个参考检查，然后返回
false
 每次都是。啊，我知道你是从哪里来的。他自己创建的平等性检查是不正确的。在这种情况下，不调用他自己的平等性检查就可以了。你的解决方案对我来说很有效！我学到了很多。谢谢！实际上，我也没想到会有如此迅速的响应，我从中更改了子组件的导出默认值“export default Home；”到这个“export default React.memo（Home）；“你的解决方案对我很有效！我学到了很多东西。谢谢！实际上，我也没料到会有如此迅速的响应，我将子组件的导出默认值从这个“export default Home；”更改为这个“export default React.memo（Home）；”