// 装饰器类型
// src/hoc/index.tsx
// decorator HOC
interface Props {
  name: string
}
export const decoratorWithNameHeight = (height?: number) => {
  return (WrapperedComponent: any) => {
    return class extends Component<Props, state> {
      public state = {
        name: 'jico'
      }

      componentWillMount() {
        let userName = localStorage.getItem('userName')
        this.setState({
          name: userName || ''
        })
      }

      render() {
        return (
          <div>
            <WrapperedComponent name={this.state.name} {...this.props} />
            <p>height is: { height || 0 }</p>
          </div>
        )
      }
    }
  }
}

// src/components/index.tsx
interface AppProps {
  name?: string
}
@decoratorWithNameHeight(180)
class App extebds Component<AppProps, any> {
  render() {
    return <div>the name is: { this.props.name }</div>
  }
}

// 多个装饰器的组合
// hoc decoratorWithWidth
export const decoratorWithWidth = (width?: number) => {
  return (WrapperedComponent: any) => {
    return  class extends Component<any, any> {
      render() {
        return (
          <div>
            <WrapperedComponent {...this.props} />
            <p>the width is: { width || 0 }</p>
          </div>
        )
      }
    }
  }
}

// src/components/index.tsx
interface AppProps {
  name?: string
}
@decoratorWithWidth(200)
@decoratorWithNameHeight(180)
class App extebds Component<AppProps, any> {
  render() {
    return <div>the name is: { this.props.name }</div>
  }
}

// 操作组件实例
export const refHoc = () => {
  return (WrapperedComponent: any) => {
    return calss extends Component<any, any> {
      ref: any = null

      componentDidMount() {
        // 打印组件实例的state属性
        console.log(this.ref.state)
      }

      render() {
        return (
          <div>
            <WrapperedComponent {...this.props} ref={(instance: any) => this.ref = instance} />
          </div>
        )
      }
    }
  }
}

// 继承/属性劫持HOC
export function ProxyHoc<T extends {new (...args: any[]): any}>(component: T) {
  return class extends component {
    handleClick = () => {
      console.log(this.handleClick)
      super.handleClick()
      console.log('handleClick was proxied')
    }

    render() {
      const parent = super.render()
      return React.cloneElement(parent, {
        onClick: this.handleClick
      })
    }
  }
}

// App
@ProxyHoc()
class App extends Component<any, any> {
  state = {
    num: 1
  }
  handleClick = () =>  {
    this.setState({
      num: this.num + 1
    })
  }

  render() {
    return (
      <div onClick={this.handleClick}>{this.state.num}</div>
    )
  }
}

class App extends React.Component<props, state> {
  constructor(props) {
    super(props)
    this.state = {
      num: 1,
      title: 'label',
    }
    this.handleClick2 = this.handleClick1.bind(this)
  }

  handleClick1() {
    this.setState({
      num: this.state.num + 1
    })
  }

  handleClick3 = () => {
    this.setState({
      num: this.state.num + 1
    })
  }

  render() {
    return (
      <div>
        /* bind每次返回一个全新的function，导致子组件会被重复渲染 */
        <ChildCompoent onClick={this.handleClick1.bind(this)} />
        /* this指向正常，因为手动绑定了this */
        <ChildCompoent onClick={this.handleClick2} />
        /* 和调用bind绑定类似，箭头函数每次返回一个全新的函数，导致渲染开销 */
        <ChildCompoent onClick={() => this.handleClick1()} />
        /* 箭头函数的this在声明时即会绑定上下文，所以这里表现正常 */
        <ChildCompoent onClick={this.handleClick3} />
      </div>
    )
  }
}

import React from 'react'
import ReactDom from 'react-dom'

function Counter() {
  const [count, setCount] = useState(0)
  const [name, setName]  = useState('jico')

  const handleCount = () => {
    setCount(count + 1)
  }
  const handleName = () => {
    setName(name + '!')
  }
  return (
    <div>
      <div>count: {count}</div>
      <button onClick={handleCount}>countAdd</button>
      <div>name: {name}</div>
      <button onClick={handleName}>nameAdd</button>
    </div>
  )
}
let stateArr: any[] = []
let cursor = 0
function useState<T>(initialState: T): [T, (newState: T) => void] {
  const currentCursor = cursor
  stateArray[currentCursor] = stateArray[currentCursor] || initialState

  function setState(newState: T) {
    stateArray[currentCursor] = newState
    render()
  }
  ++cursor
  return [stateArray[currentCursor], setState]
}

export function render() {
  ReactDom.render(
    <React.StrictMode>
      <Counter />
    </React.StrictMode>,
    document.getElementById('root')
  )
  cursor = 0
}

import React from 'react'
import ReactDom from 'react-dom'

function Counter() {
  // 清除游标
  effectCursor = 0
  const [count, setCount] = useState(0)
  const [name, setName]  = useState('jico')

  const handleCount = () => {
    setCount(count + 1)
  }
  const handleName = () => {
    setName(name + '!')
  }
  useEffect(() => {
    console.log('count changed', count)
  }, [count])
  useEffect(() => {
    console.log('name changed', name)
  }, [name])

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={handleCount}>countAdd</button>
      <div>name: {name}</div>
      <button onClick={handleName}>nameAdd</button>
    </div>
  )
}

// effect的依赖本身是一个数组，所以这里是一个游标索引的二维数组
const allDeps: Array<any[] | undefined> = []
let effectCursor: number = 0
function useEffect(callback: () => void, depArray?: any[]) {
  // 如果没有声明依赖，则每次渲染都执行
  if (!depArray) {
    callback()
    allDeps[effectCursor] = depArray
    effectCursor++
    return
  }
  const deps = allDeps[effectCursor]
  const hasChanged = deps 
    ? depArray.some((el, i) => el !== deps[i]) 
    : true
  if (hasChanged) {
    callback()
    allDeps[effectCursor] = depArray
  }
}

export function render() {
  ReactDom.render(
    <React.StrictMode>
      <Counter />
    </React.StrictMode>,
    document.getElementById('root')
  )
}

// before transform
const a = () => {
	return (
    <div className="App">
      {
        [].map(([key, arr]) => {
          return (
            <div key={key}>
              123
            </div>
          )
        })
      }
    </div>
  )
}
// transfrom
var a = function a() {
  return /*#__PURE__*/React.createElement("div", {
    className: "App"
  }, [].map(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
        key = _ref2[0],
        arr = _ref2[1];

    return /*#__PURE__*/React.createElement("div", {
      key: key
    }, "123");
  }));
};