react hook

hook 简介

Hook 是一个特殊的函数，它可以让你“钩入” React 的特性，常见的hook如下：

• useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。
• Effect Hook 可以让你在函数组件中执行副作用操作

useState

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './component/Hello'
import { EffectDemo } from './component/EffectDemo';
import { useTimerReqHooks } from './component/imerReqHooks';
import { IntervalDemo } from './component/IntervalDemo';
import Hello1 from './component/Hello1';

function ListComp() {
  const { count, data } = useTimerReqHooks();
  const liDom = data.map((it:any, index:any) => (<li key={index}>{it}</li>));
  return (
    <>
      <p>次数： {count}</p>
      <p>数据</p>
      <ul>
        {liDom}
      </ul>
    </>)
}
function TestCusHook() {
  const [hasShow, setHasShow] = useState(true);
  return (
    <div>
      <p><button onClick={() => { setHasShow(!hasShow) }}>隐藏/显示</button></p>
      {hasShow && <ListComp />}
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Hello1 name='nick' ></Hello1>
      <hr />
      <Hello name='nick' enthusiasmLevel={1}></Hello>
      <hr />
      <EffectDemo></EffectDemo>
      <hr />
      <TestCusHook></TestCusHook>
      <hr />
      <IntervalDemo></IntervalDemo>
    </div>
  );
}

export default App;