React HOOKS

HOOKS

一、useState和useEffect

//逻辑组件
import { 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;
}

//引用逻辑组件
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>
  );
}
复制代码

• 注意

// 一、仅仅count变化时才触发 componentDidUpdate 钩子函数
// 二、[] 为空时触发 componentDidMount、componentWillUnmount 钩子函数
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

//usestate不会自动合并更新对象,需用此方法
setState(prevState => {
    return {...prevState, ...updatedValues}; //// 可用Object.assign替代
});

//延迟初始化：计算初始值，它只会在初始渲染时执行一次
const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props); 
  return initialState;
});

//订阅和取消订阅,防止内存泄漏
useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
        subscription.unsubscribe();
      };
    },
    [props.source]
);
复制代码

二、useContext

const locale = useContext(LocaleContext);  //接收从react.createContext返回的值

复制代码

• 注意：

三、useReducer

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAddClick(text) {
    dispatch({ type: 'add', text });
  }

  // ...
}

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'reset':
      return initialState;
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(
        reducer, 
        initialState,
        {type: 'reset', payload: initialCount} //初始化时调用的action
  );
  return (
    <> Count: {state.count} <button onClick={() => dispatch({type: 'reset'})}> Reset </button> <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </> ); } 复制代码

• 注意：

• useEffect： componentDidMount、componentDidUpdate和componentWillUnmount

四、useCallback

const memoizedCallback = useCallback(
    () => {
        doSomething(a, b);  //回调中引用的每一个值也应该出如今输入数组中
    },
    [a, b]  //输入值改变时会触发触发回调函数
);
复制代码

五、useMemo

const memoizedValue = useMemo(
    () => computeExpensiveValue(a, b), //对数据进行运算并返回结果
    [a, b]  //输入发生更改时从新计算备忘录值
);
复制代码

六、useRef

function TextInputWithFocusButton() {
  const inputEl = useRef(null); //返回一个ref对象，传递的参数为初始值
  const onButtonClick = () => {
    inputEl.current.focus(); // current指向文本输入元素，相似target
  };
  return (
    <>
      <input ref={inputEl} type="text" />  //绑定ref对象
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
复制代码

七、useImperativeMethods

语法： useImperativeMethods(ref, createInstance, [inputs])

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeMethods(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput); //forwardRef和useImperativeMethods一块儿使用

//使用组件
<FancyInput ref={fancyInputRef} /> //控制输入框获焦fancyInputRef.current.focus()
复制代码

八、useMutationEffect => componentWillUpdate (待验证)

复制代码

• 避免从useMutationEffect中获取DOM元素
• 签名与useeffect相同，但在更新兄弟组件以前，它在react执行其DOM突变的同一阶段同步激发。使用此命令执行自定义DOM突变。

九、useLayoutEffect

复制代码

• componentDidMount componentDidUpdate
• 读取计算的样式或布局信息。