Question

我是reactjs的初学者，并试图理解类似的概念，如父级和子级如何在reactjs中渲染

从研究中我发现，react先渲染孩子，然后渲染父母，但是我无法获得有效的答案，为什么以及为什么？以及如果子代无法渲染会发生什么情况，我猜反应16中存在一个名为componentDidCatch的生命周期，该生命周期将处理子代无法渲染的情况，因此反应16之前发生了什么以及我们如何处理这种情况

请帮助我

Answer 1

当componentDidMount被触发时，您可以进行DOM操作，因此父级仅在挂载子级之后才接收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/>！

Answer 2

这取决于“子”和“渲染”的定义。

当孩子嵌套在父母的render中时，首先调用孩子的render函数，因为父母需要在自己的render函数中使用孩子的render的结果。如果孩子是children道具，那么也会首先渲染它，因为父母需要将其作为children道具来接收。

在这种情况下，“子级”是父级render中的嵌套元素，首先渲染并安装了一个子级，Parent中的错误边界将能够捕获来自Child的错误：

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

const Grandparent = props => <Parent/>;

在这种情况下，“子代”是children道具，将首先渲染一个子代，但由于未使用children而未装载子代，因此不会Parent中的错误边界能够捕获Child中的错误，因为Child实际上是在Grandparent中呈现的：

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

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

在React 15中，unstable_handleError lifecycle hook用于创建错误边界并处理子级错误。在React 16中被componentDidCatch取代了。

它在reactjs

2 个答案: