react-Hook

Tip: hook使用规则：

1.只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用

2.只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(或者自定义hook)

1.useState : [count,setCount] = useState(0);

更新state没次都是合并上一次的数据（不会自动合并），class类组件中的this.setState更新是替换上一次的数据

改变时不会同步的拿到改变的数据，解决办法：使用useRef（const countRef = useRef(count)）取值是获取countRef.current;

定义的state数据如果渲染了一次组件之后就不会重新渲染，可以给组件加key解决

useState使用时可以结合useImmer一起使用效果更佳！

2.useEffect:三种使用方法

useEffect 类似 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

而useLayoutEffect更加类似componentDidMount

可以通过return清除操作，每次实行新的Effect的时候会先处理上一次的Effect。

1.useEffect(()=>{})

每次渲染组件或者更新组件都会执行

2.useEffect(()=>{},['变量'])

监听参数变化，有变化执行

3.useEffect(()=>{},[])

组件初次加载执行一次

3.自定义hook:

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

function useFriendStatus(friendID) {  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

将friendID作为参数返回isOnline

在两个独立的组件中分别使用，两个组件的state是独立的：
function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
一般使用名字使用“use”开头并调用其他hook，我们就说这是一个自定义hook

4.useMemo 计算结果是return返回的值，会缓存结果值在组件渲染是执行的函数类似 shouldComponentUpdate，不要在里面写更改state和一些副作用（Effect）操作，可能会死循环。

const name_new = useMemo((

return name;

)=>{},[name])

5.useCallBack 计算结果是 func 主要用于缓存函数（同useMemo类似）

const name_new = useCallback((

console.log("name发生变化我才会变")

)=>{},[name])

最后编辑于：2020.09.18 17:24:27