自定义ReactHooks

自定义ReactHooks

React Hooks

• Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

Hooks 优点

• 可以抽离公共方法和逻辑，提高代码的可复用性
• 函数式组件更简洁，开发效率更高

自定义 Hook

• 通过自定义 Hook，可以将组件逻辑提取到可重用的函数中
• 自定义 Hook 是一个函数，其名称以 use 开头，函数内部可以调用其他的 Hook

初始化项目

create-react-app hs_custom_hooks
cd hs_custom_hooks
npm i express cors morgan bootstrap@3 react-router-dom --save

useRequest

index.js

src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'
import {
   BrowserRouter,Route,Link} from 'react-router-dom';
import Table from './Table';
import Drag from './Drag';
import Form from './Form';
import Circle from './Circle';
ReactDOM.render(
  <div className="container">
    <div className="row">
      <div className="col-md-12" style={
   {
    padding: 10 }}>
        <BrowserRouter>
          <ul className="nav nav-tabs">
            <li><Link to="/table">Table</Link></li>
            <li><Link to="/drag">Drag</Link></li>
            <li><Link to="/form">Form</Link></li>
            <li><Link to="/circle">Circle</Link></li>
          </ul>
          <Route path="/table" component={
   Table}/>
          <Route path="/drag" component={
   Drag}/>
          <Route path="/form" component={
   Form}/>
          <Route path="/circle" component={
   Circle}/>
        </BrowserRouter>
      </div>
    </div>
  </div>,
  document.getElementById('root')
);

Table.js

src\Table.js

import React from 'react';
import useRequest from './hooks/useRequest';
const URL = 'http://localhost:8000/api/users';
export default function Table() {
   
    const [data, options,setOptions] = useRequest(URL);
    const {
    currentPage, totalPage, list } = data;
    return (
        <>
            <table className="table table-striped">
                <thead>
                    <tr><td>ID</td><td>姓名</td></tr>
                </thead>
                <tbody>
                    {
   
                        list.map(item => (<tr key={
   item.id}><td>{
   item.id}</td><td>{
   item.name}</td></tr>))
                    }
                </tbody>
            </table>
            <nav>
                <ul className="pagination">
                    {
   currentPage>1&&(
                        <li>
                            <button className="btn btn-default" href="#" onClick={
   () => setOptions({
    ...options,currentPage: currentPage - 1 })}>