React-Hook（4）：自定义hook实现实例项目

---

一、计数器实例

1.高阶组件实例

本实例用来与用hook实现的项目做对比
首先是纯react实现：

import React,{Component} from 'react'

class Count extends Component{
  constructor(props){
    super(props)
    this.state={
      count:0
    }
  }
  increase(){
    this.setState({
      count:++this.state.count
    })
  }
  decrease(){
    this.setState({
      count:--this.state.count
    })
  }
  render(){
    return(
        <div>
          <p>{this.state.count}</p>
          <button onClick={()=>{this.increase()}}>Increase</button>
          <button onClick={()=>{this.decrease()}}>Decrease</button>
        </div>
    )
  }
}
class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        <Count></Count>
      </div>
    )
  }
}

export default App;

然后改写成高阶组件包装形式：

import React,{Component} from 'react'

class Count extends Component{
  constructor(props){
    super(props)
  }
  render(){
    console.log(this.props)
    const {count,increase,decrease}=this.props
    return(
        <div>
          <p>{count}</p>
          <button onClick={()=>{increase()}}>Increase</button>
          <button onClick={()=>{decrease()}}>Decrease</button>
        </div>
    )
  }
}

function FatherCom(WrapComponent){
  return class NewComponent extends Component{
    constructor(props){
      super(props)
      this.state={
        count:0
      }
    }
    increase(){
      this.setState({
        count:++this.state.count
      })
    }
    decrease(){
      this.setState({
        count:--this.state.count
      })
    }
    render(){
      return(
        <div>
          <WrapComponent count={this.state.count} increase={()=>{this.increase()}} decrease={()=>{this.decrease()}}></WrapComponent>
        </div>
      )
    }
  }
}

Count=FatherCom(Count)

class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        <Count></Count>
      </div>
    )
  }
}

export default App;

具体修改练习：
React复习（10）：高阶组件应用（抽离状态+包装组件）

2.自定义hook实现

（1）.使用已有hook实现

import React,{Component,useState} from 'react'

function Count(){
  var [count,setCount]=useState(0)
  function increase(){
    setCount(++count)
  }
  function decrease(){
    setCount(--count)
  }
  return(
    <div>
      <p>{count}</p>
      <button onClick={()=>{increase()}}>Increase</button>
      <button onClick={()=>{decrease()}}>Decrease</button>
    </div>
  )
}

function App(){
  return(
    <div>
      <Count></Count>
    </div>
  )
}

export default App;

（2）.自定义hook
自定义一个useCountFather的钩子，传递的参数为initValue，其实也是一种抽离，我们将Count里面的状态和逻辑抽离出来，使得Count只起到一个视图渲染（傻瓜组件），具体代码如下：

import React,{Component,useState} from 'react'

function useCountFather(initValue){
  var [count,setCount]=useState(initValue)
  function increase(){
    setCount(++count)
  }
  function decrease(){
    setCount(--count)
  }
  return [count,{increase,decrease}]
}

function Count(){
  var [count,countFatherApi]=useCountFather(0)
  
  return(
    <div>
      <p>{count}</p>
      <button onClick={()=>{countFatherApi.increase()}}>Increase</button>
      <button onClick={()=>{countFatherApi.decrease()}}>Decrease</button>
    </div>
  )
}

function App(){
  return(
    <div>
      <Count></Count>
    </div>
  )
}

export default App;

二、更改Tittle实例

更改网页title

1.高阶组件实例

在组件的两个生命周期上修改title
纯react的class组件实现

class Title extends Component{
  componentDidMount(){
    document.title="title"
  }
  componentDidUpdate(){
    document.title="title"
  }
  render(){
    return(
      <div>Title</div>
    )
  }
}

class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        {/* <Count></Count> */}
        <Title></Title>
      </div>
    )
  }
}

用高阶组件包装

class Title extends Component{
  
  render(){
    return(
      <div>Title</div>
    )
  }
}
function TitleFather(WrapComponent){
  return class NewComponent extends Component{
    componentDidMount(){
      document.title="title"
    }
    componentDidUpdate(){
      document.title="title"
    }
    render(){
      return(
        <div>
          <WrapComponent></WrapComponent>
        </div>
      )
    }
  }
}
Title=TitleFather(Title)
class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        {/* <Count></Count> */}
        <Title></Title>
      </div>
    )
  }
}

2.自定义hook实现

（1）.使用已有hook实现
使用useEffect副作用钩子传入一个箭头函数替换两个生命周期

function Title(){
  useEffect(()=>{
    document.title="title"
  })
  return(
    <div>title</div>
  )
}

function App(){
  return(
    <div>
      {/* <Count></Count> */}
      <Title></Title>
    </div>
  )
}

（2）.自定义hook
将Title组件逻辑部分抽离出来（添加依赖项）

function useTitleFather(data){
  useEffect(()=>{
    document.title=data
  },[e])
}

function Title(){
  useTitleFather("title")
  return(
    <div>title</div>
  )
}

function App(){
  return(
    <div>
      {/* <Count></Count> */}
      <Title></Title>
    </div>
  )
}

三、。。。。

在学习的时候真的有点不明白，为什么非要这么做（上述行为），就如最后一个例子，不就是一个方法抽离出来，传个参数吗，然后自己说服自己：可能组件本身只负责渲染，尽量不在里面写逻辑部分，所以我们通过这种方法将逻辑部分抽离出来。例子都太简单了，导致学习过程一直没搞明白这么做的原因…