React-High

react添加表格时候 tr中必须是td

但是react.component中return必须返回一个主标签 

1.使用Fragment 给子元素分组  ，不需要像子元素 添加额外的DOM节点

<React.Fragment>
    <td>hello</td>
    <td>world</td>
</React.Fragment>

2.使用短语法   注:短语发不支持key  

<>
    <td>hello</td>
    <td>world</td>
</>

 二、error问题

其他组件：throw new Error('count error') //创建错误，创造一个错误类型抛出

class ErrorBoudary extends React.Component{
        // 01 错误容器
        state = {error:null,errorInfo:null}
        // 02  钩子函数  ： 子组件发生错误异常  会被错误边界捕获 =  执行componentDidCatch 并传入错误信息
        componentDidCatch(error,errorInfo){
            console.log('componentDidCatch');
            // 03 同步
            this.setState({
                error,
                errorInfo
            })
            // 记录日志
            console.log(error);
            console.log(errorInfo);
        }
        render(){
            const {error,errorInfo} = this.state
            //   04 页面渲染
            //  有错误
            if(error || errorInfo){
                return (
                    <div>
                        <h2>Something go Wrong</h2>
                        <details style={{whiteSpace:'pre-wrap'}}>
                            {error && error.toString()}
                            <br/>
                            {errorInfo &&errorInfo.componentStack }
                        </details>
                    </div>
                )
            }

            // 没错误
            return this.props.children
        }
    }

 执行思路：子组件发生错误异常  会被错误边界捕获 =  执行componentDidCatch 并传入错误信息

多个子组件时候要分别挂到错误捕获里面

 

 

 

 

 

 

---

高阶组件

// A higher-order component (HOC)  高阶组件 一种模式 / 高级技术

      // 作用 : 对现有的组件的增强

      //  场景 :
      //  代码复用 :  将多个组件的公共代码抽离出来
      //  使用三方组件 : 保护三方组件 =>原有组件 不受侵害

      //   参数 首字母大写 : 组件;  返回值 也应该是一个组件
      let HOC = (Component) => {
        return class _ extends React.Component {
          // 增强 : 封装公共逻辑
          common = () => {
            return "commmon function logic";
          };

          render() {
            // 将增强内容 通过props 注入到每个组件里面
            return <Component common={this.common} />;
          }
        };
      };

      class A extends React.Component {
        render() {
          return (
            <div>
              <h1>A component</h1>
              {this.props.common()}
            </div>
          );
        }
      }

      class B extends React.Component {
        render() {
          return (
            <div>
              <h1>B component</h1>
              {this.props.common()}
            </div>
          );
        }
      }

      let HocA = HOC(A)
      let HocB = HOC(B)


      class App extends React.Component {
        render() {
          return (
            <div>
              <h1>App component</h1>
              <HocA></HocA>
              <HocB></HocB>
            </div>
          );
        }
      }