//多测组件的封装
//localstorage 封装
import React, {
  Component
} from 'react'

export default function (Oldcomponent, name, placeholder) {
  class NewComponent extends Component {
    constructor(props) {
      super(props)
      this.state = {
        data: ''
      }
    }
    componentWillMount() {
      this.setState({
        data: localStorage.getItem(name) || placeholder
      })

    }
    save = e => {
      localStorage.setItem(name, e.target.value)
    }
    render() {
      return <Oldcomponent
      data = {
        this.state.data
      }
      save = {
        this.save
      }
      />
    }
  }
  return NewComponent
}
// ajax组件封装
import React, { Component } from 'react'

export default function(Oldcomponent) {
  class NewComponent extends Component {
    constructor(props) {
      super(props)
      this.state = {
        data: ''
      }
    }
    componentWillMount() {
      const a = {
        xx: 'aaaaaaa',
        yy1: '23123123'
      }
      console.log('this.props', this.props)
      console.log('this.props.data :', this.props.data)
      this.setState({
        data: a[this.props.data]
      })
    }
    render() {
      return <Oldcomponent data={this.state.data} save={this.props.save} />
    }
  }
  return NewComponent
}
//app组件的封装
    import local from './components/localStorage.js'
import ajax from './components/ajax.js'

class App extends Component {
  render() {
    return (
      <div>
        <label>
          name: <input type="text" defaultValue={this.props.data} onChange={this.props.save} />
        </label>
      </div>
    )
  }
}
let Username = ajax(App)
Username = local(Username, 'username', 'username')
export default Username
//封装的时候从内往外封装
//使用从外向内执行   最外层  localstorage  然后找到数据后  ajax  然后 时 app组件

//创建文件 config-overrides.js文件
// 通过下面的方式覆盖配置
module.exports=(config)=>{
    //在这里配置
    return config
}

//config-overrides.js 中
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
 addDecoratorsLegacy()
);
//在 package.json 中
"scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject"
}

import {connnect} from ‘./gaojiezujianbao’ //高阶组件包
@connnect
class App extends COmponent(
    render(){
        return (
            <h1>装饰器模式的高阶组件的演示
                </h1>
        }
)
export default App
// 上面就相当于  export default connnetc（App）

//react中只能把返回的节点放在一个顶级的节点中间,也就是说组件必须有一个包裹节点
//那么如果提取的时类似  一个数组的li的时候就会出现问题
//如果给LI 包裹一个DIV 那么DOM 解构就会乱掉,如果不包裹就会报错出现问题  类似于下面的解构
class MessageListItem extends Component {
  render() {
    return (
        {this.props.messages.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
    )
  }
}
class Message extends Component {
  constructor() {
    super()
    this.state = {
      message: [1, 2, 3]
    }
  }
  render() {
    return (
      <div>
        <ul>
          <MessageListItem messages={this.state.message} />
        </ul>
      </div>
    )
  }
}
export default Message
//这个时候就可以使用react.Fragment  代码片段为LIST增加一个虚拟的包裹元素
class MessageListItem extends Component {
  render() {
    return (
        <React.Fragment>
        {this.props.messages.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
        </React.Fragment>
    )
  }
}
//或者写做
class MessageListItem extends Component {
  render() {
    return (
        <>//
        {this.props.messages.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
        </>
    )
  }
}

ReactDOM.creatPortal(child, container)
//child 时任何可以渲染的react子元素
//container时一个DOM 元素
class Message extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
  }
  render() {
    return (
      <div>
        <button onClick={this.show}>显示</button>
        {this.state.show ? (
          <Button>
            <div
              style={{
                width: '200px',
                height: '200px',
                backgroundColor: 'red',
                position: 'absolute',
                left: '50%',
                top: '50%'
              }}
            >
              错误提示
            </div>
          </Button>
        ) : null}
      </div>
    )
  }
  show = () => {
    this.setState({ show: !this.state.show })
  }
}
class Button extends Component {
  constructor() {
    super()
    this.container = document.querySelector('#Model-root')
    //root 和 #Model-root 是平级节点
  }
  render() {
    return ReactDOM.createPortal(this.props.children, this.container)
  }
}

export default Message

//定义一个察觉错误的组件
class ErrorBoundary extends Component {
  constructor() {
    super()
    this.state = {
      hasError: false
    }
  }
  componentDidCatch(hasError) {
    //错误察觉  这个钩子函数是捕获错误 也就是相当于try  catch
    this.setState({ hasError })
  }

  render() {
    if (this.state.hasError) {
      //错误显示
      return <div class="error">'出错了'</div>
    }
    return this.props.children //渲染子组件  this.props.children  拿到子节点
  }
}

function Todo() {
  //渲染的子组件
  return <div>{null.toString()}</div>
}
class App extends Component {
  render() {
    return (
      <div>
        //使用ErrorBoundary察觉错误如果没出错渲染子组件 出错了渲染自己
        <ErrorBoundary>
          <Todo />
        </ErrorBoundary>
      </div>
    )
  }
}

export default App