React HOOKS

時間 2019-12-07

標籤 react hooks 欄目 React 简体版

原文原文鏈接

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])react

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()
複製代碼