Реагируют детские реквизиты всегда равны

Question

Я пытался реализовать компонент ErrorBoundary HoC для обработки ошибок согласно React16 Doc .Я сделал компонент 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> объект тот же.