From 37a743cd01d7ffbbfb44633c9ea8afa025217c0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E8=BF=9B=E7=A6=84?= Date: Thu, 15 Apr 2021 10:37:57 +0800 Subject: [PATCH] parcel+react+tsx --- source/_posts/react/parcel+react+tsx.md | 182 ++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 source/_posts/react/parcel+react+tsx.md diff --git a/source/_posts/react/parcel+react+tsx.md b/source/_posts/react/parcel+react+tsx.md new file mode 100644 index 0000000..5e201cb --- /dev/null +++ b/source/_posts/react/parcel+react+tsx.md @@ -0,0 +1,182 @@ +--- +title: parcel+react+tsx +date: 2021-4-6 12:01:13 +tags: + - react +categories: + - react +--- + +熟悉一下react，使用`parcel`作为打包工具，使用`ant-design`作为组件库 + + +### 添加依赖 +```json +"devDependencies": { + "@types/react": "^17.0.3", + "parcel-bundler": "^1.12.5", + "typescript": "^4.2.3" +}, +"dependencies": { + "@tensorflow/tfjs": "^3.3.0", + "antd": "^4.15.0", + "dayjs": "^1.10.4", + "react": "^17.0.2", + "react-dom": "^17.0.2" +} +``` +其中`react`和`react-dom`是使用react构建项目必须的 +如果需要使用typescript编写代码，还需要引入`@types/react` +另外dayjs是antd要求引入的依赖 + +### 模板页面 +```html + + + + 测试页面 + + + +
+ + + +``` +添加一个id为app的div作为根元素 +并且引入入口文件index.tsx + +### tsconfig.json配置文件 +```json +{ + "compilerOptions": { + "jsx": "react", + "esModuleInterop": true + } +} +``` + +### 编写根组件 +```tsx +// App.tsx +import React, { PureComponent }from 'react' +import { Button, DatePicker } from 'antd' +import 'antd/dist/antd.css' + +class App extends PureComponent { + private model: tf.LayersModel; + async componentDidMount() { + console.log('mount生命周期') + } + render() { + return ( // 使用ant-design的组件 +
+ + +
+ ) + } + onChange(date, dateString: string) { + console.log(date, dateString) + } +} + +export default App +``` + +### 编写入口文件 +```tsx +// index.tsx +import React from 'react' +import ReactDom from 'react-dom' +import App from './App' + +ReactDom.render(, document.querySelector('#app')) +``` +这里的操作就是将上一步编写的根组件加载到根元素当中 + +### 开发模式与打包 +开发模式 +``` +parcel src/index.html +``` +打包构建 +``` +parcel build src/index.html +``` + +### react组件生命周期 + +组件的生命周期可分成三个状态： ++ **Mounting**：已插入真实 DOM ++ **Updating**：正在被重新渲染 ++ **Unmounting**：已移出真实 DOM + +生命周期的方法 + ++ **componentWillMount** 在渲染前调用,在客户端也在服务端。 ++ **componentDidMount** 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 ++ **componentWillReceiveProps** 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 ++ **shouldComponentUpdate** 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 +可以在你确认不需要更新组件时使用。 ++ **componentWillUpdate** 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 ++ **componentDidUpdate** 在组件完成更新后立即调用。在初始化时不会被调用。 ++ **componentWillUnmount** 在组件从 DOM 中移除之前立刻被调用。 + +### 路由 +引入依赖 +``` +npm install react-router-dom --save +npm install @types/react-router-dom --save-dev +``` +> `react-router`与`react-router-dom` +> 前者实现了路由的核心功能 +> 后者基于react-router，加入了在浏览器运行环境下的一些功能 +> 引入后者相当于间接引入了前者 + +编写路由页面 + +```tsx +import React, { PureComponent } from 'react' +import { NavLink, Route, HashRouter } from 'react-router-dom' + +class APage extends PureComponent { + render() { + return ( +
我是A页面
+ ) + } +} +class BPage extends PureComponent { + render() { + return ( +
我是B页面
+ ) + } +} +class App extends PureComponent { + render() { + return ( + +
+ 这里是主页面 +
    +
  • A页面
    • +
  • B页面
    • +
+ + +
+ + ) + } +} + +export default App +``` + ++ 路由分为`HashRouter`和`BrowserRouter`两种 +相当于vue-router当中的**hash**和**history**两种模式 ++ `NavLink`会被渲染为一个a标签，作为路由跳转的链接 +与`Link`相比多了一些属性，比如**activeClassName**，便于样式的调整 ++ `Route`就是路由对应的页面 \ No newline at end of file