Question

我正在尝试根据React16 Doc实现一个ErrorBoundary HoC组件来进行错误处理。我将ErrorBoundary组件设置为PureComponent，并且注意到 children 道具始终相等，并且它试图防止子组件的重新呈现。

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之后，我能够看到子道具始终相等。

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>

谁能解释孩子的道具如何平等？

Answer 1

children始终引用作为子元素传递的值，即<Route> React元素：

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

由于父组件未重新呈现，因此<Route>对象是相同的。

反应儿童道具总是平等的

1 个答案: