【20】前端實習：react官方文檔學習（高級指南：React refs與彈出窗口/ MyErrorBoundary /suspense / Context）

【1】React refs與彈出窗口

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


class OuterClickExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
    this.toggleContainer = React.createRef();

    this.onClickHandler = this.onClickHandler.bind(this);
    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
  }

  componentDidMount() {
    window.addEventListener('click', this.onClickOutsideHandler);
  }

  componentWillUnmount() {
    window.removeEventListener('click', this.onClickOutsideHandler);
  }

  onClickHandler() {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  }

  // 點擊空白處，可以實現關閉窗口
  onClickOutsideHandler(event) {
    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
      this.setState({ isOpen: false });
    }
  }

  render() {
    return (
      <div ref={this.toggleContainer}>
        <button onClick={this.onClickHandler}>Select an option</button>
        {this.state.isOpen && (
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        )}
      </div>
    );
  }
}

ReactDOM.render(
  <OuterClickExample/>,
  document.getElementById('root')
);

serviceWorker.unregister();

**********也可用onBlur和onFocus實現此功能****************

onBlur和onFocus常用與實現表單功能，前者是元素失去焦點時觸發，後者是元素獲得焦點時觸發

class BlurExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
    this.timeOutId = null;

    this.onClickHandler = this.onClickHandler.bind(this);
    this.onBlurHandler = this.onBlurHandler.bind(this);
    this.onFocusHandler = this.onFocusHandler.bind(this);
  }

  onClickHandler() {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  }

  // We close the popover on the next tick by using setTimeout.
  // This is necessary because we need to first check if
  // another child of the element has received focus as
  // the blur event fires prior to the new focus event.
  onBlurHandler() {
    this.timeOutId = setTimeout(() => {
      this.setState({
        isOpen: false
      });
    });
  }

  // If a child receives focus, do not close the popover.
  onFocusHandler() {
    clearTimeout(this.timeOutId);
  }

  render() {
    // React assists us by bubbling the blur and
    // focus events to the parent.
    return (
      <div onBlur={this.onBlurHandler}
           onFocus={this.onFocusHandler}>

        <button onClick={this.onClickHandler}
                aria-haspopup="true"
                aria-expanded={this.state.isOpen}>
          Select an option
        </button>
        {this.state.isOpen && (
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        )}
      </div>
    );
  }
}

 

【2】React.lazy與import

 

React.lazy

注意：

React.lazy和Suspense尚不可用於服務器端呈現。如果要在服務器呈現的應用程序中進行代碼拆分，我們建議使用可加載組件。它有一個很好的指南，用於捆綁服務器端渲染。

該React.lazy功能允許您將動態導入呈現爲常規組件。

 

【3】suspense

 

【4】MyErrorBoundary用來處理網絡原因，導致組件內容加載不了

【5】基於路由的代碼拆分

 

【6】命名導出

 

【7】context

Context提供了一種通過組件樹傳遞數據的方法，而無需在每個級別手動傳遞props。

在典型的React應用程序中，數據通過props自上而下（父對象）傳遞，但這對於應用程序中許多組件所需的某些類型的道具（例如區域設置首選項，UI主題）來說可能很麻煩。Context提供了一種在組件之間共享這些值的方法，而無需通過樹的每個級別顯式傳遞prop。

//Context允許我們將一個值深入到組件樹/中，而無需顯式地遍歷每個組件。/爲當前主題創建上下文(默認爲“light”)。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用提供者將當前主題傳遞給下面的樹。 / 任何組件都可以讀取它，不管它有多深。 // 在這個例子中，我們把“暗”作爲當前值。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

//中間的組件不再需要顯式地傳遞主題了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  //分配ContextType以讀取當前主題上下文。//作出反應將找到上面最接近的主題提供程序，並使用它的值。//在本例中，當前主題是"黑暗的"。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

實例：主題背景變換

參照官方文檔：https://reactjs.org/docs/context.html#when-to-use-context

 

【8】處理錯誤

如果它的生命週期方法限定任一個（或兩者）的類分量變成錯誤邊界static getDerivedStateFromError()或componentDidCatch()。用於static getDerivedStateFromError()在拋出錯誤後呈現回退UI。使用componentDidCatch()記錄錯誤信息。