[英]Which renders first child or parent in reactjs
i am beginner in reactjs,and trying to understand concept like what and how the parent and child renders in reactjs 我是reactjs的初学者,并试图理解父母和孩子在reactjs中呈现的内容和方式
from research i found that react renders the child first and then parent,but i could not able to get the valid answer how and why? 从研究中我发现,反应首先让孩子,然后是父母,但我无法得到有效的答案如何以及为什么? and what happen if child fails to render,i guess in react 16 there is a lifecycle called componentDidCatch that handles if child fails to render,so what was there before react 16 and how we handle those scenario
如果孩子无法渲染会发生什么,我想在反应16中有一个名为componentDidCatch的生命周期,它处理孩子是否无法渲染,那么之前的反应16以及我们如何处理这些情景
please help me 请帮我
When componentDidMount
fires you can do DOM manipulation so it makes sense that parent only receives it after children are mounted. 当
componentDidMount
触发时,您可以执行DOM操作,因此父级仅在装入子级后才接收它。 That said you can use componentWillMount
which fires in the opposite direction, parents first. 也就是说你可以使用相反方向触发的
componentWillMount
,父亲优先。
If that is clear this is how you wrap error catching in React 16.x: 如果清楚这就是你在React 16.x中包装错误的方法:
React 16.x Error Handling Example 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>
Ref: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html 参考: https : //reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
REACT 15 Error Handling Example REACT 15错误处理示例
unstable_handleError()
is a function for all components which is called when render or children render an error. 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/> } } }
On mount there is no error, so it renders <ComponentWithErrors/>
. 在mount上没有错误,因此它呈现
<ComponentWithErrors/>
。
Assuming the <ComponentWithErrors/>
throws an error, this component's unstable_handleError()
will be called and state will update to error: true
. 假设
<ComponentWithErrors/>
抛出错误,将调用此组件的unstable_handleError()
并且状态将更新为error: true
。
When state updates, the <SafeComponent/>
is instead rendered! 当状态更新时,
<SafeComponent/>
被渲染!
This depends on definitions of 'child' and 'render'. 这取决于'child'和'render'的定义。
Child's render
function is called first when a child is nested in parent's render
because a parent needs to use the result of child's render
in its own render
function. 当子项嵌套在父项的
render
时,首先调用子项的render
函数,因为父项需要在其自己的render
函数中使用子项render
的结果。 In case a child is children
prop it's also rendered first because a parent needs to receive it as children
prop. 如果孩子是
children
道具,它也会首先呈现,因为父母需要将其作为children
道具接收。
In this case a 'child' is nested element in parent render
, a child is rendered and mounted first, error boundary in Parent
will be able to catch errors from Child
: 在这种情况下,'child'是父
render
嵌套元素,子渲染并首先挂载, Parent
错误边界将能够捕获来自Child
错误:
class Parent extends Component {
componentDidCatch() {}
render = () => <div><Child/></div>;
}
const Grandparent = props => <Parent/>;
In this case a 'child' is children
prop, a child is rendered first but isn't mounted because children
isn't used, error boundary in Parent
wouldn't be able to catch errors from Child
because Child
is actually rendered in Grandparent
: 在这种情况下,'child'是
children
prop,一个子被首先渲染但由于未使用children
而未安装, Parent
错误边界将无法捕获Child
错误,因为Child
实际上是在Grandparent
呈现的:
class Parent extends Component {
componentDidCatch() {}
render = () => <div/>;
}
const Grandparent = props => <Parent><Child/></Parent>;
In React 15, unstable_handleError
lifecycle hook was used to create error boundary and handle errors in children. 在React 15中,
unstable_handleError
生命周期钩子用于创建错误边界并处理子级中的错误。 It was replaced with componentDidCatch
in React 16. 它在React 16中被
componentDidCatch
取代。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.