React Hook

使用：在不编写class组件的情况下使用

useState

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量,初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect / uselayoutEffec

1.1 useEffect: 在整个页面渲染完成才会调用的代码
import React, { useEffect } from 'react';

// 清除 effect
function Example() {

  useEffect(() => {
   const subscription = props.source.subscribe();
   return () => {
     // 清除订阅
     subscription.unsubscribe();
   };
  });
  return (
    <div>
      <p>uselayoutEffec</p>
    </div>
  );
}


// effect 的条件执行
function Example() {

  useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
   }, [props.source]);  // 此时，只有当 props.source 改变后才会重新创建订阅。
  });
  return (
    <div>
      <p>uselayoutEffec</p>
    </div>
  );
}

2.1 uselayoutEffec：和原来的 componentDidmount & componentDidUpdate 一致，在react完成Dom更新马上同步调用的代码，会阻塞页面渲染

useCallback / useMemo

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

1.1 useCallback：返回一个 memoized 回调函数

import React, { useCallback} from 'react';

function Example() {

   const memoizedCallback = useCallback(() => {
    doSomething(a, b);
   }, [a, b]);
   
   render (
     <div onClick={ () => memoizedCallback() }></div>
  )
}

1.2 useMemo: 返回一个 memoized 值

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

useRef(保存引用值)

说明：useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}