时间戳

首页 > 解决方案 > React 儿童道具总是相等的

javascript - React 儿童道具总是相等的

问题描述

我试图根据React16 Doc实现一个 ErrorBoundary HoC 组件以进行错误处理。我将 ErrorBoundary 组件设置为 PureComponent，我注意到子组件总是相等的，它试图防止子组件的重新渲染。

class ErrorBoundary extends React.PureComponent {
constructor(props) {
    super(props);
    this.state = { hasError: false };
}

componentDidCatch(error, info) {
    this.setState({ hasError: true });
}

render() {
    if (this.state.hasError) {
        return <PageNotFound />;
    }
    return this.props.children;
} }

将组件修改为 React.Component 并添加一个 componentDidUpdate 后，我能够看到 children 的 props 总是相等的。

componentWillUpdate(nextProps, nextState, nextContext) {
    if(this.props.children === nextProps.children){ //returns TRUE
        console.log('children value are equal')
    }
}

下面的代码显示了我如何使用 ErrorBoundary 组件

<BrowserRouter>
    <ErrorBoundary>
        <Route path='/' component={Router} />
    </ErrorBoundary>
</BrowserRouter>

谁能解释一下儿童道具是如何平等的？

标签： javascriptreactjsreact-router

解决方案

children总是引用作为子组件传递的值，即<Route>React 元素：

<ErrorBoundary>
    <Route path='/' component={Router} />
</ErrorBoundary>

由于父组件没有重新渲染，<Route>所以对象是相同的。

推荐阅读