第二章react16 8全家桶从入门到实战第3节react组件化02 lesson3-react组件化021.pdfVIP

React组件化2 React组件化2 课堂⽬标​ 知识要点 资源 知识点 快速开始 使⽤第三⽅组件 配置按需加载 表单组件设计与实现 antd表单试⽤ 表单组件设计思路 表单组件实现 弹窗类组件设计与实现 设计思路 具体实现 ⽅案1 ：Portal ⽅案2 ： unstable_renderSubtreeIntoContainer 树形组件设计与实现 设计思路 开课吧web全栈架构师 实现 常⻅组件优化技术 定制组件的should ponentUpdate钩⼦ Pure ponent React.memo 作业 课堂⽬标​ 1. 掌握第三⽅组件正确使⽤⽅式 2. 能设计并实现⾃⼰的组件 3. 了解常⻅组件优化技术 知识要点 1. 使⽤antd 2. 设计并实现表单控件 3. 实现弹窗类组件 4. 实现树组件 5. 使⽤Pure ponent、memo 开课吧web全栈架构师 资源 umi ant design 知识点 快速开始 ( started/) npx create-react-app my-app cd lesson3 npm start 使⽤第三⽅组件 不必npm run eject，直接安装：npm install antd - -s e 开课吧web全栈架构师 范例：试⽤ ant-design组件库 import React, { ponent } from react import Button from antd/es/button import antd/dist/antd.css class App extends ponent { render () { return ( div className=App Button type=primaryButton/Button /div ) } } export default App 配置按需加载 安装react-app-rewired取代react-scripts，可以扩展 webpack的配置，类似vue.config.js 。 由于新的react-app-rewired@2.x 版本的关系，你还需 要安装customize-cra。 开课吧web全栈架构师 babel-plugin-import 是⼀个⽤于按需加载组件代码和样 式的 babel 插件（原理）。 npm install react-app-rewired customize-cra babel-plugin-import -D //根⽬录创建config-overrides.js const { override, fixBabelImports } = require (customize-cra); module .exports = override ( fixBabelImports(import, {//antd按需加载 libraryName: antd, libraryDirectory: es, style: css })