Который делает первого ребенка или родителя в реакции - PullRequest
Новая
       6

Который делает первого ребенка или родителя в реакции

0 голосов
/ 24 октября 2018

Я новичок в реагировании, и я пытаюсь понять концепцию, например, что и как родитель и ребенок отображает в реакции.

В результате исследования, которое я обнаружил, что реакция отдает ребенка сначала, а затем родителя, но я не смогчтобы получить правильный ответ, как и почему?и что произойдет, если child не сможет отрендериться, я думаю, что в реакции 16 есть жизненный цикл под названием componentDidCatch, который обрабатывает, если child не удается отрендерить, так что же было до реакции 16 и как мы справляемся с этим сценарием

, пожалуйста, помогите мне

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Это зависит от определений 'child' и 'render'.

Функция Child render вызывается первой, когда дочерний элемент вложен в render родительского элемента, поскольку родитель должен использовать результат дочернего элемента.render в своей собственной функции render.Если дочерний элемент children prop, он также отображается первым, потому что родитель должен получить его как children prop.

В этом случае дочерний элемент - это вложенный элемент в родительском элементе render, дочернем элементе.отображается и монтируется первым, граница ошибок в Parent сможет отлавливать ошибки из Child: 

class Parent extends Component {
  componentDidCatch() {}
  render = () => <div><Child/></div>;
}

const Grandparent = props => <Parent/>;

В этом случае «child» равен children prop, потомодет воспроизводится первымно не смонтирован, потому что children не используется, граница ошибок в Parent не сможет отлавливать ошибки из Child, потому что Child фактически отображается в Grandparent: 

class Parent extends Component {
  componentDidCatch() {}
  render = () => <div/>;
}

const Grandparent = props => <Parent><Child/></Parent>;

В React 15 unstable_handleError ловушка жизненного цикла использовалась для создания границы ошибок и обработки ошибок в дочерних элементах.Его заменили на componentDidCatch в React 16.

0 голосов
/ 24 октября 2018

Когда срабатывает componentDidMount, вы можете делать DOM-манипуляции, поэтому имеет смысл, что родитель получает его только после монтирования потомков.Тем не менее, вы можете использовать componentWillMount, который срабатывает в противоположном направлении, в первую очередь родители.

Если это ясно, то так вы перехватываете ошибки в React 16.x:

React 16.x Пример обработки ошибок 

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Ссылка: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

REACT 15 Пример обработки ошибок

unstable_handleError() - функция длявсе компоненты, которые вызываются, когда рендер или дочерние элементы выдают ошибку. 

unstable_handleError: function(){
  this.setState({error: "oops"})
}

class Boundary extends React.Component {
      ...
      unstable_handleError() {
        logErrorSoYouCanFixTheThing()
        this.setState({error: true});
      }
      render() {
        if (this.state.error){
          return <SafeComponent/>
        } else {
          return <ComponentWithErrors/>
        }
      }
}

При монтировании ошибки нет, поэтому он рендерит <ComponentWithErrors/>.

Если <ComponentWithErrors/> выдает ошибку, unstable_handleError() этого компонента будети состояние обновится до error: true.

При обновлении состояния вместо этого будет отображаться <SafeComponent/>!

...