React的10种hook

React目前提供的Hook

• useState 设置和改变state,代替原来的state和setState
• useEffect 代替原来的生命周期componentDidMount,componentDidUpdate和componentWillUnmount的合并版
• useLayoutEffect 与useEffect作用相同，但它会同步调用effect(当useEffect里面的操作DOM，并且会改变页面的样式，就需要用这个，否则可能会出现闪屏问题)
• useMemo 控制组件更新条件，可根据状态变化控制方法执行，优化传值
• useCallback useMemo优化传值，usecallback优化传的方法，是否更新
• useRef 跟以前的ref一样，只是更简洁
• useContext 上下文爷孙及更深组件传值
• useReducer 代替原来redux里的reducer,配合useContext一起使用
• useDebugValue 在React开发者工具中显示自定义hook的标签，调试使用。
• useImperativeHandle 可以让你在使用ref时自定义暴露给组件的实例值。

1.useState

import React from 'react';
import './App.css';
//通常的class写法，改变状态
class App extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			hook:'react hook 是真的好用'
		}
	}
	changehook = () => {
		this.setState({
		hook: '我改变了react hook的值'
	})
	}
	render () {
		const { hook } = this.state
		return(
			<header className='App-header'>
			{hook}
			<button onClick={this.changehook}>改变hook</button>
			</header>
		)
	}
}
export {App}

//函数式写法，改变状态

function App() {
//创建了一个叫hook的变量,sethook方法可以改变这个变量，初始值为'react hook是真的好用'
const [hook, sethook] = useState("react hook 是真的好用啊")；
return (
	<header className="App-header">
	{hook}{/*这里的变量和方法也是可以直接使用的*/}
	<button onClick={()=> sethook("我可以改变 reacthook的值")}></button>
	</header>
)；
}
export {App}

//箭头函数的函数写法，改变状态
export const App = props => {
	const [hook, sethook] = useState("react hook初始赋值")；
	return (
	<header className="App-header">
	{hook}
	<button onClick={()=>sethook("我改变了react hook的值")}></button>
	</header>
	)
}

2.useEffect & useLayoutEffect
useEffect代替原来的生命周期，componentDidMount,componentDidUpdate和componentWilUnmount的合并版
useEffect(()=>{return ()=>{}},[])第一个参数是函数，默认第一次渲染和更新时都会触发，默认自带一个return,return一个函数表示可以再销毁之前处理这些事情。
第二个参数，数组【】，空的时候表示只执行一次，更新时不触发，里面的参数是什么，当参数变化时才会执行useEffect

useEffect可以多次使用，按照先后顺序执行
useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
import React, { useState, useEffect, useLayoutEffect } from 'react';
 
//箭头函数的写法，改变状态
const UseEffect = (props) => {
    //创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
    const [ hook, sethook ] = useState('react hook 是真的好用啊');
    const [ name ] = useState('baby张');
    return (
        <header className="UseEffect-header">
            <h3>UseEffect</h3>
            <Child hook={hook} name={name} />
            {/**上面的变量和下面方法也是可以直接使用的 */}
            <button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button>
        </header>
    );
};
 
const Child = (props) => {
    const [ newhook, setnewhook ] = useState(props.hook);
    //这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次
    useEffect(() => {
        console.log('first componentDidMount');
    }, []);
 
    //第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。
    useEffect(
        () => {
            setnewhook(props.hook + '222222222');
            console.log('useEffect');
            return () => {
                console.log('componentWillUnmount ');
            };
        },
        [ props.hook ]
    );
 
    //useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
    useLayoutEffect(
        () => {
            console.log('useLayoutEffect');
            return () => {
                console.log('useLayoutEffect componentWillUnmount');
            };
        },
        [ props.hook ]
    );
 
    return (
        <div>
            <p>{props.name}</p>
            {newhook}
        </div>
    );
};
 
export default UseEffect;