React生命周期原理与用法踩坑笔记

class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 }
 

class ScrollingList extends React.Component {
 constructor(props) {
  super(props);
  this.listRef = React.createRef();
 }

 getSnapshotBeforeUpdate(prevProps, prevState) {
  // Are we adding new items to the list"htmlcode">

componentDidUpdate(prevProps) {
 // Typical usage (don't forget to compare props):
 if (this.props.userID !== prevProps.userID) {
  this.fetchData(this.props.userID);
 }
}




componentDidUpdate()但要注意，必须在一个条件下被包裹就像上面的例子中，否则会导致无限循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。
componentDidUpdate()：如果shouldComponentUpdate()返回false，则不会被调用。
这些方法被认为是遗留的，您应该在新代码中避免它们：
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()
卸载
从DOM中删除组件时调用此方法：
componentWillUnmount()
componentWillUnmount()在卸载和销毁组件之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效，取消网络请求或清除在其中创建的任何订阅componentDidMount()。
不应该调用setState()，componentWillUnmount()因为组件永远不会被重新呈现。卸载组件实例后，将永远不会再次安装它。
错误处理
在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。
static getDerivedStateFromError()
static getDerivedStateFromError(error)
在后代组件抛出错误后调用此生命周期。它接收作为参数抛出的错误，并应返回值以更新状态。
componentDidCatch()
componentDidCatch(error, info)
在后代组件抛出错误后调用此生命周期。它接收两个参数：
error - 抛出的错误。
info- componentStack包含键的对象，其中包含有关哪个组件引发错误的信息。
如果发生错误，可以componentDidCatch()通过调用呈现回退UI setState，但在将来的版本中将不推荐使用。使用static getDerivedStateFromError()处理回退，而不是渲染。
componentDidCatch()在“提交”阶段被调用，因此允许副作用。它应该用于记录错误之类的事情：


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

 static getDerivedStateFromError(error) {
  // Update state so the next render will show the fallback UI.
  return { hasError: true };
 }

 componentDidCatch(error, info) {
  // Example "componentStack":
  //  in ComponentThatThrows (created by App)
  //  in ErrorBoundary (created by App)
  //  in div (created by App)
  //  in App
  logComponentStackToMyService(info.componentStack);
 }

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




希望本文所述对大家react程序设计有所帮助。