简单的 hooks

1，为什么 react 要搞 hooks？

想要复用一个有状态组件太麻烦，
react 的核心思想是将一个页面拆成多个可复用的组件，并且用由上而下的单项数据流形式将这些组件都串联起来。如果在大型项目中用 react，就会有很多react 组件冗长而难用，尤其是有状态的 class 组件。他们本身就包含了状态 state。所以就很难复用。

还有 class 函数生命周期和 this 指向问题，以及尽可能将组件写成无状态组件，但后期要获取状态是又要将 function 改成 class 就比较麻烦

如此 hooks 出现了
先看 demo

import React, { useState, useEffect } from 'react';

// 一个简单的hooks 
/***
 * hooks 让一个函数变成了一个有状态函数。他有自己的状态（count），还可以更新自己的状态（setCount）,这就是注入的 hook---useState
 * hook 除了 useState 之外还有很多其他 hook 例如 useEffect 类似 componentDidMount 声明周期，useContext 提供上下文功能等
 *  只能在最顶层使用 hook，不能在条件，循环或者嵌套函数中使用 hook
 */
function Catalog () {
    // 由中括号解构
    const [count, setCount] = useState(0) //括号内为初始值
    const [fruit, setFruit] = useState('banana')
    //类似于 class 有状态组件内的 componentDidMount 和 componentDidUpDate
    useEffect(()=>{
        document.title=`you click ${count} times`
    })
    function content(){
        setCount(count+1)
        setFruit("orange")
    }
    return (
        <div className='content'>
            <div className='count'>caltlog点击第{count}次</div>
            <hr/>
            <div>what is your like {fruit}</div>

            <button className='button' onClick={content}>catalogclick</button>
        </div>
    )
}
export default Catalog;
复制代码

如上useState 可以多次调用，而在多次调用中如何保证useState 是相互独立的？
他是根据 state 出现的顺序来定的

//第一次初始化
useState(0) //初始化的 count 值
useState('banana') //将 fruit 初始化值为 banana

//第二次渲染
useState(0) //读取状态变量 count 值 （初始化的值被忽略）
useState(' orange') //读取状态变量 fruit （初始化值 banana被忽略）


复制代码

react 规定必须将 hooks 写在最外层，确保 hooks 按照顺序运行，否则就会报错

2，什么是 Effect hooks

function  count() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  
复制代码

例如上述代码中,useEffect 相当与 class 有状态组件中 componentDidMount，componentDidUpdate，componentWillUnmount 三个钩子函数。 我们给 useEffect 传入了一个匿名函数

注意 1，react 首次渲染和之后的每次渲染都会调用 useEffect 函数。2，useEffect 中定义的副作用函数不会阻碍浏览器视图更新，也就是说他是异步执行的。

跳过一些副作用函数，只需要在 useEffect 中添加第二个参数，只有当第一个参数发生改变时才更新视图

useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]); //只有count 发生变化时 title 这句才会发生变化
复制代码

当第二个参数为空[]时，相当与仅在首次渲染时更新 count 未执行完毕，所以要减少这样使用可能会有 bug

3.其他hooks，查阅官方文档