search

dvajs / dva

🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)
https://dvajs.com/
MIT License
16.25k stars 3.16k forks source link

React-hooks 如何 集成到dva中? #1975

Closed zdpBuilder closed 5 years ago

zdpBuilder commented 5 years ago

首先，我按照React官方文档引入了React hooks 插件，代码如下： image 第二步：按照官方文档引用 import { useState } from 'react';，具体代码如下： image 之后就报错： image 那么 在dva-antd-umi框架中如何引用这个react-hooks呢

int64ago commented 5 years ago

npm i react@next react-dom@next -S

zdpBuilder commented 5 years ago

thanks

suxin2017 commented 5 years ago

@int64ago I have used your method, but it does not work well. Is there any other solution? This is my package

{
  "name": "ant-design-pro",
  "version": "2.1.1",
  "description": "An out-of-box UI solution for enterprise applications",
  "private": true,
  "scripts": {
    "presite": "cd functions && npm install",
    "start": "cross-env APP_TYPE=site umi dev",
    "start:no-mock": "cross-env MOCK=none umi dev",
    "build": "umi build",
    "site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy && npm run docker:push",
    "analyze": "cross-env ANALYZE=1 umi build",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "lint:prettier": "check-prettier lint",
    "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier",
    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js",
    "tslint": "npm run tslint:fix",
    "tslint:fix": "tslint --fix 'src/**/*.ts*'",
    "test": "umi test",
    "test:component": "umi test ./src/components",
    "test:all": "node ./tests/run-tests.js",
    "prettier": "node ./scripts/prettier.js",
    "docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
    "docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
    "docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
    "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build",
    "docker-hub:build": "docker build  -f Dockerfile.hub -t  ant-design-pro ./",
    "docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro",
    "docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.2",
    "@babel/runtime": "^7.3.4",
    "antd": "^3.14.0",
    "bizcharts": "^3.4.2",
    "bizcharts-plugin-slider": "^2.1.1-beta.1",
    "chalk": "^2.4.2",
    "classnames": "^2.2.6",
    "dva": "^2.4.0",
    "enquire-js": "^0.2.1",
    "hash.js": "^1.1.5",
    "lodash": "^4.17.10",
    "lodash-decorators": "^6.0.0",
    "markdown-it": "^8.4.2",
    "markdown-it-emoji": "^1.4.0",
    "markdown-it-imsize": "^2.0.1",
    "memoize-one": "^5.0.0",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "nzh": "^1.0.3",
    "omit.js": "^1.0.0",
    "path-to-regexp": "^2.4.0",
    "prop-types": "^15.7.2",
    "qs": "^6.6.0",
    "rc-animate": "^2.4.4",
    "react": "^16.8.3",
    "react-container-query": "^0.11.0",
    "react-copy-to-clipboard": "^5.0.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.8.3",
    "react-fittext": "^1.0.0",
    "react-media": "^1.8.0",
    "react-router-dom": "^4.3.1",
    "twemoji": "^11.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.8.6",
    "@types/react-dom": "^16.8.2",
    "antd-pro-merge-less": "^1.0.0",
    "antd-theme-webpack-plugin": "^1.1.8",
    "babel-eslint": "^10.0.1",
    "check-prettier": "^1.0.1",
    "cross-env": "^5.1.1",
    "cross-port-killer": "^1.0.1",
    "enzyme": "3.7.0",
    "eslint": "^5.15.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^3.6.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-compat": "^2.7.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-markdown": "^1.0.0-beta.6",
    "eslint-plugin-react": "^7.12.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "gh-pages": "^2.0.1",
    "husky": "^1.2.0",
    "jest-puppeteer": "^3.9.0",
    "less": "^3.9.0",
    "lint-staged": "^8.1.5",
    "merge-umi-mock-data": "^1.0.4",
    "mockjs": "^1.0.1-beta3",
    "prettier": "1.15.2",
    "pro-download": "^1.0.1",
    "slash2": "^2.0.0",
    "stylelint": "^9.10.1",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-standard": "^18.0.0",
    "tslint": "^5.13.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^3.6.0",
    "umi": "^2.5.5",
    "umi-plugin-ga": "^1.1.3",
    "umi-plugin-react": "^1.5.2"
  },
  "optionalDependencies": {
    "puppeteer": "^1.10.0"
  },
  "lint-staged": {
    "**/*.{js,ts,tsx,json,jsx,less}": [
      "node ./scripts/lint-prettier.js",
      "git add"
    ],
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.ts*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  }
}

