react 16.8新增功能hooks的使用

记录下react hooks实战项目中用法
react hooks 主要提供了几种 hooks 函数，可以使传统的react函数组件可以管理状态，可以模拟生命周期，等操作。
现在开始介绍常用的hooks 函数

1. useState

function hooksComponent(){
	let [setCount,count] = setState(0);
	return (
		<button onClick={()=>{
			setCount(count+1)
		}}></button>
		
	)
}

let [setCount,count] = useState(0) 传递的参数是state的初始值 返回两个值的数组 用数组解构的方式把两个值解构出来 数组第一个值是 改变count的setcount方法 第二个值就是state值

2. useEffect

当设置setEffect如果第二个参数没有设置值，每次状态更新都会执行改函数一次
如果模拟class组件中的componentDidMount生命周期可以把useEffect设置为空

	useEffect(()=>{
		console.log("模拟componentDidMount生命周期")；
		return ()=>{
			console.log("执行返回函数")
		}
	},[])

如果第二个参数什么也不设置 那么当组件挂载完成后会执行一次 此后
每当组件状态更新或者props发生变化的时候都会执行该effect函数
那么这种方式可以模拟 componentDidUpdate 生命周期

如果给useEffect第二个值设置依赖状态 那么当组件挂载完成会执行一次 之后会等依赖状态变化才会去更新该函数，如果设置多个依赖状态，当多个依赖中的一个依赖状态发生数据改变都会引起effect的执行

说一下useEffect函数返回函数的作用 如果把useEffect第二个参数设置为空数组 那么这个返回的函数等到组件被卸载之前才会被执行 所以此方式可以模拟 组件销毁的生命周期 conponentWillOnmount

那么如果第二个参数设置依赖状态 那么useEffect 返回函数会什么时候执行呢， 当这种情况下 依赖状态改变 执行useEffect函数之前才会执行该返回函数

export default function HooksComponent() {

    let [count, setCount] = useState(0);
    let [testval, setTestval] = useState(0);

    useEffect(() => { //第一次组件挂载完成后执行一次 之后随着count 变化才执行
        console.log("user effect running.... run...");
        return () => {//如果为【】数组 当组件销毁之前执行 如果绑定count则当count下次改变时先执行 relax 再执行函数
            console.log("relax")
        }
    }, [count, testval]);
    return (
        <div onClick={() => { setCount(100); }}>
            count--->{count}
        </div>
        )
}

3. useCallback
   useCallback改hooks函数主要的作用是缓存函数，什么意思呢，
   也就是想我们如果在一个函数组件里面写一个普通的方法 如下：

function callbackHook(props){
	function callback(){
		//
	}
	return (<div>props.value</div>)
}

每次props发生变化 callbaclHook组件都会被从执行重新 该方法都会新创建一个，这样效率会明显很低 ，如何优化该方式呢 那就是采用useCallback
如果我 将useCallback设置第二个参数为空数组 那么这个函数只会创建一次 当每次state或者props发生改变 重新执行该函数组件大的时候都不会被重新创建
此外第二个参数还可以设置依赖状态，当组件创建的时候被useCallback缓存的函数会创建一次 ，此后每当依赖的状态发生变化才会再次从新创建缓存函数

值得注意的是 像 useCallback和 useMem useEffect 执行的时候才会捕获组件函数内的变量 也就是每次捕获会产生一个闭包 ，如果依赖某个状态 当那个状态没有改变 该函数也没有从新去组件中获取新的状态时那么 函数中的数据都是上次捕获的数据 所以这里要注意