Hook代替类组件（hook+函数组件）

Hook是React 16.8的新增特性，它可以在不编写类组件的情况下使用state以及其他React特性

Hook和函数组件：
React的函数组件处理是这样的
const Demo = (props)=>{
    // 可以在这使用 Hook
     ...
    return <div>Hook</div>
}

也可以这样写：
function Demo(props){
   // 可以在这里使用Hook
   return <div>Hook</div>
}

hook:(钩子，钩入）
hook + 函数组件 === 类组件

提倡函数式的编程方式

hook可以在函数内部返回前进行定义：
function Hook(){
   hook定义
   return <div>hook</div>
}

hook可以完全取代class

使用hook:
import React,{useState} from "react"

export default function Search(){

    //使用hook:
    const [count,setCount] = useState()
    return (
       <div>
         <h1>搜索</h1>
       </div>
    )
}

useState():
是一个函数
useState(1):
在里面传了一个1为初始化的值


函数组件写法：
导入hook:
import React,{useState} from "react"
export default function Hook(){
   //使用hook :{useState}
    const [count,setCount] = useState(1)
   return (
        <div>hook</div>
        <h1>{count}</h1>
        <button onClick={()=>{setCount(count+1)}}>Click</button>
   )
}
写法二：
import React,{useState} from "react"
export default function Hook(){
   //使用hook :{useState}
    const [count,setCount] = useState(1)
    //函数存储处理：
    function Add(){
     setCount(count+1)
    }
   return (
        <div>hook</div>
        <h1>{count}</h1>
        <button onClick={()=>{Add}}>Click</button>
   )
}

相当于：
类组件写法：
 export default class Hook extends Component{
      //状态 
      constructor(){
             super()
            //状态：
             this.state={
                count:1
              }
          }
      //渲染：
      render(){
         return(
            <div>
                <h1>class<h1>
                  <h1>this.state.count<h1>
                  <button onClick={({setState})=>{this.setState.count + 1}}></button>
             </div>
          )
       }
}


需求：我们初始化不是数值，而是数组或者数组对象，该怎么处理呢？
hook写法：
//hook的定义：
数据对象：
const [list,setList] = useState([{title:'标题1'},{title:'标题2'},{title:'标题3'}])

//函数存储处理：
    function Add(){
      let lis = {title:"标题4"}
      //es6数组对象添加对象的方式：
      setList([...list,lis])
    }

渲染：
//hook的渲染：
return(
   <div>
      <button onClick={()=>{Add}}>Click</button>//点击就可以实现数据追加
      <ul>
         {
           list.map((v,i)=>{
            return  <li key={i}>{v.title}</li>
         })
      </ul>
   </div>
)

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2] //es6扩展运算符（对数组对象序列进行处理）