【React Hook】自定义用法（基础案例，一看就会）

• 自定义一个计数器的 hook
• count.js 文件

import React, { useState } from 'react';
//参数 ：initNum 加或减的个数  初始值
function useCount(initNum) {
    const [count, setCount] = useState(initNum);
    //加一的函数
    const addCount = () => {
        setCount(count + 1);
    }

    //减一的函数
    const minusCount = () => {
        setCount(count - 1);
    }
    return [count, addCount, minusCount]
}
export default useCount;

• 使用自定义 hook
• App.js文件

//1.引入useState  钩子
import React from 'react';
//1.引入
import useCount from './count';
function App() {
  //2.初始化
  const [count, addCount, minusCount] = useCount(10);
  return (
    <div>
      count:{count}
      <button onClick={addCount}>+</button>
      <button onClick={minusCount}>-</button>
    </div>
  );
}
export default App;

• index.js文件

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);