日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?hooks使用方法全面匯總_React

作者：愛思考的豬 ? 更新時間： 2022-11-24 編程語言

1. 前言

react16.8推出hooks更好的支持函數組件,使用函數組件更容易進行代碼的復用,拓展性更強。

2. useState

useState類似于class組件的state功能,用于更新視圖

import React, { Component, useState } from 'react';
export default function Hello() {
  const [count, setCount] = useState(0); //設置默認值為0
  return <div>
    {count}
    <button onClick={()=>setCount(count + 1)}>增加</button>
  </div>
}
//useState還可以使用函數進行賦值
 const [count, setCount] = useState(()=>0); //設置默認值為0

3. useEffect

useEffect接受兩個參數,第一個參數是要執行的回調函數,第二個參數是依賴的參數,如下面的例子里只有當count發生變化的時候才會打印count,當第二個參數為空數組的時候,組件在渲染完成后會執行一次,第二個參數不傳遞的時候每次渲染都會執行

export default function Hello() {
  const [count, setCount] = useState(() => 0); //設置默認值為0
  // useEffect
  useEffect(() => {
  }, [count])
  return <div>
    {count}
    <button onClick={() => setCount(count + 1)}>增加</button>
  </div>
}

帶有返回值的useEffect用于清除執行過程中的副作用

  useEffect(()=>{
    const timer = setInterval(() => {
      console.log(count);
    }, 1000);
    window.addEventListener('resize',handleResize);
    return function(){
      clearInterval(timer);
      window.removeEventListener('resize',handleResize);
    }
  }, [count])

如果每次執行useEffect都定義一個定時器,那定時器會越來越多,通過在返回函數中清除定時器取消這個副作用。useEffect返回函數的執行時機是下一次useEffect執行之前。

利用這一點可以實現防抖和節流函數

4. useLayoutEffect

dom渲染之前的useEffect: useLayoutEffect =》 dom渲染 =》useLayout

export default function Hello (props){
  const [count, setCount]  = useState(0);
  useEffect(()=>{
    console.log('useEffect');
  },[count]);
  useLayoutEffect(()=>{
    console.log('useLayoutEffect');
  },[count])
  return <div>
    {count}
    <button onClick={()=> setCount(count+1)}>增加</button>;
  </div>
}

使用useEffect和useLayoutEffect去更新視圖狀態會產生不同的效果,useEffect會有一個狀態到另一個狀態的過程(閃動效果),useLayoutEffect直接渲染最終狀態

5. useMemo

useMemo的作用就是緩存,減少代碼的執行次數。

下面的代碼點擊按鈕count狀態發生變化,整個Hello函數體內的代碼都會執行,每次點擊按鈕都會打印str的值

export default function Hello (props){
  const [count, setCount]  = useState(0);
  const [str, setStr] = useState('hello hooks!');
  useEffect(()=>{
    console.log('useEffect');
  },[count]);
  console.log('str'); //每次渲染都會執行
  return <div>
    {count}
    {str}
    <button onClick={()=> setCount(count+1)}>增加</button>
  </div>
}

使用useMemeo進行緩存,當str發生變化的時候再執行打印語句

useMemo(()=>{
  console.log(str);
},[str])

useMemo還可以用來緩存函數

export default function Hello (props){
  const [count, setCount]  = useState(0);
  const [str, setStr] = useState('hello hooks!');
  useEffect(()=>{
    console.log('useEffect');
  },[count]);
  // 使用useMemo緩存函數
  const hanldeClick = useMemo(()=>{
    return function(){
      console.log(count);
    };
  },[count]);
  return <div>
    {count}
    {str}
    <button onClick={()=> setCount(count+1)}>增加</button>
    <button onClick={hanldeClick}>測試</button>
  </div>
}

6. useCallback

useCallback的功能是緩存函數,取的是useMemo的運行結果

  const handleClick = useMemo(()=>{
    return function(){
      console.log(count);
    };
  },[count]);
  const handleClick = useCallback(()=>{
    console.log(count);
  },[count])

上面兩個實現的功能是一樣的,在平時的開發中要盡量使用useMemo去緩存函數

7. useRef

  • 獲取元素dom ref.current
  • 緩存數據

使用useRef獲取元素

export default function Hello(props) {
  const ref = useRef(null);
  useEffect(() => {
    console.log(ref.current); // <input id='input'>
  })
  return <div>
    <input ref={ref} id="input" />
  </div>
}

使用useRef保存數據,當ref.current發生變化的時候視圖不會重新渲染

export default function Hello(props) {
  const ref = useRef(null);
  useEffect(() => {
    ref.current = 'hello hooks!';
  });
  return <div>
    <span> {ref.current}</span>
  </div>
}

8. useReducer

useReducer用于更新復雜的state提升渲染性能,使用方法與redux類似。與redux的區別是redux管理的是全局的數據做數據共享,useReducer是useState的替代方案,只管理單個組件的狀態。

onst reducer = (state, action) => {
  switch (action.name) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
};
const initState = { count: 0 };
export default function Hello() {
  const [state, dispatch] = useReducer(reducer, initState)
  return <div>
    <span> {state.count}</span>
    <button onClick={() => dispatch({ name: 'increment' })}>增加</button>
    <button onClick={() => dispatch({ name: 'decrement' })}>減少</button>
  </div>
}

9. useContext

useContext用來解決props層層傳遞,嵌套很深的問題。

export default function Father() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return <div>
    {count}
    <button onClick={() => handleClick()}>增加</button>
    <MyContext.Provider value={{ count }}>
      <Children />
    </MyContext.Provider>
  </div>
};
function Children() {
  const context = useContext(MyContext);
  return <div>
    父組件的count: {context.count}
  </div>
};

10. memo

在calss組件中通過對比props,子組件接收的props發生變化的時候才進行更新渲染,在函數組件中沒有識別props的能力,當父組件重新渲染的時候子組件也會重新渲染,在使用memo包裹后只有props發生變化的時候才會重新渲染。memo的功能類似于calss組件對pureComponent對props進行了淺比較。

export default function Father() {
 const [count, setCount] = useState(0);
 const [str, setStr] = useState('hello hooks!');
 return <div>
   {count}
   {str}
   <button onClick={() => setCount(count + 1)}>增加count</button>
   <button onClick={() => setStr(str + 1)}>修改str</button>
   <Children count={count} />
 </div>
};
const Children = React.memo(function Children(props) {
 console.log('子組件渲染');
 return <div>
   子組件: {props.count}
 </div>
}
);

上面的例子中,count變化的時候子組件渲染更新,str變化的時候子組件不重新渲染。

原文鏈接：https://blog.csdn.net/qq_44621394/article/details/127260438

欄目分類
最近更新