1.1 前端技术:
问题
: 1.
组件
tsx
封装原则
,
快速封装
,
getTableData(pageNum?: number, level?: number, parent?: string, num?: number, num2?: number) {
调用时
: getTableData(1)
问号代表可空并且
1=
第一个参数
组件选择
前端框架，拉出来比比渲染速度成了老生常谈
AntV
企业级可视化解决方案
详细介绍各个可视化组件库
AntV 3.0
已全新升级，主要包含
G2
、
G6
、
F2
、
L7
以及一套完整的图表使用和设计规范
组件找到对应文档
:
这里组件使用的是
AntV,
而不是
antDesign
<Line {...realTimeConfig} /> g2plot.antv.vision/zh/examples…
归因分析趋势图
import { Line as G2plotLine, LineConfig as G2plotProps } from '@antv/g2plot'; #
这里引入
g2plot
组件库
,
找折线图即可看到
api.
前端依赖组件
:
import { Line } from '@ant-design/charts' //
这里搜索可以查到
具体依赖
tgz
的下面
jar
包
,
打开看也是
import { Line as G2plotLine, LineConfig as G2plotProps } from '@antv/g2plot';
{
"name": "Smart-Plus",
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@ant-design/charts": {
"version": "0.9.13",
"resolved": "registry.m.jd.com/@ant-design…",
"integrity": "sha1-rWdWjsq5FuKU5BpMGEaqz9/wIJA=",
"requires": {
"@antv/g2plot": "^1.1.24",
"@antv/g6": "^3.6.2"
}
},
1.1.1 4. 资料:
组件
zh-hans.reactjs.org/ hook
zhuanlan.zhihu.com/p/65773322 react
入门讲解
-
钩子
页面表单提交等
,
自定义
hooks,useReducer
整合逻辑
入门大全
www.ruanyifeng.com/blog/2020/0…
基础讲解
:
组件
ES6
的展开表达式
, Object.assign
的浅拷贝对象
,js
的深拷贝浅拷贝方法
.
相比于使用模版语言的
Vue
、
Angular
，使用原生
js
（
JSX
仅仅是
js
的语法糖）开发
UI
的
React
在语法层面有更多灵活性。
组件定义
:
这里定义接口
:
export interface PeopleProps {
compareDate: string
compareType: string
date: string
hour: number
page: string
polarisIndex: string
resource: string
id: number
quotaState: number
}
组件导出
,
其他页面可以用
了
export default function People(props: PeopleProps) {
使用
: <People {...selected} id={objParams.id} quotaState={home.quotaState} />
使用的是
{...selected}
展开表达式
.
赋值对应的参数传递给组件
.
在组件内不能修改参数
.
如果组件内想要参数改变再调用
api,
需要重新封装
.
提交组件
:submit
组件
: onClick
对应不同方法
确认
取消
[React
框架入门》
](www.ruanyifeng.com/blog/2015/0…)
和
[
《
React
最常用的四个钩子》
](www.ruanyifeng.com/blog/2019/0…)
。
任何一个组件，可以用类来写，也可以用钩子来写。下面是类的写法。
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
;}}
再来看钩子的写法，也就是函数。
function Welcome(props) {
return
Hello, {props.name}
;}函数一般用来纯计算
:
不涉及计算的操作（比如生成日志、储存数据、改变应用状态等等）
使用钩子函数
.
React
为许多常见的操作（副效应），都提供了专用的钩子。
useState()
：保存状态
useContext()
：保存上下文
useRef()
：保存引用
......
上面这些钩子，都是引入某种特定的副效应，而
**useEffect()
是通用的副效应钩子
。找不到对应的钩子时，就可以用它。
**
格式
:
代码里
定义
组件
function Title(title: string, jini: string, index: number) {
return (
波动指数
: {toFixed(numFormat(jini) * 100, 2)+'%'}
)
}
使用组件
:
{Title(item.title, item.geni, index + 1)}
钩子函数
,
定义页面绑定的
date
等值变化时
,
执行钩子内方法
useEffect(() => {
if (props.page) {
getDimen()
}
}, [props.date, props.hour, props.polarisIndex, props.resource, props.compareDate])
useEffect()
的副效应函数内部有一个
async
函数，用来从服务器异步获取数据。拿到数据以后，再用
setData()
触发组件的重新渲染。
由于获取数据只需要执行一次，所以上例的
useEffect()
的第二个参数为一个空数组。
开课吧的
《
React
原理剖析
组件化》
系统视频。
this.props.children
的值有三种可能：如果当前组件没有子节点，它就是
undefined ;
如果有一个子节点，数据类型是
object
；如果有多个子节点，数据类型就是
array
。所以，处理
this.props.children
的时候要小心。
React
提供一个工具方法
来处理
this.props.children
。我们可以用
React.Children.map
来遍历子节点，而不用担心
this.props.children
的数据类型是
undefined
还是
object
。更多的
React.Children
的方法，请参考
[
官方文档
](#react.children)
。
1.1.2 React入门介绍: blog.towavephone.com/react-techn… 入门
React
为了践行“构建快速响应的大型
Web
应用程序”理念做出的努力。
这其中有些优化手段可以在现有架构上增加，而有些（如：异步可中断更新）只能重构整个架构实现。
React16
架构
React16
架构可以分为三层：
Scheduler
（调度器）—— 调度任务的优先级，高优任务优先进入
Reconciler
Reconciler
（协调器）—— 负责找出变化的组件
Renderer
（渲染器）—— 负责将变化的组件渲染到页面上
可以看到，相较于
React15
，
React16
中新增了
Scheduler
（调度器
React16
采用新的
Reconciler
。
[RF
记忆点
]
Reconciler
内部采用了
Fiber
的架构。
Fiber
是什么？他和
Reconciler
或者说和
React
之间是什么关系
虚拟
DOM
在
React
中有个正式的称呼——
Fiber.
什么是代数效应
代数效应是函数式编程中的一个概念，用于将副作用从函数调用中分离。
总结一下：代数效应能够将副作用（例子中为请求图片数量）从函数逻辑中分离，使函数关注点保持纯粹。
类似于
web component
的组件封装，面向未来
可复用，可组合的组件架构
数据驱动，
UI
自动更新，解放
DOM
操作
JSX
语法使得代码看起来简洁清晰
单向数据流
:
使得组件行为更可预测
Virtual DOM:
虚拟
DOM
的抽象使得
React
组件可以跨端渲染
React Native App
开发
JSX
语法和
Vue
模板语法类似
JSX
好处
JSX Prevents Injection Attacks
安全 阻止
XSS (cross-site-scripting)
攻击
和传统模板比
简单
支持插槽，
props.children
1.1.3 react框架特色
使用注意
:
1
多个子标签的情况下，必须有一个父亲标签
,
如
div,
如果不想显示这个父亲
div
， 可以使用
React.Fragment
标签来代替来替代
函数体内异步
io,
异步调用后端接口
需要使用
: async await
async querySubDimensionList(ctx) {
let data = await detailModal.querySubDimensionList(ctx, params)
嵌套子表格
1.1.4 前端语法大全: 熟悉一遍
targets: quotaList.join(','), list
转成字符串
.
var
、
let
和
const
区别
const remaining = end - new_time
const
一般是声明常量
const
声明的变量不得改变值，这意味着，
const
一旦声明变量，就必须立即初始化， 不能留到以后赋值，否则会报错
let
声明的变量可以改变，值和类型都可以改变，没有限制
const
声明的变量必须赋初始值，
let
不需要赋初始值
共同点：
const
与
let
都只是声明所在的块级作用域内有效
正确修改代码，
将
const
改为
let
react
判空大概
4
中方法
:
叹号判空
if (!!num2 || num2 == 0) {
let keys = Object.keys(res.data.dataList[0])
tableData[num].children[num2] = Object.assign(tableData[num].children[num2], {
children: res.data.dataList,
})
Object.assign
方法用于对象的合并，将源对象（
source
）的所有可枚举属性，复制到目标对象（
target
）。
1.json
中的
key
重名
,
则进行覆盖
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2); //target // {a:1, b:2, c:3}
第一个目标对象
,
后面参数原对象
Object.assign
方法的第一个参数是目标对象，后面的参数都是源对象。
concat()
方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
Table
表格
:
嵌套子表格用
onexpand
事件
expand
有两个参数
第一个参数
为
当前行是否展示
属性
为
true
和
false
第二个参数
为
当前
行下的数据
是一个数组
多存放在
children
中