image

sorrycc commented 5 years ago

hooks 和 dva 不冲突。

yoyo837 commented 5 years ago

react-redux 刚刚发布了支持hook connect 到redux的v7正式版本，是否考虑当下升级一下。

Alohaliu commented 5 years ago

@int64ago I have used your method, but it does not work well. Is there any other solution? This is my package

{
  "name": "ant-design-pro",
  "version": "2.1.1",
  "description": "An out-of-box UI solution for enterprise applications",
  "private": true,
  "scripts": {
    "presite": "cd functions && npm install",
    "start": "cross-env APP_TYPE=site umi dev",
    "start:no-mock": "cross-env MOCK=none umi dev",
    "build": "umi build",
    "site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy && npm run docker:push",
    "analyze": "cross-env ANALYZE=1 umi build",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "lint:prettier": "check-prettier lint",
    "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier",
    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js",
    "tslint": "npm run tslint:fix",
    "tslint:fix": "tslint --fix 'src/**/*.ts*'",
    "test": "umi test",
    "test:component": "umi test ./src/components",
    "test:all": "node ./tests/run-tests.js",
    "prettier": "node ./scripts/prettier.js",
    "docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
    "docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
    "docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
    "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build",
    "docker-hub:build": "docker build  -f Dockerfile.hub -t  ant-design-pro ./",
    "docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro",
    "docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.2",
    "@babel/runtime": "^7.3.4",
    "antd": "^3.14.0",
    "bizcharts": "^3.4.2",
    "bizcharts-plugin-slider": "^2.1.1-beta.1",
    "chalk": "^2.4.2",
    "classnames": "^2.2.6",
    "dva": "^2.4.0",
    "enquire-js": "^0.2.1",
    "hash.js": "^1.1.5",
    "lodash": "^4.17.10",
    "lodash-decorators": "^6.0.0",
    "markdown-it": "^8.4.2",
    "markdown-it-emoji": "^1.4.0",
    "markdown-it-imsize": "^2.0.1",
    "memoize-one": "^5.0.0",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "nzh": "^1.0.3",
    "omit.js": "^1.0.0",
    "path-to-regexp": "^2.4.0",
    "prop-types": "^15.7.2",
    "qs": "^6.6.0",
    "rc-animate": "^2.4.4",
    "react": "^16.8.3",
    "react-container-query": "^0.11.0",
    "react-copy-to-clipboard": "^5.0.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.8.3",
    "react-fittext": "^1.0.0",
    "react-media": "^1.8.0",
    "react-router-dom": "^4.3.1",
    "twemoji": "^11.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.8.6",
    "@types/react-dom": "^16.8.2",
    "antd-pro-merge-less": "^1.0.0",
    "antd-theme-webpack-plugin": "^1.1.8",
    "babel-eslint": "^10.0.1",
    "check-prettier": "^1.0.1",
    "cross-env": "^5.1.1",
    "cross-port-killer": "^1.0.1",
    "enzyme": "3.7.0",
    "eslint": "^5.15.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^3.6.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-compat": "^2.7.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-markdown": "^1.0.0-beta.6",
    "eslint-plugin-react": "^7.12.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "gh-pages": "^2.0.1",
    "husky": "^1.2.0",
    "jest-puppeteer": "^3.9.0",
    "less": "^3.9.0",
    "lint-staged": "^8.1.5",
    "merge-umi-mock-data": "^1.0.4",
    "mockjs": "^1.0.1-beta3",
    "prettier": "1.15.2",
    "pro-download": "^1.0.1",
    "slash2": "^2.0.0",
    "stylelint": "^9.10.1",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-standard": "^18.0.0",
    "tslint": "^5.13.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^3.6.0",
    "umi": "^2.5.5",
    "umi-plugin-ga": "^1.1.3",
    "umi-plugin-react": "^1.5.2"
  },
  "optionalDependencies": {
    "puppeteer": "^1.10.0"
  },
  "lint-staged": {
    "**/*.{js,ts,tsx,json,jsx,less}": [
      "node ./scripts/lint-prettier.js",
      "git add"
    ],
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.ts*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  }
}

image

try this:

  1. delete file package.json.lock
  2. delete node_modules: rm -rf node_modules/ (in linux) // 删除此前已安装依赖保的文件夹 3.npm install react@16.8.6 react-dom@16.8.6 -S （当前最新版本为16.8.6,要同时安装react 和 react -dom）
langer-man commented 5 years ago

https://www.npmjs.com/package/dva-react-hook