react学习笔记（6）

useState

const [state, setstate] = usestate(0);

useState的作用就是保存组件的状态，和类组件中的state一样，但是是用于函数式组件当中的。上述代码就是创建了一个名为state的状态变量，初始值为0，当我们要改变这个状态的时候，可以通过setstate()进行改变，括号内填入状态改变后的值。

useEffect

useEffect(( => {
    //这里写副作用，一般一些请求可以在这里写
    return () => {
        //这里在副作用执行完毕之后执行，可以写一些相关的代码
    };
}，[])

函数式组件不存在生命周期，所以不能像类组件那样在生命周期中请求相关数据，但是useEffect可以让函数式组件也能使用axios函数向后端发起请求。具体代码格式如上文所述。

useLayoutEffect

简单来说就是调用时机不同，useLayoutEffect 和原来componentDidMount & componentDi dupdate一致,在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的代码。

在实际使用时如果想避免页面抖动的话，可以把需要操作DOM的代码放在useLayoutEffect里。在这里做点dom操作,这些dom修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价。

useCallback(记忆函数)

防止因为组件重新渲染，导致方法被重新创建,起到缓存作用只有第二个参数变化了,才重新声明一次。

var handleClick = usecallback(()=>{
console.log(name)
}, [name])
<button onClick={ ()=>handleClick()}>hello</button>

只有name改变后， 这个函数才会重新声明一次，如果传入空数组， 那么就是第一次创建后就被缓存， 如果name后期改变了，拿到的还是老的name。如果不传第二个参数，每次都会重新声明一次，拿到的就是最新的name。

useMemo记忆组件

useCallback的功能完全可以由useMemo所取代，如果你想通过使用useMemo返回一个记忆函数也是完全可以的。

唯一的区别是: useCallback不会执行第一个参数函数， 而是将它返回给你，而useMemo会执行第一个函数并且将函数执行结果返回给你。所以在前面的例子中，可以返回handleClick来达到存储函数的目的。
所以useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一一个确定的值，比如记忆组件。

useRef(保存引用值)

const ref1 = useRef(value);

返回一个可变的 ref 对象，该对象只有个current属性，初始值为传入的参数。返回的ref对象在组件的整个生命周期内保持不变,当更新current值时并不会视图，这是与useState不同的地方
更新useRef是副作用，所以一般写在useEffect或event handler里。useRef类似于类组件的this。