React函数式hooks使用

文件结构

• App.js

// import StateHook from './components/StateHook';
// import EffectHook from './components/EffectHook';
// import LayoutEffectHook from './components/LayoutEffectHook';
// import MemoHook from './components/MemoHook';
// import CallbackHook from './components/CallbackHook';
// import ReactMemo from './components/ReactMemo';
// import RefHook from './components/RefHook';
// import ForwardRefHook from './components/ForwardRefHook';
// import ImperativeHandleHook from './components/ImperativeHandleHook';
// import ContextHook from "./components/ContextHook";
// import ReducerHook from "./components/ReducerHook";
// import ObjectDemo from "./components/ObjectDemo";
const App = () => {
  return (
    <div>
      {/* <StateHook></StateHook> */}
      {/* <EffectHook></EffectHook> */}
      {/* <LayoutEffectHook></LayoutEffectHook> */}
      {/* <MemoHook></MemoHook> */}
      {/* <CallbackHook></CallbackHook> */}
      {/* <ReactMemo></ReactMemo> */}
      {/* <RefHook></RefHook> */}
      {/* <ForwardRefHook></ForwardRefHook> */}
      {/* <ImperativeHandleHook></ImperativeHandleHook> */}
      {/* <ContextHook></ContextHook> */}
      {/* <ReducerHook></ReducerHook> */}
      {/* <ObjectDemo></ObjectDemo> */}
    </div>
  );
};

export default App;

• index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

useState用法

介绍

useState 可以使函数组件像类组件一样拥有 state，函数组件通过 useState 可以让组件重新渲染，更新视图。
useState 基础介绍：

const [ state , dispatch ] = useState(initData)

• state，目的提供给 UI ，作为渲染视图的数据源。
• dispatchAction 改变 state 的函数，可以理解为推动函数组件渲染的渲染函数。
• initData 有两种情况，第一种情况是非函数，将作为 state 初始化的值。 第二种情况是函数，函数的返回值作为 useState 初始化的值。

注意事项

• 在函数组件一次执行上下文中，state 的值是固定不变的。
• 如果两次 dispatchAction 传入相同的 state 值，那么组件就不会更新。
• 当触发 dispatchAction 在当前执行上下文中获取不到最新的 state, 只有再下一次组件 rerender 中才能获取到。

使用

import { useState } from "react";

const StateHook = () => {
  let [n, setN] = useState(0);
  const handleClick = () => {
    setN(cur => cur + 1);
  };
  return (
    <div>
      <h1>State Hook</h1>
      <h2>{n}</h2>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};
export default StateHook;

useEffect用法

介绍

useEffect 第一个参数 callback, 返回的 destory ， destory 作为下一次callback执行之前调用，用于清除上一次 callback 产生的副作用。
第二个参数作为依赖项，是一个数组，可以有多个依赖项，依赖项改变，执行上一次callback 返回的 destory ，和执行新的 effect 第一个参数 callback 。
对于 useEffect 执行， React 处理逻辑是采用异步调用 ，对于每一个 effect 的 callback， React 会向 setTimeout回调函数一样，放入任务队列&#x