componentDidCatch(errorString, errorInfo) {
  this.setState({
    error: errorString
  });
  ErrorLoggingTool.**log**(errorInfo);
}
render() {
    if (this.state.error) {
      return <div>Error: {this.state.error}</div>;
    } else {
      return this.props.children;
    }
 }

import React from 'react';
import {createPortal} from 'react-dom';
class Dialog extends React.Component {
  constructor() {
    super(...arguments);
    //利用原生API来在body上创建一个div，这个div的样式绝对不会被其他元素的样式干扰。
    this.node = document.createElement('div');
  }
 componentDidMount() {
    // Append the element into the DOM on mount. We'll render
    // into the modal container element (see the HTML tab).
     document.body.appendChild(this.node);
  }
  render() {
    // Use a portal to render the children into the element
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      this.props.children,
      // A DOM element
      this.el,
    );
  }
  componentWillUnmount() {
     document.body.removeChild(this.node);
  }
}

// React是不可能支持这样的语法的
const renderMultiple = () => (
  <div>A</div><div>B</div><div>C</div>
);
// React只可能支持这样的语法的
const renderMultiple = () => [
  <div>A</div>,
  <div>B</div>,
  <div>C</div>
];
// 数组字符串混合玩法
const RenderArray = () => [
  <div>A</div>,
  <div>B</div>,
  <div>C</div>,
];
const RenderString = () => 'Hello world';
const RenderArrayOfString = () => [
  'A',
  'B',
  'C',
];
const RenderArrayOfArray = () => [
  [
    <div>S1</div>,
    <div>S2</div>,
  ],
  [
    <div>What</div>,
    <div>Ever</div>,
  ],
  [
    'Hello',
    'World',
  ]
];

// 这个组件的唯一作用就是免去子组件使用key属性
const Wrap = (props) => props.children;
const renderDynamic = () => {
  return [1, 2, 3].map(i => <div>{i}</div>); //这里会出warning,因为没有key
}
const Demo = () => (
  <Wrap>
    {renderDynamic()}
    <div>hello</div>
    <div>world</div>
  </Wrap>
);
//HOC写法
// v16之前必须这样
const  hoc = (Component) => {
  return (props) => (
    <div>
        <Component {...props} />
        <div>extra content</div>
    </div>
  );
};
// v16之后可以这样
const  hoc = (Component) => {
  return (props) => [
        <Component {...props} />
        <div>extra content</div>
  ];
};

process.env.NODE_ENV=production  //提高SSR性能

// 在HTML中
<meta charset="utf-8">  
<div tabindex="-1"></div>
 
//在JSX中
<meta charSet="utf-8" /> 
<div tabIndex="-1"></div>
<div data-foo="bar">what</div>

//列表页 index.js 相关代码
...
componentDidMount(){
    //添加对storge的监听事件 及时刷新页面
    window.addEventListener('storage', (event)=>{
      if(event.key === 'update_scg_list'){
        //页面更新操作
        this.refresh();
      }
    });
  }

//编辑页需要以window.open的方式打开编辑页，只有window.open打开的页面才能适用window.top.close()关闭
//antd table设置columns
this.columns = [
      ...
     {
         title: "操作",
         key: "action",
         render: record => {
              return <a key="edit" 
                          onClick={()=>window.open('...')} target='_blank'
                        >
                           编辑
                        </a>
         }
     }
]

//编辑页 index.js 相关代码
...
//点击取消 回到列表页面 场景3
  handleCancelSubmit = () => {
    //编辑 场景1
    if(SCG_DATA){
      window.top.close();
    }
    //添加 场景2
    else{
      const type = this.props.type || "";
      location.href = `/scg/video/option.htm?from=baoluo&type=${type}`;
    }
  };
//更新localstorage 通知列表页面刷新 同时关闭自己
  afterSaveProcess = ()=>{
    if (localStorage) {
      //为保证每次页面A都执行，此处需要设置一个随机字符串
      localStorage.setItem('update_scg_list', randomId());
      if(SCG_DATA){
        setTimeout(()=>{
          window.top.close();
        }, 2000);
      }
      else{
        location.href = `/scg/video/option.htm?from=baoluo&type=${this.props.type}`;
      }
    }
  }
...
//提交表单 场景1+2
submit = value => {
  ...
  IO.post(url, params)
      .then(response => {
           if (response.success) {
           ...
           //提交成功后，通知列表页
           this.afterSaveProcess();
       }
       ...
   })
   ...
};

//全局观察tab切换
//事件集合
let events = {};
// 发布事件
const trigger = (event, ...data) => {
    const fns = events[event];
    // 如果没有对应方法
    if (!fns || fns.length === 0) {
        return false;
    }
    // 如果存在对应方法，依次执行
    for ( let i = 0; i <= fns.length - 1; i++) {
        fns[i](...data);
    }
};
// 监听事件
const on = (event, fn) => {
    // 如果尚没有该事件，创建一个数组来存储对应的方法
    if (!events[event]) {
        events[event] = [];
    }
    events[event].push(fn);
};
// 取消监听事件
const off = (event, fn) => {
    const fns = events[event];
    // 如果不存在事件集合
    if (!fns) {
        return false;
    }
    // 如果不存在事件
    if (!fn && fns) {
        fns.length = 0;
    }
    // 取消指定事件
    else {
        for (let i = fns.length - 1; i >= 0; i--) {
            if (fn === fns[i]) {
                fns.splice(i, 1);
            }
        }
    }
};
const PubSub = {
    on: on,
    off: off,
    trigger: trigger
};
export default PubSub;

//页面入口 相关代码
...
//tab切换时触发
onChange = activeKey => {
    PubSub.trigger('tagChange',activeKey)
    this.setState({ activeKey })
};

//每个tab组件中添加订阅事件
componentDidMount(){
   //每次tab切换时，接收当前的activekey，如果是自己的key就刷新自己
    PubSub.on('tagChange',(activeKey)=>{
      if(activeKey === '2'){
        this.refresh();
      }
    })
}