博客

1. useState的值在每个rernder中都是独立存在的。而useRef.current则更像是相对于render函数的一个全局变量，每次他会保持render的最新状态。
2. useState值的更新会触发组件重新渲染，而useRef的current不会出发重渲染。
3. useRef（）钩不仅用于DOM引用。“ ref”对象是通用
   
   容器
   
   ，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。
4. 变量是决定视图图层渲染的变量，请使用
   
useState

   ，其他用途
   
useRef

5. useRef特性：可变的ref对象，持久化

链接：useRef和useState比较

React项目中，通常使用useState的钩子函数更新state，

但是在useEffect中 使用useState更新state不会立马更新到state，而是等useEffect

执行完毕？

以后才会统一处理更新（写多个useEffect也没用），如果要在useEffect中立即拿到更新后的state值，可以

使用useRef

这个钩子函数。

const [filterData, setFilterData] = useState<any>([]);
  const [total, setTotal] = useState<number>(0);
  let studentGuid = useRef<string | null>(window.sessionStorage.getItem("sGuid"));
  const [studentInfo, setstudentInfo] = useState<StudentInfo>({});
  const [currentPath, setCurrentPath] = useState<string | null>(window.sessionStorage.getItem("current_path"));
  const [isHideInfo, setIsHideInfo] = useState<boolean>(false);

  const { urls } = props;
  const intl = useIntl();
  useEffect(() => {
    window.addEventListener('SwitchStudent', (evt: Event): void => {
      const e = evt as CustomEvent;
      if (e == null) {
        console.log('Invalid event type!');
        return;
      }

      const { param } = e.detail;
      if (param) {
        window.sessionStorage.setItem("sGuid", param);
        studentGuid = param;
      }
    }, false);

    window.addEventListener('Clear', (evt: Event): void => {
      const e = evt as CustomEvent;
      if (e == null) {
        console.log('Invalid event type!');
        return;
      }

      studentGuid ="" ;
    }, false);

    window.addEventListener('SwitchCurrentPath', (evt: Event): void => {
      const e = evt as CustomEvent;
      if (e == null) {
        console.log('Invalid event type!');
        return;
      }

      const { param } = e.detail;

      if (param) {
        window.sessionStorage.setItem("current_path", param);
        setCurrentPath(param);
      }
    }, false);

    window.addEventListener('UpdateStudentInfo', (evt: Event): void => {
      const e = evt as CustomEvent;
      if (e == null) {
        console.log('Invalid event type!');
        return;
      }
      if (!studentGuid) {    //HERE
        return;
      }
      queryStudentInfoByGuid(studentGuid).then((result) => {
        setStudentInfo(result);
      });
    }, false);
    queryStudentCard();
    queryHideInfo();
  }, []);

在此副作用函数中，

如果不是

使用useRef，

而是

在SwitchStudent事件监听器中使用useState对studentGuid更新，

那么

在UpdateStudentInfo事件监听器中拿到的studentGuid将会始终是null，也就不会执行后面的 queryStudentInfoByGuid()。